Check a layout across four, six, ten viewports at once — synced scroll, clicks and input — without opening a separate desktop app or paying a monthly seat.
The strong competitors in this space are standalone desktop apps — which means a second cookie jar, a second login, a second window to keep in sync with what you're actually building. ResponsiveX runs where the work already is.
Built on the domain logic of the open-source Responsive Viewer, with the platform layer rebuilt for Manifest V3 and three gaps closed that its users kept filing issues about.
ResponsiveX is distributed directly for now — Chrome won't install a downloaded .zip in one click, so it's a short manual load:
Download the .zip above and unzip it anywhere on disk.
Open chrome://extensions in a new tab.
Turn on Developer mode (top-right toggle).
Click Load unpacked and select the unzipped folder.
Newest first. Every fix below is covered by a test in the repo, so a regression cannot slip back in quietly.
Run these against the build above. Cases marked was reported are fixes from the last round — they matter most. Note the exact URL you tested on: behaviour depends on the site inside the frame.
Unzip, load unpacked at chrome://extensions, then click the toolbar icon on any site.
a viewer tab opens with two screens (Mobile 390×844, Desktop 1280×800), both showing the site, and the toolbar reads headers modified · session-scoped.
Open “Device…” right of the Zoom slider and pick several in a row — an iPhone, a Galaxy, the iPad — then pick the first one again.
each pick leaves exactly one screen on the page, captioned with the device name and its size (e.g. iPhone 17 Pro · 402×874); the list snaps back to “Device…”; returning to an earlier device shows the same screen again rather than a second copy of it.
After T2, export presets (or just look at the screen list) — the earlier screens should still exist, only hidden. Add a screen manually via “Add screen” with width 1400.
“Add screen”, breakpoint chips and “Add all” still add, and the new screen is scrolled into view and briefly outlined — it never lands off the right edge unseen. The toolbar stays visible while that happens.
With Sync on and 3+ screens open, scroll one frame down a long page, then stop and watch for five seconds. Repeat with screens of clearly different heights.
the others follow while you scroll and freeze the moment you stop — no twitching, creeping or bouncing afterwards.
Open a site with several media queries, wait ~2s for the bar, then press “Add all”.
the caption states a count and its source, and “Add all” adds exactly that many screens, then greys out. A page with one breakpoint showing one button is correct, not a bug — cross-origin and em/rem-based queries are not readable, as the bar notes.
Press the ✕ at the right of the bar, then look at the strip that replaces it.
“Show N CSS breakpoints” appears and brings the same widths back — without reloading the viewer.
Remove all screens with the ✕ on each card. Then reload the viewer tab and check the state again.
“No screens to show” with a working “Restore default screens” button — before and after the reload. Never a blank page.
Open chrome://extensions after using the viewer and read what the red Errors button lists.
only “An iframe which has both allow-scripts and allow-same-origin…”, one entry per frame. That one is expected and explained in Known limitations. Anything else is a real finding — copy the full text and stack trace.
Capture a single screen (📷 on a card) and then “Screenshot all”, at 1× and at 2×. Include a page taller than the viewport.
the PNG is the full frame at the chosen scale, the long page comes out whole rather than one viewport, and “all” downloads a zip named for the scale. Open the files and look — no white bands, no cut-off bottom.
Build a set of screens, “Export presets”, remove a few screens, then “Import presets” with that file. Also try importing a deliberately corrupted file.
the export is readable JSON, the import restores the set and reports how much it added; a corrupt file is refused with a message and changes nothing.
Point the viewer at a local dev server, and separately at a site that refuses to be framed. Stop the dev server and reload.
a working dev server renders in every screen; a frame that cannot load shows a named reason and a link to Known limitations — never a silent white rectangle.
Set up screens, layout and zoom, then close and reopen Chrome and launch the viewer again.
your screens and settings come back as you left them.
When something looks wrong: say which URL was in the frame, how many screens were open, and what you expected instead. A short screen recording beats a description for anything that moves — and if chrome://extensions shows an error, paste its text, not a photo of the button.