AI导哈

浏览器自动化工具

Chrome DevTools MCP 是一种浏览器自动化工具，允许AI代理直接访问网站功能，无需截图或DOM抓取，通过结构化工具调用实现高效交互。

  • by WebMCP-org
  • JavaScript
  • 本地部署
  • 41 星标
  • 更新于
在 GitHub 查看 WebMCP-org/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:

工具 说明
get_page_title 退货 document.title
get_counter 返回当前计数器值
set_counter 将计数器设置为指定值

注册工具

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个浏览器自动化工具：

类别 工具
导航 navigate_page, go_back, go_forward, refresh
交互 click, fill, hover, press_key, drag
检查 take_screenshot, take_snapshot, evaluate_script
标签页 list_pages, select_page, new_page, close_page
WebMCP list_webmcp_tools, call_webmcp_tool

调用WebMCP工具的其他方法

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

选项 功能 链接
MCP-B扩展 将所有打开的选项卡中的工具聚合到单个MCP服务器中——将Claude Desktop或Cursor连接到多个站点的工具 Chrome网络商店
嵌入式代理 在您的网站上添加一个AI聊天小部件，可以直接调用您的WebMCP工具 文档

代币使用基准

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

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

方法 总代币 截图 成本
基于截图 3801 2 0.015美元
WebMCP工具 433 0 $0.003
减少 89% - 83%

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

方法 总令牌 截图 WebMCP调用 成本
基于截图 11390 4 0 0.048美元
WebMCP工具 2,583 0 6 $0.012
减少 77% - - 76%

为什么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

故障排除

问题 解决方案
navigator.modelContext is undefined 进口 @mcp-b/global 在注册工具之前
未找到工具 等待页面完全加载，检查浏览器控制台
无法连接到Chrome 确保Chrome正在运行，检查防火墙设置

资源

资源 描述
WebMCP文档 完整的文档和指南
Chrome开发工具MCP 浏览器自动化包文档
@mcp-b/全球 用于注册工具的核心库
MCP-B扩展 用于多标签工具访问的Chrome扩展程序
例子 React、Angular、Rails、Phoenix LiveView、Vanilla JS
现场演示 无需安装任何东西即可尝试WebMCP
Discord 的中文翻译是“不和谐”或“纷争”。 社区支持和讨论
GitHub 源代码和问题

学分

建于 @mcp-b/chrome开发工具mcp，谷歌的一个分支 chrome开发工具mcp 它增加了WebMCP工具的发现和执行。

来源： WebMCP org/npm包

许可证

麻省理工学院

相关 MCP