Skip to main content
Fork of Google’s official Chrome DevTools MCP that adds WebMCP integration for calling tools registered on webpages.

NPM Package

@mcp-b/chrome-devtools-mcp

Upstream Repository

Original by Google Chrome team

​
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>
Or via NPM: 
npm install @mcp-b/global

import '@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:
  1. Ask AI: “Create a WebMCP tool called search_products”
  2. AI writes tool using registerTool()
  3. Dev server hot-reloads
  4. AI navigates to http://localhost:3000, discovers and tests the tool
  5. 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
Test: Ask your AI to “Check the performance of https://developers.chrome.com”

​
Tools

ToolDescription
list_webmcp_toolsDiscover tools registered on the current page
call_webmcp_toolCall a website’s MCP tool

​
Built-in prompts

PromptUse case
webmcp-dev-workflowGuide through building WebMCP tools
test-webmcp-toolTest tools with edge cases
debug-webmcpDiagnose connection issues

​
Configuration

OptionDescription
--browserUrlConnect to running Chrome (e.g., http://127.0.0.1:9222)
--headlessRun without UI
--isolatedUse temporary profile, cleaned up on close
--channelChrome channel: stable, canary, beta, dev
Run npx @mcp-b/chrome-devtools-mcp@latest --help for all options.

​
Troubleshooting

IssueSolution
WebMCP not detectedPage needs @mcp-b/global loaded
Tool call failsCheck input matches schema via list_webmcp_tools
Browser won’t startDisable client sandboxing or use --browserUrl
This server exposes browser content to MCP clients. Avoid sensitive data.

@mcp-b/global

Register tools on your website

Tool Registration

How to write WebMCP tools

Chrome DevTools MCP (Upstream)

Original project by Google Chrome team

Quick Start Guide

Step-by-step setup guide