在 Mac 上安装并通过端口调用 Chrome DevTools MCP Server（谷歌官方 MCP 服务器）
核心是：以调试模式启动 Chrome → 安装/启动 MCP Server → 通过 HTTP 端口调用。
一、环境准备
•macOS（Intel / Apple Silicon 通用）•Google Chrome 稳定版（已安装在 /Applications）•Node.js ≥ v20（LTS 版，推荐 v22）
# 检查 Nodenode -v# 没有则用 Homebrew 安装brew install node
二、步骤1：以远程调试模式启动 Chrome
必须先让 Chrome 暴露 9222 调试端口，MCP 才能连接。
方式A：终端命令（一次性）
# 关闭所有 Chrome 窗口后执行/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome \\ –remote-debugging-port=9222 \\ –user-data-dir=/tmp/chrome-mcp-profile \\ –no-first-run \\ –disable-features=OptimizationHints
•新窗口标题会显示：“远程调试已启用”•验证：浏览器打开 http://127.0.0.1:9222/json，返回 JSON 列表即成功。
方式B：创建快捷方式（永久）
用 Automator 做一个“Chrome Debug”应用（以后双击即用）：
1.打开 Automator → 新建「应用程序」2.搜索：运行 Shell 脚本3.粘贴：
/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome \\ –remote-debugging-port=9222 \\ –user-data-dir="$HOME/ChromeDebugProfile" &
4.⌘+S 保存到「应用程序」，命名：Chrome Debug
三、步骤2：安装 & 启动 Chrome DevTools MCP Server
官方包：chrome-devtools-mcp
方式1：Homebrew（推荐）
# 安装brew install chrome-devtools-mcp
# 验证chrome-devtools-mcp –version# 应输出：0.8.0+
方式2：npm 全局安装
npm install -g chrome-devtools-mcp
方式3：npx 免安装（临时）
# 直接运行，无需安装npx chrome-devtools-mcp@latest
四、步骤3：启动 MCP Server（指定端口）
默认：MCP 用 STDIO 与 AI 客户端通信；要端口调用，加 –port。
# 启动 MCP Server，监听 本地 3000 端口chrome-devtools-mcp –port 3000 –chrome-url http://127.0.0.1:9222
•看到：Chrome DevTools MCP running on http://0.0.0.0:3000[1] 即成功•参数说明：
•–port 3000：MCP 服务端口（自定义）•–chrome-url http://127.0.0.1:9222：指向 Chrome 调试端口
五、步骤4：通过端口调用 MCP（HTTP API）
MCP 启动后，可用 curl / Postman / 代码 访问 http://127.0.0.1:3000。
1）健康检查
curl http://127.0.0.1:3000/health# 返回：{"status":"ok","chromeConnected":true}
2）获取 Chrome 标签页
curl -X POST http://127.0.0.1:3000/mcp \\ -H "Content-Type: application/json" \\ -d '{ "method": "chrome.listTabs", "params": {} }'
3）新建标签页
curl -X POST http://127.0.0.1:3000/mcp \\ -H "Content-Type: application/json" \\ -d '{ "method": "chrome.newTab", "params": {"url":"https://www.baidu.com"} }'
4）执行 JavaScript（页面内）
curl -X POST http://127.0.0.1:3000/mcp \\ -H "Content-Type: application/json" \\ -d '{ "method": "chrome.evaluate", "params": { "tabId": "当前标签页ID", "expression": "document.title" } }'
六、常见问题
1.端口被占用
# 杀占用 3000/9222 的进程lsof -i :3000 | kill -9 $(awk '{print $2}')
2.MCP 连不上 Chrome
•确认 Chrome 是 –remote-debugging-port=9222 启动•关闭 Chrome 所有窗口，重新执行启动命令
3.权限问题（macOS）
•系统设置 → 隐私与安全性 → 自动化 → 允许终端/客户端控制 Chrome
七、客户端配置（以 Claude / Cursor 为例）
在客户端配置文件（如 ~/.claude.json）加入：
{ "mcpServers": { "chrome-devtools": { "url": "http://127.0.0.1:3000" } }}
重启客户端即可用自然语言控制浏览器。
八、后台运行（可选）
# 后台启动，日志输出到 mcp.lognohup chrome-devtools-mcp –port 3000 –chrome-url http://127.0.0.1:9222 > mcp.log 2>&1 &
# 查看日志tail -f mcp.log
References
[1]: http://0.0.0.0:3000
