{"slug": "viewport-lab-open-source-responsive-tester-with-sync-scroll-no-telemetry", "title": "Viewport Lab – Open-source responsive tester with sync scroll(no telemetry)", "summary": "Viewport Lab, an open-source multi-device responsive testing extension for Chrome and Chromium browsers, launched with support for up to 5 concurrent viewports, zero-reload geometry changes, and an optional local MCP bridge for AI agents such as Claude Code, Antigravity, and Cursor. The tool performs deterministic QA checks for horizontal overflow, clipped text, touch targets under 44×44px, missing image alt attributes, and unlabelled form controls, and parses stylesheets to pin @media breakpoints on a 240px-to-1440px sweep ruler. Viewport Lab ships with no build step, runs entirely locally with zero remote scripts, CDNs, analytics, or backend, and saves workspaces in chrome.storage.local.", "body_md": "**Open-source multi-device responsive review and QA workspace for Chrome & Chromium browsers.**\n\n  Keep real websites alive inside multiple viewports with zero-reload geometry changes, deterministic QA audits, and an optional local MCP bridge for AI agents.\n\n*Interactive demonstration: Multi-device sync scroll, Row & Focus layouts, hot zero-reload rotation, device presets, and deterministic QA checks. ([Download MP4 Video](https://github.com/HeartDev0/viewport-lab/blob/main/assets/viewport-lab-demo.mp4))*\n\n- **Persistent Previews (Zero-Reload Invariant)** : Resizing, rotating, switching shells, adjusting workspace resolution, changing layouts, or zooming never unmounts or reloads the active website iframes.\n- **Side-by-Side Multi-Device Review** : Preview up to 5 concurrent viewports simultaneously with accurate pixel ratios (Apple, Google, Samsung, Tablets, Laptops/Desktops, and Custom viewports).\n- **One-Click PNG Screenshots** : Instantly capture and download pixel-perfect PNGs of any device or the complete review canvas directly from the UI.\n- **Local Dev Friendly** : Smart URL normalizer detects`localhost` , LAN IPs (`192.168.x.x` ,`10.x.x.x` ), and dev domains (`.local` ,`.test` ) without forcing HTTPS, plus auto-saved recent URL history.\n- **Crisp vs. Fit Scaling** :\n  - **Crisp** : Maximizes 1:1 pixel sharpness within the visible canvas.\n  - **Fit** : Proportionally scales all active viewports so the entire device fleet is visible at a glance.\n- **Deterministic Responsive QA Checks** : Instantly detect horizontal layout overflow, clipped text, touch targets smaller than 44×44px, missing image`alt` attributes, and unlabelled form controls — no AI hallucinations, purely deterministic.\n- **CSS Breakpoint Discovery Ruler** : Automatically parses stylesheets on the previewed page and places interactive pins on an inspection ruler for every`@media (min-width / max-width)` breakpoint.\n- **Responsive Sweep Slider** : Scrub continuously across 240px to 1440px to catch layout shifts and breaking points in real time.\n- **Declarative Compatibility Mode** : Safely bypasses`X-Frame-Options` and`frame-ancestors` CSP headers on preview subframes using Manifest V3`declarativeNetRequest` session rules — without compromising top-level browser security.\n- **Synchronized Navigation & Smooth Scroll** : Relative lockstep navigation with 60/120fps`requestAnimationFrame` throttled scroll synchronization, echo suppression, and trailing alignment.\n- **Local Workspaces** : Save and restore complex device setups directly in`chrome.storage.local` .\n- **Optional Local MCP Bridge** : Connect Claude Code, Antigravity, Cursor, or any Model Context Protocol agent to inspect, sweep, click, fill, or screenshot viewports on`127.0.0.1` .\n- **100% Local & Auditable** : Zero remote scripts, zero CDNs, zero analytics, zero backend.\n\nExplore Viewport Lab's workflow, layout modes, inspection tools, and developer utilities in action:\n\n| Multi-Device Responsive Workspace | Focus Mode (1:1 Sharp Single View) | \n|---|---|\n| *Real-time multi-viewport canvas with Apple, Android & Laptop frames* | *Pixel-perfect 1:1 view with quick rotation, shell switching, and inspect tools* | \n\n| Row Layout Comparison | Device Presets Dialog | \n|---|---|\n| *Synchronized horizontal stack with unified scroll & navigation lockstep* | *Curated Apple, Google, Samsung, Tablets, Desktops, and custom viewports* | \n\n| Automated Responsive QA Checks | Onboarding & Guided Tour | \n|---|---|\n| *Deterministic detection of touch target flaws, layout overflows & missing alts* | *Interactive step-by-step introduction for first-time developers* | \n\n| MCP AI Agent Bridge | Responsive Sweep & Precision Sidebar | \n|---|---|\n| *Model Context Protocol integration for Claude, Antigravity, and Cursor agents* | *Scrub breakpoints from 240px to 1440px with live CSS media query pins* | \n\nViewport Lab has no build step; it runs on standard browser web technologies.\n\n1. Clone or download this repository:\n\n```\ngit clone https://github.com/HeartDev0/viewport-lab.git\n```\n\n2. Open your browser's extension manager:\n  - Chrome / Brave / Arc: `chrome://extensions`\n  - Microsoft Edge: `edge://extensions`\n3. Chrome / Brave / Arc: \n4. Enable **Developer mode** (toggle in the top-right corner).\n5. Click **Load unpacked** and select the root`viewport-lab-extension` folder.\n6. Navigate to any website or localhost app (e.g. `http://localhost:5173` ) and click the**Viewport Lab** icon in your browser toolbar.\n\nDevice shells (pill, notch, punch-hole, clean bezel, tablet) are purely decorative. The underlying iframe receives authentic CSS viewport dimensions. When you rotate or resize a device, CSS media queries trigger naturally without destroying JavaScript state or reloading the page.\n\nViewport Lab fits your screen without overflowing or introducing confusing double scrollbars. You can preview in:\n\n- **Auto** : Adapts dynamically to your available browser window space.\n- **1080p, 1440p, 4K, or Custom** : Virtual reference canvases that scale gracefully inside your display.\n\nMany production websites set `X-Frame-Options: DENY` or `Content-Security-Policy: frame-ancestors 'self'`.\nViewport Lab uses Manifest V3 `declarativeNetRequest` session rules:\n\n- Rules only apply to sub-frames loaded within the Viewport Lab tab (`tabId` ).\n- Rules are ephemeral (session-based) and automatically disappear when the tab closes.\n- If a preview encounters a restrictive header, an explicit **Retry compatibility** button appears to recover seamlessly.\n\n| Shortcut | Action | \n|---|---|\n| `+` or`=` | Open Add Device dialog | \n| `R` | Rotate selected device (portrait ↔ landscape) | \n| `Ctrl` /`Cmd` +`D` | Duplicate selected device | \n| `Delete` | Remove selected device | \n| `C` | Switch to **Crisp** view (1:1 clarity) | \n| `F` | Switch to **Fit** view (all devices visible) | \n| `1` | **Grid** layout | \n| `2` | **Row** layout | \n| `3` | **Focus** layout (magnifies selected device) | \n| `4` | **Free** layout (draggable viewports) | \n| `Alt` +`C` | Run deterministic responsive checks | \n| `Ctrl` /`Cmd` +`R` | Reload all active previews | \n| `Ctrl` /`Cmd` + Wheel | Zoom workspace in / out | \n\nViewport Lab includes an optional **Model Context Protocol (MCP)** server under `mcp/`. This allows AI coding assistants (like Claude Desktop, Antigravity, or Cursor) to programmatically inspect responsive layouts, detect bugs, and run QA sweeps.\n\n1. \nOpen a terminal in the `mcp/` directory and install dependencies:\n\n```\ncd mcp\nnpm install\n```\n\n2. \nAdd the MCP server to your agent's configuration: **Claude Desktop (`claude_desktop_config.json`) / Antigravity (` mcp.json`)** :\n\n```\n{\n  \"mcpServers\": {\n    \"viewport-lab\": {\n      \"command\": \"node\",\n      \"args\": [\n        \"/absolute/path/to/viewport-lab-extension/mcp/server.mjs\"\n      ]\n    }\n  }\n}\n```\n\n3. \nIn Viewport Lab, expand the **Integrations** section in the left sidebar and enable**Allow agent control** .\n\n- `viewport_status` : Inspect current URL, devices, layout, and agent control state.\n- `viewport_open_url` : Direct previews to an HTTP/HTTPS or localhost URL.\n- `viewport_select_device` /`viewport_add_device` /`viewport_remove_device` : Manage viewports.\n- `viewport_set_device` : Resize, rotate, or restyle devices on the fly without reloads.\n- `viewport_run_checks` : Run deterministic responsive QA checks (overflow, touch targets, alt tags).\n- `viewport_inspect_page` /`viewport_inspect_element` : Extract DOM bounds, landmarks, and computed styles.\n- `viewport_sweep` : Run automated width sweeps across 320–1440px.\n- `viewport_screenshot` : Capture full workspace or device PNGs for multimodal vision models.\n\n*Security Note: The MCP bridge binds strictly to loopback (`127.0.0.1:43117`). Password fields are permanently blocked from agent input tools.*\n\nRun all regression checks and privacy audits with:\n\n```\n# Run all audits\nnpm test\n\n# Run individual checks\nnpm run check          # Validates manifest, required files, and icon dimensions\nnpm run privacy-check  # Ensures zero telemetry, remote scripts, or non-loopback endpoints\nnpm run check:phase0   # Confirms zero-reload invariants and canvas containment\nnpm run check:phase1   # Verifies UI markers and design tokens\nnpm run check:focus    # Tests Focus mode scaling mathematics\n```\n\n- **No Remote Dependencies** : HTML, CSS, and JS run entirely from the local extension package.\n- **No Telemetry** : No Google Analytics, Sentry, Mixpanel, Segment, or tracking pixels.\n- **Direct Requests** : Previews communicate directly between your browser and the target web server; no proxy server is involved.\n- See [PRIVACY.md](https://github.com/HeartDev0/viewport-lab/blob/main/PRIVACY.md) and[SECURITY.md](https://github.com/HeartDev0/viewport-lab/blob/main/SECURITY.md) for complete details.\n\nViewport Lab is completely free, open-source, and contains zero ads or telemetry. If this extension saves you time in your responsive design and testing workflow, consider supporting its development:\n\n- **License** : MIT — see[LICENSE](https://github.com/HeartDev0/viewport-lab/blob/main/LICENSE) .\n- **Changelog** : Detailed release history is documented in[CHANGELOG.md](https://github.com/HeartDev0/viewport-lab/blob/main/CHANGELOG.md) .\n- **Contributing** : Please review[CONTRIBUTING.md](https://github.com/HeartDev0/viewport-lab/blob/main/CONTRIBUTING.md) before submitting pull requests.", "url": "https://wpnews.pro/news/viewport-lab-open-source-responsive-tester-with-sync-scroll-no-telemetry", "canonical_source": "https://github.com/HeartDev0/viewport-lab", "published_at": "2026-10-08 06:14:30+00:00", "updated_at": "2026-10-08 06:49:08.532369+00:00", "lang": "en", "topics": ["developer-tools", "agent-protocols", "ai-agents"], "entities": ["Viewport Lab", "Chrome", "Chromium", "Claude Code", "Antigravity", "Cursor", "Model Context Protocol", "chrome.storage.local"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/viewport-lab-open-source-responsive-tester-with-sync-scroll-no-telemetry", "markdown": "https://wpnews.pro/news/viewport-lab-open-source-responsive-tester-with-sync-scroll-no-telemetry.md", "text": "https://wpnews.pro/news/viewport-lab-open-source-responsive-tester-with-sync-scroll-no-telemetry.txt", "jsonld": "https://wpnews.pro/news/viewport-lab-open-source-responsive-tester-with-sync-scroll-no-telemetry.jsonld"}}