Viewport Studio

The problem

Chrome DevTools device mode shows one screen at a time, and extensions that emulate devices through the debugger put a "started debugging this browser" banner on every tab. Checking a layout on several phones meant resizing over and over.

The solution

An extension that turns the current tab into a device studio. Sites load in real iframes, so there is no debugger banner, and up to four devices stay in sync while you browse.

What I built

• Side-by-side comparison of up to 4 devices with synced navigation and scrolling, including carousels and inner scroll areas.
• Screenshots with or without the device frame, including full-page captures that show sticky headers only once, and video recording to MP4.
• Ten phone, tablet and desktop presets, custom sizes, rotation without reloading, and a mobile user agent switch.
• Private by design: no network calls, analytics, remote code or build step. Covered by unit tests and Playwright end-to-end tests in CI, released under the MIT license.