Browser DevTools

Turn VS Code into a self-contained browser workbench. A zero-dependency live server serves your folder; the full Chrome-"Inspect" surface — Elements, Styles, Console, Network, Performance, Memory, Storage, Accessibility, Responsive — lives as tabs in a panel-area view, docked where the integrated terminal sits, in VS Code's own design language. JavaScript debugging is VS Code's own debugger. No browser extension, no npm runtime dependencies.

Two interchangeable backends feed the same panels:

• agent (default) — a vanilla script the server injects into the page. No browser process; the preview is a VS Code webview iframe.
• cdp — a headless Chromium driven over the Chrome DevTools Protocol (hand-rolled client, still zero dependencies). Protocol-accurate CSS, real metrics, event listeners, network bodies; the preview is an interactive screencast.

What it does

No webview text is smaller than the editor's own font size.

Architecture

                        ┌───────────────────────────────┐
   agent backend        │            extension host      │
 ┌─────────────┐  WS     │  ┌────────────┐  ┌──────────┐  │
 │  media/     │◀───────▶│  │ LiveServer │  │ DevTools │  │
 │  agent.js   │ /__bd_ws│  │  (http +   │  │ webview  │  │
 │  (injected) │         │  │  RFC6455)  │  │ (8 tabs) │  │
 └─────────────┘         │  └────────────┘  └──────────┘  │
                         │  ┌────────────┐  ┌──────────┐  │
   cdp backend           │  │ CdpBackend │  │ Preview  │  │
 ┌─────────────┐  CDP/WS │  │  drives ───┼──│ iframe / │  │
 │  headless   │◀───────▶│  │  chromium  │  │ screencast│ │
 │  chromium   │         │  └────────────┘  └──────────┘  │
 └─────────────┘         └───────────────────────────────┘

Both backends emit the same message stream to the DevTools webview, so every panel works either way.

• media/agent.js — vanilla injected script: DOM serialization, console / fetch / XHR hooks, computed styles + matched rules, highlight overlay, element picker, storage, PerformanceObserver, performance.memory, accessibility, live reload. Talks over a WebSocket at /__bd_ws.
• src/webSocketServer.ts — minimal RFC 6455 server (handshake, framing, masking, ping/pong, 16/64-bit lengths). No ws dependency.
• src/liveServer.ts — static file server + agent injection + WS relay.
• src/cdp/cdpClient.ts — browser discovery + launch + a hand-rolled CDP connection over Node's global WebSocket.
• src/cdp/cdpBackend.ts — maps CDP domains (DOM, CSS, Runtime, Debugger, Log, Network, Performance, Profiler, HeapProfiler, Accessibility, DOMDebugger, DOMStorage, Overlay, Input, Emulation, Page screencast) onto the DevTools message contract.
• src/cdp/sourceMap.ts — a compact base64-VLQ source-map consumer for Console stack frames.
• src/inspectorView.ts + media/inspector.{js,css} — the panel-area DevTools webview (nine tabs).
• src/previewPanel.ts — the preview webview (iframe / screencast modes).
• src/extension.ts — wiring, commands, file watcher, status bar.

Debugging = VS Code's debugger, attached to the preview

Browser DevTools: Debug Page JavaScript (or Start & Debug) attaches vscode.debug.startDebugging (chrome / request: attach) to the CDP backend's Chromium on browserDevtools.remoteDebuggingPort (9222) — the very page shown in the screencast preview. Breakpoints in your served .js files, the Variables / Watch / Call Stack views, and stepping all work against that page. Debugging requires the cdp backend; the command offers to switch if you're on agent (a webview iframe can't be attached to).

Add Debug Configuration to launch.json writes both an Attach to Preview entry (port 9222) and a standalone Launch Chrome fallback.

Usage

1. npm install
2. Press F5 to launch an Extension Development Host.
3. Open a folder. Run Browser DevTools: Start Live Server & Inspector (or click the status-bar item, or the ▶ in the DevTools view title). If the served folder is missing you're offered a starter page.
4. The preview opens; the Browser DevTools view appears in the bottom panel next to the terminal.
5. Edit files — the page reloads automatically.

See example/ for a ready-to-run demo (code example/, then start).

Commands

Settings

Free tier & Pro

A 1-hour Pro trial unlocks everything and starts on first activation — no key, no sign-up. After it ends the extension keeps working on the Free tier; Pro features prompt to upgrade. Manage everything from the $(rocket) status-bar item or Browser DevTools: Manage Subscription.

Pro is a plan on the licensing platform. Sign in (from the gate, the status-bar menu or Browser DevTools: Sign In): your browser opens the platform's page, you allow this computer (choosing a plan first if you have none) and Pro turns on. No key to copy; renewals arrive by themselves, and the extension keeps working offline for the plan's session days. A BDT.… license key from the client portal still works pasted, for machines that can't sign in. How it works and how the owner connects it: LICENSING.md.

Development

npm run watch      # incremental compile
npm run lint
npm test           # downloads a throwaway VS Code, runs the suite
                   # (the CDP test self-skips when no browser is installed)
e2e/platform/run.sh  # against a real licensing platform on this machine
npm run package    # produce a .vsix

Full requirements specification

See SPECIFICATION.md.

TODO: Add Controls to the Preview Page

Add specifications for, in the preview window, add navigation controls like back to the previous page and other. Currently, when I follow a link in the page and it goes to a path like /api/index.html. It loses the connection and can't come back to the page being debugged.