How do I connect Browser Devtools MCP Vscode Extension MCP Server to Claude?

Run `claude mcp add browser-devtools-mcp-vscode-extension -- npx -y vsce package` in Claude Code, or add the same command and arguments under mcpServers in Cursor's mcp.json or Claude Desktop's claude_desktop_config.json, then restart the client. The blocks above are ready to paste.

What can Browser Devtools MCP Vscode Extension MCP Server do?

Browser Devtools MCP Vscode Extension MCP Server documents 40 tools to the agent, including a11y_take-aria-snapshot, a11y_take-ax-tree-snapshot, content_get-as-html. The descriptions above come from project documentation. A live handshake does not test individual tool behavior.

Browser Devtools MCP Vscode Extension

Unclaimed

by serkan-ozal

VSCode Extension for the Browser DevTools MCP Server which is a Playwright-based MCP server that exposes a live browser as a traceable, inspectable, debuggable and controllable execution environment for AI agents.

Set up this server

Compare servers My Stack

01 / Choose your client

02 / Before you connect

Authentication is not specified. Check the project instructions before connecting.

Install the runtime required by the project and make it available to your client.

Project instructionsEnvironment variable names (optional)

Use names from the project instructions, separated by commas. Enter names only, never secret values.

03 / Add the configuration

Source: generated from public install instructions

claude mcp add --transport stdio 'browser-devtools-mcp-vscode-extension' -- 'npx' '-y' 'vsce' 'package'

Run in your terminal after replacing any placeholders.

04 / Check it in your client

Open your client’s MCP settings and confirm the server connects and lists its tools. A copied configuration does not confirm a working connection.

Is this your MCP server?

This listing was auto-indexed from the public record. Claim it to edit the page, set compatibility and unlock growth tools. Takes under two minutes.

Claim this server

Security profile

Claimed and verified servers get a weekly static scan that shows what the code can reach: external services, environment variables, shell commands, agent configuration folders, plus any dependencies with known advisories. Claim this listing to get one. How the security profile works

40 of 40 tools

Documented tools (40)

From project documentation. A server handshake does not verify each tool’s description or behavior.

a11y_take-aria-snapshot

Get ARIA snapshot (YAML format)

a11y_take-ax-tree-snapshot

Get AX tree with visual diagnostics

content_get-as-html

Get page HTML with filtering options

content_get-as-text

Get visible text content

content_save-as-pdf

Save page as PDF

content_take-screenshot

Take a screenshot (full page or element)

debug_add-watch

Add watch expression (evaluated at every tracepoint hit)

debug_clear-probes

Clear tracepoints, logpoints, and/or watch expressions

debug_list-probes

List tracepoints, logpoints, and/or watches

debug_put-exceptionpoint

Configure exception breakpoints (none, uncaught, all)

debug_put-logpoint

Set a logpoint (evaluates expression)

debug_put-tracepoint

Set a tracepoint (captures call stack)

debug_remove-probe

Remove a tracepoint, logpoint, or watch by type and id

execute

Batch-execute multiple tool calls in one request via JavaScript; use callTool(name, input, returnOutput?) to invoke tools. On browser platform the script has page (Playwright Page) for page.evaluate(), page.locator(), etc. Reduces round-trips and token usage.

figma_compare-page-with-design

Compare page with Figma design

interaction_click

Click an element

interaction_drag

Drag and drop

interaction_fill

Fill an input field

interaction_hover

Hover over an element

interaction_press-key

Press a keyboard key

interaction_resize-viewport

Resize viewport (Playwright emulation)

interaction_resize-window

Resize browser window (OS-level)

interaction_scroll

Scroll page or element

interaction_select

Select dropdown option

navigation_go-back-or-forward

Go back or forward in history (direction: back \

navigation_go-to

Navigate to a URL

navigation_reload

Reload the page

o11y_get-console-messages

Get console logs with filtering

o11y_get-http-requests

Get network requests with filtering

o11y_get-trace-id

Get current OpenTelemetry trace ID

o11y_get-web-vitals

Get Web Vitals (LCP, INP, CLS, TTFB, FCP)

o11y_new-trace-id

Generate new trace ID

o11y_set-trace-id

Set trace ID for distributed tracing

react_get-component-for-element

Get React component for DOM element

react_get-element-for-component

Get DOM element for React component

stub_clear

Clear stubs

stub_intercept-http-request

Intercept and modify requests

stub_list

List installed stubs

stub_mock-http-response

Mock HTTP response

sync_wait-for-network-idle

Wait for network to become idle

Tool change history

Compared across complete checks of the same configuration. Tools were listed, not invoked. Input-schema changes are not measured here.

No complete tool checks yet.

FAQ

Questions about Browser Devtools MCP Vscode Extension MCP Server

How do I connect Browser Devtools MCP Vscode Extension MCP Server to Claude?: Run `claude mcp add browser-devtools-mcp-vscode-extension -- npx -y vsce package` in Claude Code, or add the same command and arguments under mcpServers in Cursor's mcp.json or Claude Desktop's claude_desktop_config.json, then restart the client. The blocks above are ready to paste.
Is Browser Devtools MCP Vscode Extension MCP Server free?: The listed licence is MIT. Check the upstream terms for permitted use and commercial requirements; a public repository does not by itself mean the software is free or open source. Connected APIs and hosted services may have separate charges.
What can Browser Devtools MCP Vscode Extension MCP Server do?: Browser Devtools MCP Vscode Extension MCP Server documents 40 tools to the agent, including a11y_take-aria-snapshot, a11y_take-ax-tree-snapshot, content_get-as-html. The descriptions above come from project documentation. A live handshake does not test individual tool behavior.