[FEATURE] Embedded browser debugging in VS Code (Simple Browser / webview integration)

Preflight Checklist

• [x] I have searched existing requests and this feature hasn't been requested yet
• [x] This is a single feature request (not multiple features)

Problem Statement

Currently, to use Claude Code's browser automation capabilities, users must:

1. Install the "Claude in Chrome" extension
2. 2. Have Chrome running as a separate window
3. 3. Switch between VS Code and Chrome constantly

This breaks the "everything in one place" developer experience that VS Code provides. When building web applications, developers want to:

• Write code in VS Code
• - Preview the result in VS Code (using Simple Browser or Live Preview)
• - - Debug issues without leaving VS Code

The current workflow requires constant context-switching between VS Code (for coding) and Chrome (for browser automation), which is inefficient and disruptive.

Proposed Solution

Integrate Claude Code's browser debugging tools with VS Code's built-in Simple Browser or a dedicated webview:

1. New MCP server for VS Code webview: Expose the same tools available in Claude in Chrome (read_page, find, computer, javascript_tool, read_console_messages, read_network_requests, etc.) but targeting VS Code's embedded browser.
2. Seamless workflow:
3. - Developer runs npm run dev in terminal
4. - Opens http://localhost:3000 in VS Code's Simple Browser
5. - Claude Code (in terminal) can now read DOM, click elements, take screenshots, read console errors - all without leaving VS Code
6. Implementation options:
7. - Option A: Extend Simple Browser with MCP capabilities via a VS Code extension
8. - Option B: Create a dedicated "Claude Browser" panel in VS Code with full debugging access
9. - Option C: Use Chrome DevTools Protocol over a headless/embedded Chromium instance

This would make Claude Code a true "full-stack" development assistant where you can build, preview, and debug all in one place.

Alternative Solutions

| Alternative | Why Not Ideal |
|-------------|---------------|
| Use Chrome in Chrome extension | Requires external window, constant alt-tabbing between VS Code and Chrome |
| Headless Chrome | No visual feedback, harder to debug UI issues |
| Just use terminal without browser | Can't see the UI, miss visual bugs and layout issues |
| Run Chrome minimized | Still requires the external process, and you lose visual feedback |

Currently I work around this by having Chrome open on a second monitor, but not everyone has that luxury and it still breaks the "single workspace" flow.

Priority

High - Significant impact on productivity

Feature Category

MCP server integration

Use Case Example

1. I'm building a React app and running npm run dev in VS Code's terminal
2. 2. I open http://localhost:3000 in VS Code's Simple Browser panel (side by side with my code)
3. 3. I notice the login button isn't working
4. 4. I ask Claude Code: "The login button isn't responding to clicks, can you debug it?"
5. 5. Claude reads the DOM from the embedded browser, checks the console for errors, finds a typo in the onClick handler
6. 6. Claude fixes the code, I see the result immediately in the same VS Code window
7. 7. No alt-tabbing to Chrome, no context switching - everything happens in one place

This would save significant time when doing frontend development, especially for rapid iteration cycles.

Additional Context

Technical notes:

• VS Code already has Simple Browser built-in (Ctrl+Shift+P -> "Simple Browser: Show")
• - The Chrome DevTools Protocol could potentially work with an embedded Chromium/Electron webview
• - - The existing Claude in Chrome MCP tools could be adapted for this use case

Related:

• VS Code Live Preview extension shows this is technically possible
• - Cursor IDE has similar embedded browser capabilities

---
Submitted by Saimon Ventura (Toby)