v1.2 Chrome extension for QA & frontend teams

One page.
Every screen.
In sync.

Open phone, tablet and desktop side by side in a single Chrome tab. Scroll, click or type on any of them and the rest follow — frame for frame.

  • MIT licensed
  • No account
  • Runs locally
  • Manifest V3
Scroll Click Keys
localhost:3000/lamp/aster
3 devices Try it — scroll, click or type in any screen
393
iPhone 15 Pro 393 × 852
820
iPad Air 820 × 1180
1440
Desktop 1440 × 900
event bus
    Viewports
    ∞phones, tablets, desktops, custom sizes — one tab
    Sync rate
    120fpsscroll, click, tap and form input mirrored live
    MCP tools
    12for Claude, Cursor, Gemini and Codex
    Uploaded
    0Bscreens, captures and video never leave your machine

    What's in the box

    Built around the bugs you actually ship.

    Each tool exists because a layout broke somewhere nobody looked. Here is what they do — running live, not in a screenshot.

    01

    Real device chrome, not a resized box.

    Dynamic Island, notches, home indicator and the iOS Safari bottom bar that collapses from 114 px to a 44 px strip as you scroll. Your sticky footer gets tested against what users really see.

    User-agent & client hints — JS and network layer

    
                
    9:41
    AAaster.studio↻
    ‹›⇪▢⧉
    aster.studio
    114px
    02

    Inspect any element, on any screen.

    Hover to read the box model, computed size, font and color right inside each viewport — then catch the console errors and 404s each device threw while you were looking.

    ↳ Move your pointer over the card

    Desk lighting

    Aster task lamp

    Warm 2700K, dimmable, folds flat for travel.

    $129
    Console0
      03

      Evidence a developer can't argue with.

      Stitch a full page top to bottom with no seams and sticky headers handled. Mark it up with arrows, boxes and numbered steps. Record the repro as WebM and compress it in the browser before it hits Jira.

      • Full-page stitch & area snip
      • Annotation studio with step badges
      • WebM recording, Offscreen-worker compression
      • Local IndexedDB media gallery
      1/6
      →
      aster-full.png—
      1 2 3
      00:00
      48.6 MB
      04

      Works on localhost. Works on staging. No blank frames.

      Declarative Net Request rules lift X-Frame-Options and CSP frame-ancestors on test tabs only — so your dev server, intranet and logged-in staging render instead of "refused to connect". No proxy, no tunnel.

      • Split incognito sessions for guest flows
      • Zero telemetry, zero ads, zero paywall
      GET http://localhost:5173/ 200
      1. content-type: text/html; charset=utf-8
      2. x-frame-options: DENY
      3. content-security-policy: frame-ancestors 'none'
      4. cache-control: no-cache
      declarativeNetRequest · 2 headers removed on this tab
      :3000
      :5173
      :8080

      Model Context Protocol

      Hand the checklist to your agent.

      The responsive-tester-mcp package bridges Claude, Cursor, Gemini or Codex to the extension over ws://127.0.0.1:8765. Prefix a request with rstest and it drives your real Chrome — not a headless copy.

      rstest · session
      you

      rstest: open localhost:3000 on iPhone 15 Pro, iPad Air and Desktop FHD. Check the header for overflow.

      rstest_open_viewer{ url: "http://localhost:3000" }312ms
      rstest_set_devices["iphone-15-pro", "ipad-air", "desktop-fhd"]48ms
      rstest_capture_screenshots→ 3 × PNG1.4s
      393
      820
      1920
      rstest_get_logs→ 1 warning22ms
      agent

      Header overflows by 24px on iPhone 15 Pro. .nav-links doesn't wrap below 400px, pushing the cart icon off-screen. iPad Air and Desktop are clean. Suggested fix: collapse links into the menu under @media (max-width: 480px).

      Paste the prompt into your AI client — it edits its own config, keeps your other servers, and tells you if a restart is needed.

      Tools your agent gets

      • navigate
      • open_viewer
      • set_devices
      • add_device
      • list_devices
      • interact
      • capture_screenshots
      • set_user_agent
      • get_logs
      • status
      • test_workflow

      Prompt recipes — click to copy

      The real thing

      Watch it work on a real project.

      Side by side

      Why not just DevTools?

      Device Mode shows one viewport at a time. Desktop apps show many — at 1 GB of Electron. This sits in between.

      Responsive TesterResponsively AppDevTools Device Mode
      Several viewports at once● In one Chrome tab● Electron window○ One at a time
      Scroll / click / input sync● 60–120 fps◐ Basic○ —
      Install footprint● Lightweight extension○ 1.2 GB+ app● Built in
      iOS Safari bottom-bar collapse● iOS 15–18○ —○ —
      Localhost & frame-blocked sites● DNR rules◐ Manual proxy● Native
      Full-page stitch● Seamless◐ Clips sticky headers◐ Command menu
      Video recording + compression● WebM, in-browser○ —○ —
      AI agent control (MCP)● 12 tools○ —○ —
      Price● Free, MIT● Open source● Free

      Sixty seconds

      Install, pin, open any page.

      1. 1

        Add from the Chrome Web Store

        One click. The extension never sends your browsing data anywhere.

      2. 2

        Pin it and open any page

        Click the icon on any tab — including localhost — to open it in the multi-screen studio.

      3. 3

        Optional: connect your AI

        Add npx -y responsive-tester-mcp@latest to your client. The toolbar shows AI Online when the bridge is up.

      FAQ

      Questions QA leads ask first.

      Does it work on localhost and private staging?

      Yes. localhost:3000, :5173, 127.0.0.1:8080 and intranet IPs all work. Everything runs inside your browser, so no tunnel such as ngrok is needed.

      How does it avoid the "refused to connect" frame error?

      It uses Chrome's declarativeNetRequest API (Manifest V3) to remove X-Frame-Options and CSP frame-ancestors headers only on the simulator's tabs. Your normal browsing is untouched.

      How accurate is the Safari bottom bar?

      Scrolling down more than 36 px collapses the 114 px bar into a 44 px hostname strip, as iOS 15–18 Safari does. Fixed footers stay positioned above the browser controls, so you can see whether yours collides.

      Is video compression private?

      Recordings are compressed in memory with Offscreen Canvas and Web Workers. No video bytes are uploaded to any server.

      What is MCP and which AI clients work?

      Model Context Protocol is an open standard that lets AI assistants use local tools. responsive-tester-mcp opens a WebSocket bridge on 127.0.0.1:8765; Claude, Cursor, Windsurf, Gemini/Antigravity and Codex can then navigate, click, capture and read logs.

      Is it really free?

      Yes — MIT licensed, no paywall, no device limit, no watermark on exports, no ads.

      Stop resizing
      the window.

      Add to Chrome — free

      Built by one developer. Kept free by people like you.

      If it saves your team a few hours each sprint, a coffee keeps the updates coming.

      PayPal paypal.me/ThongNguyenBK →
      VietQR · MBBank 18118666688 NGUYEN XUAN THONG · memo: Moi cafe ban nhe