Fork of Google’s official Chrome DevTools MCP that adds WebMCP integration for calling tools registered on webpages.
Key features
- 28 browser automation tools - navigation, input, screenshots, performance, debugging (from upstream)
- WebMCP integration - call tools registered via @mcp-b/global (added in this fork)
- AI-driven development - build and test WebMCP tools in a tight feedback loop
- Works with all MCP clients - Claude Code, Cursor, VS Code, Gemini CLI, Windsurf
Prerequisite: Website polyfill
For list_webmcp_tools and call_webmcp_tool to work, your website must have the @mcp-b/global polyfill installed:
<script src="https://unpkg.com/@mcp-b/global@latest/dist/index.iife.js"></script>
npm install @mcp-b/global
Without the polyfill, list_webmcp_tools returns an empty list. The polyfill adds navigator.modelContext which the DevTools MCP server queries.
AI-driven development workflow
The build-test loop lets AI agents write, deploy, discover, test, and iterate on WebMCP tools in real-time:
Example workflow:
- Ask AI: “Create a WebMCP tool called search_products”
- AI writes tool using registerTool()
- Dev server hot-reloads
- AI navigates to
http://localhost:3000, discovers and tests the tool
- AI iterates until it works
This is TDD for AI - agents build and verify their own tools in real-time.
Installation
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "@mcp-b/chrome-devtools-mcp@latest"]
}
}
}
claude mcp add chrome-devtools npx @mcp-b/chrome-devtools-mcp@latest
code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["-y","@mcp-b/chrome-devtools-mcp@latest"]}'
gemini mcp add chrome-devtools npx @mcp-b/chrome-devtools-mcp@latest
WebMCP
Input
Navigation
Debugging
Performance
| Tool | Description |
|---|
list_webmcp_tools | Discover tools registered on the current page |
call_webmcp_tool | Call a website’s MCP tool |
click, drag, fill, fill_form, handle_dialog, hover, press_key, upload_file
navigate_page, new_page, close_page, list_pages, select_page, wait_for
take_screenshot, take_snapshot, evaluate_script, list_console_messages, get_console_message
performance_start_trace, performance_stop_trace, performance_analyze_insight, list_network_requests, get_network_request
Built-in prompts
| Prompt | Use case |
|---|
webmcp-dev-workflow | Guide through building WebMCP tools |
test-webmcp-tool | Test tools with edge cases |
debug-webmcp | Diagnose connection issues |
Configuration
| Option | Description |
|---|
--browserUrl | Connect to running Chrome (e.g., http://127.0.0.1:9222) |
--headless | Run without UI |
--isolated | Use temporary profile, cleaned up on close |
--channel | Chrome channel: stable, canary, beta, dev |
npx @mcp-b/chrome-devtools-mcp@latest --help for all options.
Troubleshooting
| Issue | Solution |
|---|
| WebMCP not detected | Page needs @mcp-b/global loaded |
| Tool call fails | Check input matches schema via list_webmcp_tools |
| Browser won’t start | Disable client sandboxing or use --browserUrl |
This server exposes browser content to MCP clients. Avoid sensitive data.
