Inspect & Debug

Responsive Viewer

Preview a site across phone, tablet, laptop and desktop breakpoints side by side, without resizing your browser window.

When you'd use it

• Check a new section at every breakpoint before opening a pull request
• Find the width where a headline wraps badly or a grid collapses awkwardly
• Show a client how their page looks on mobile and desktop at the same time
• Verify a fix worked at one breakpoint without breaking another

How to use Responsive Viewer

1. Open Responsive Viewer.
2. Pick the device widths you care about.
3. Compare the layouts side by side.
4. Scroll each frame independently to inspect a specific section.

Responsive Viewer FAQ

Is this the same as DevTools device mode?

The idea is similar, but you see several widths at once rather than switching between them, which makes breakpoint bugs much easier to spot.

Does it emulate touch and mobile user agents?

It focuses on layout at different widths. For full device emulation including touch events, DevTools device mode is still the right tool.

Works well with