Claude + Chrome DevTools + MCP 完整指南：让 AI 直接“操作浏览器”

1. 为什么我要让 Claude 直接操作浏览器如果你已经用 Claude 写代码、读日志、改配置很快会遇到一个瓶颈它看不到你浏览器里真实发生了什么。页面白屏、接口 404、某个按钮点了没反应你只能手动复制 DOM、截图、贴控制台报错再回来问它。来回几次上下文就断了。MCPModel Context Protocol解决的就是这件事。它由 Anthropic 提出本质是给 AI 装一个“通用工具接口”让 Claude 能安全地调用外部能力——文件系统、数据库、Git当然也包括浏览器。而 chrome-devtools-mcp 是 Chrome 官方团队基于 MCP 做的浏览器控制插件它通过 Chrome DevTools 协议CDP把浏览器暴露给 Claude。配好之后你可以直接对 Claude 说“打开 example.com 并告诉我页面标题”它会真的去开页面、读 DOM、执行 JS再把结果返回给你。这篇指南面向需要让 AI 直接操作浏览器的开发者交付可复制的 MCP 配置骨架和逐步验证动作帮你在本地跑通 Claude 与 Chrome DevTools 的连通性测试。整个过程不需要你懂 CDP 底层协议跟着做就行。2. 前置准备TaoToken 与运行环境在动手配 MCP 之前先把“Claude 从哪来”这件事定下来。如果你用的是 Claude Desktop 官方客户端登录后即可使用如果你在 CLI 或自建工具链里调 Claude就需要一个稳定的 API 入口。我这边习惯用 TaoToken 做统一接入它的 API 地址是 https://taotoken.net/api兼容 Anthropic 的调用格式省去自己维护多套 Key 的麻烦。具体来说你需要先拿到一个可用的 API Key。打开 https://taotoken.net/api-keys 创建一个 Key 并保存好。这个 Key 后面会用在环境变量里供 Claude CLI 或你的脚本调用。如果你更想先在网页里验证模型对话是否正常可以直接用 https://taotoken.net/models 试几句确认账号和额度没问题。环境侧需要满足几个硬条件。第一Node.js 和 npm 必须装好chrome-devtools-mcp 是通过 npm 分发的。第二本地要有 Chrome 或 Chromium并且能用调试端口启动。第三如果你走 CLI 路线需要 Claude Code 或兼容的 CLI 工具如果走桌面端需要 Claude Desktop。第四9222 和 8080 这两个端口别被占用后面会用到。注意MCP Server 是本地进程它只监听你本机的调试端口不会把浏览器暴露到公网。但调试端口本身权限很高别在多人共用的机器上长期开着。3. 可复制的 MCP 配置骨架这一节是核心我把安装、启动、注册三步拆开每步都给完整命令。3.1 安装 chrome-devtools-mcp全局安装最省事版本用 latest 保证拿到最新协议支持npm install -g chrome-devtools-mcp装完可以用chrome-devtools-mcp --help确认命令存在。如果提示权限错误macOS/Linux 前面加sudoWindows 用管理员终端。3.2 用调试模式启动 Chrome关键点是--remote-debugging-port和独立的--user-data-dir。后者是为了避免和你日常用的 Chrome 抢用户数据导致启动失败或配置冲突。macOS 下这样启动/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \ --remote-debugging-port9222 \ --user-data-dir/tmp/chrome-mcpWindows 下换成C:\Program Files\Google\Chrome\Application\chrome.exe ^ --remote-debugging-port9222 ^ --user-data-dirC:\temp\chrome-mcp启动后访问http://127.0.0.1:9222/json/version能看到返回的 Browser 和 webSocketDebuggerUrl 字段就说明调试端口通了。3.3 启动 MCP Server另开一个终端运行chrome-devtools-mcp --port 8080这个 8080 是 MCP Server 自己的监听端口和 Chrome 的 9222 是两回事。看到它打印 listening 之类的日志就说明起来了。3.4 注册到 Claude Desktop配置文件路径因系统而异系统配置路径macOS~/Library/Application Support/Claude/claude_desktop_config.jsonWindows%APPDATA%\Claude\claude_desktop_config.jsonLinux~/.config/Claude/claude_desktop_config.json在文件里加入 mcpServers 段骨架如下{ mcpServers: { chrome-devtools: { command: chrome-devtools-mcp, args: [--port, 8080] } } }保存后完全退出 Claude Desktop 再重开让它重新读取配置。如果你用的是 Claude CLI可以用一条命令替代手改文件claude mcp add chrome-devtools npx chrome-devtools-mcplatest --scope user--scope user表示全局生效不加则只对当前项目生效写入 .claude/config.json。团队协作时建议用项目级个人机器用 user 级更省心。4. 验证请求确认 AI 真的能操作浏览器配置写完不代表通了必须做连通性验证。打开 Claude先输入斜杠命令/mcp如果返回列表里出现chrome-devtools loaded说明 MCP Server 已被 Claude 识别。这一步失败的话后面所有操作都不会生效先回去检查配置路径和进程是否在跑。接着做真实操作测试。对 Claude 说打开 https://example.com 并返回页面标题正常的话Claude 会调用 MCP 工具去导航页面然后返回类似 “Example Domain” 的结果。再试一个执行 JS 的帮我执行 document.title 并返回结果如果它能返回当前页面的标题字符串说明 DOM 读取和 JS 执行链路都通了。你还可以让它“列出页面所有 h1 标签内容”验证 DOM 查询能力。实测下来最容易出问题的是 Chrome 没带调试端口启动或者 MCP Server 端口和配置里的不一致。验证时如果 Claude 说找不到工具先确认/mcp列表里有没有 chrome-devtools再看 Chrome 的 9222 是否可访问。5. 本篇常见错误排查把踩过的坑集中列一下方便你对照。输入 /mcp 没反应。大概率你用的是 Claude 网页版网页版不支持本地 MCP。换成 Claude Desktop 或 Claude CLI。浏览器连接失败。Chrome 启动时漏了--remote-debugging-port9222或者端口被别的进程占了。用lsof -i :9222查一下换个端口比如 9223同时改 MCP 启动参数和配置。MCP 显示未加载。JSON 配置格式错误最常见比如多了逗号、少了引号。用 JSON 校验工具过一遍。改完必须完全重启 Claude不是关窗口是退出进程。端口冲突。9222 或 8080 被占用时MCP Server 起不来。改成 9223 和 8081三处保持一致Chrome 启动参数、MCP 启动参数、Claude 配置里的 args。执行 JS 返回空。页面可能还没加载完或者你操作的是 about:blank。先导航到目标页等加载完成再执行。提示排查顺序永远是“Chrome 调试端口 → MCP Server 进程 → Claude 配置 → /mcp 列表”从下往上查别一上来就改配置。6. 接下来怎么用从验证到长期编码连通性跑通后你可以把浏览器操作嵌进日常开发流。比如让 Claude 打开本地 dev server 页面检查控制台有没有报错或者导航到某个接口地址读取返回的 JSON 结构再帮你写对应的 TypeScript 类型。这些动作以前要手动复制粘贴现在一句话就能完成。如果你打算把这种能力长期用在编码和 Agent 工作流里建议走 Coding Plan把模型调用和工具链统一管理地址是 https://taotoken.net/coding-plan 。接入细节和参数说明可以查文档 https://taotoken.net/doc 里面覆盖了 MCP 相关的配置项。需要管理多个 Key 或查看调用量时控制台在 https://taotoken.net/console 。最后提醒一句MCP 给的是“操作能力”不是“判断能力”。让 Claude 操作浏览器时涉及删除、提交、支付这类不可逆动作务必自己确认一遍再放行。工具越强边界越要自己划清楚。