Chrome Devtools Quickstart

Chrome DevTools MCP快速入门

让AI代理直接访问您网站的功能——无需截图，无需DOM抓取，只需结构化的工具调用。

为什么这很重要

代币减少高达89% 与基于屏幕截图的工作流相比。

运作原理

flowchart LR
    A[AI Client] --> B[Chrome DevTools MCP]
    B -->|CDP| C[Your Website]
    C -->|mcp-b/global| D[navigator.modelContext]

    B -.->|list_webmcp_tools| E[Discovers tools]
    B -.->|call_webmcp_tool| F[Executes tools]

1. 您的网站加载 @mcp-b/global 这增加了 navigator.modelContext
2. 您使用以下方式注册工具 navigator.modelContext.registerTool()
3. Chrome开发工具MCP 连接到Chrome并公开 list_webmcp_tools + call_webmcp_tool
4. AI代理发现并调用您的工具

______________________________________________________________________

快速入门（3个步骤）

1.克隆并运行

git clone https://github.com/WebMCP-org/chrome-devtools-quickstart.git
cd chrome-devtools-quickstart
npm install && npm run dev

2.将MCP服务器添加到您的AI客户端

克劳德代码：

claude mcp add chrome-devtools npx @mcp-b/chrome-devtools-mcp@latest

可选： 添加 WebMCP文档服务器 所以你的AI知道如何构建工具：

claude mcp add --transport http webmcp-docs https://docs.mcp-b.ai/mcp

Cursor, Claude Desktop, Windsurf, Other Clients

光标 -添加到 .cursor/mcp.json:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["@mcp-b/chrome-devtools-mcp@latest"]
    },
    "webmcp-docs": {
      "url": "https://docs.mcp-b.ai/mcp"
    }
  }
}

克劳德桌面 -编辑 ~/Library/Application Support/Claude/claude_desktop_config.json （macOS）：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["@mcp-b/chrome-devtools-mcp@latest"]
    },
    "webmcp-docs": {
      "url": "https://docs.mcp-b.ai/mcp"
    }
  }
}

帆板运动 -添加到 mcp_config.json:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["@mcp-b/chrome-devtools-mcp@latest"]
    },
    "webmcp-docs": {
      "command": "npx",
      "args": ["mcp-remote", "https://docs.mcp-b.ai/mcp"]
    }
  }
}

3.测试它

问你的AI：

“导航到http://localhost:5173，列出可用的WebMCP工具，并将计数器设置为42“

AI将导航到您的页面，发现工具并执行它们：

______________________________________________________________________

背景

Chrome开发工具MCP 是一个MCP服务器，它为AI代理提供了完整的浏览器自动化功能——导航、点击、打字、截图、控制台访问、网络检查和性能分析。

WebMCP 更进一步：您的网站将JavaScript函数作为AI可以直接调用的结构化工具公开，而不是AI解析屏幕截图或抓取DOM。结果是更快、更便宜、更可靠的代理交互。

\[！注意\] 什么是WebMCP？\ \ WebMCP将您网站的JavaScript函数转化为AI可调用的工具。注册一次函数，任何兼容MCP的AI客户端都可以发现并调用它——使用类型安全的参数和结构化的响应。协议正在进行中 通过W3C Web机器学习社区小组进行标准化.

\[！注意\] 现场试用： 探索 操场 查看WebMCP的运行情况。 问题？联系方式： MiguelsPizza

______________________________________________________________________

示例工具

本快速入门包括3个示例工具 counter.js:

注册工具

import '@mcp-b/global';  // Must be first!

navigator.modelContext.registerTool({
  name: "get_counter",
  description: "Returns the current counter value",
  inputSchema: { type: "object", properties: {} },
  async execute() {
    return {
      content: [{ type: "text", text: `Counter is ${counter}` }]
    };
  }
});

带参数的工具

navigator.modelContext.registerTool({
  name: "set_counter",
  description: "Sets the counter to the desired value",
  inputSchema: {
    type: "object",
    properties: {
      newCounterValue: {
        type: "number",
        description: "The number to set the counter to"
      }
    },
    required: ["newCounterValue"]
  },
  async execute(args) {
    setCounter(args.newCounterValue);
    return {
      content: [{ type: "text", text: `Counter is now ${args.newCounterValue}` }]
    };
  }
});

要在您自己的项目中使用：

npm install @mcp-b/global

然后在注册工具之前导入它。

______________________________________________________________________

AI开发循环

真正的力量：AI编写代码、热重新加载、在浏览器中测试和迭代——所有这些都不需要离开你的编辑器。

flowchart TD
    A[AI writes tool] --> B[Vite hot-reloads]
    B --> C[AI navigates to page]
    C --> D[AI tests tool]
    D --> E{Works?}
    E -->|No| A
    E -->|Yes| F[Done!]

试试看：

“创建一个名为'toggle_theme'的WebMCP工具，在亮模式和暗模式之间切换。将其添加到counter.js中，然后进行测试。”

______________________________________________________________________

可用工具

Chrome DevTools MCP提供了6个类别的26个浏览器自动化工具：

______________________________________________________________________

调用WebMCP工具的其他方法

Chrome DevTools MCP并不是调用WebMCP工具的唯一方法：

______________________________________________________________________

代币使用基准

Claude API结构化工具调用与基于屏幕热处理的自动化的实际测量结果：

简单任务：将计数器设置为42

复杂任务：创建日历事件（多步骤）

为什么WebMCP更高效

• 截图很贵：每张图像在1512×982视口处花费约2000个代币（计算公式为 width × height / 750)
• 工具响应紧凑：JSON响应通常使用20-100个令牌
• 无需验证截图：工具响应直接确认成功
• 简单任务受益最大：直接工具访问消除了视觉解析开销

自己运行基准

# Add your API key to .env
echo "ANTHROPIC_API_KEY=your-key" > .env

# Install dependencies
npm install

# Run simple benchmark (counter app - starts dev server automatically)
npm run benchmark:simple:direct

# Run complex benchmark (calendar app - uses live deployment)
npm run benchmark:complex:direct

______________________________________________________________________

故障排除

______________________________________________________________________

资源

______________________________________________________________________

学分

来源：

______________________________________________________________________

许可证

麻省理工学院