Responsive Preview

Test your website on phone, tablet and desktop at the same time

Responsive Preview is a responsive design tester built into DevToolkit. It opens the page you are on in its own window and shows it at phone, tablet and desktop widths next to each other. Every view is the live website, not a picture of it. You can scroll, open menus, play with sliders and fill in forms in each one, the same way a visitor would.

It starts with three sizes that cover most layouts: a 375 px phone, a 768 px tablet and a 1440 px desktop. From there you can add the devices your visitors actually use, type in any width you need, or turn a device sideways to check the landscape layout.

Why a side-by-side view saves time

Most layout bugs show up between breakpoints: a menu that wraps onto two lines at 800 px, a card grid that leaves one lonely item on tablet, a hero image that crops a face on small phones. Resizing one browser window back and forth only ever shows you one size at a time, so these problems are easy to miss. With every size on screen together, you see where the layout breaks and at which width, in one look.

Turn on synced scrolling and all the previews move together. Scroll to the pricing table on the desktop view and the phone and tablet views follow, so you can compare the same section across every layout without hunting for it.

What to check with a responsive design tester

A quick pass across the three default sizes catches most of the problems visitors notice first:

• Navigation: does the menu switch to a mobile menu at the right width, and does it open and close properly?
• Text: do headings wrap cleanly, or does a long word push past the edge of a small screen?
• Images: are hero images cropped well on narrow screens, and do logos stay sharp?
• Grids and cards: do columns drop to two and then one at sensible widths, without a lonely card on its own row?
• Buttons and forms: are tap targets big enough on a phone, and do form fields fit the screen?
• Horizontal scrolling: if a view scrolls sideways, something is wider than the screen. Rotate the device too, since landscape phones often show what portrait hides.

Responsive Preview or Chrome’s device mode?

Chrome’s built-in device toolbar is fine for a quick look at one screen size. Responsive Preview is built for comparing: several sizes at once, one address bar that loads a new page into every device, a zoom slider so even a 1920 px desktop fits on a laptop screen, and no DevTools panel taking up half your window. Many developers use both: device mode for debugging one breakpoint, Responsive Preview for checking the whole page before it goes live.

Who it is for

• Front-end developers checking breakpoints and media queries while they build.
• Designers reviewing how a layout holds up on real widths before signing it off.
• Agencies and freelancers showing clients their site on every screen in a single window.
• QA testers and site owners doing a final pass on menus, forms and checkout pages before launch.

Many websites tell browsers not to show them inside other pages. Responsive Preview lifts that block only for its own preview window and only while it is open, so most sites load normally. Everything runs inside your browser. The pages you test are never sent to our servers.