在 Mac 上安装并通过端口调用 Chrome DevTools MCP Server（谷歌官方 MCP 服务器）

在 Mac 上安装并通过端口调用 Chrome DevTools MCP Server（谷歌官方 MCP 服务器）

核心是：以调试模式启动 Chrome → 安装/启动 MCP Server → 通过 HTTP 端口调用。

一、环境准备

•macOS （Intel / Apple Silicon 通用）•Google Chrome 稳定版 （已安装在 /Applications）•Node.js ≥ v20（LTS 版，推荐 v22）

bash 复制代码

# 检查 Nodenode -v# 没有则用 Homebrew 安装brew install node

二、步骤1：以远程调试模式启动 Chrome

必须先让 Chrome 暴露 9222 调试端口，MCP 才能连接。

方式A：终端命令（一次性）

bash 复制代码

# 关闭所有 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.粘贴：

bash 复制代码

/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（推荐）

bash 复制代码

# 安装brew install chrome-devtools-mcp
# 验证chrome-devtools-mcp --version# 应输出：0.8.0+

方式2：npm 全局安装

bash 复制代码

npm install -g chrome-devtools-mcp

方式3：npx 免安装（临时）

bash 复制代码

# 直接运行，无需安装npx chrome-devtools-mcp@latest

四、步骤3：启动 MCP Server（指定端口）

默认：MCP 用 STDIO 与 AI 客户端通信 ；要端口调用 ，加 --port。

bash 复制代码

# 启动 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）健康检查

bash 复制代码

curl http://127.0.0.1:3000/health# 返回：{"status":"ok","chromeConnected":true}

2）获取 Chrome 标签页

bash 复制代码

curl -X POST http://127.0.0.1:3000/mcp \  -H "Content-Type: application/json" \  -d '{    "method": "chrome.listTabs",    "params": {}  }'

3）新建标签页

bash 复制代码

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（页面内）

bash 复制代码

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.端口被占用

bash 复制代码

# 杀占用 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）加入：

json 复制代码

{  "mcpServers": {    "chrome-devtools": {      "url": "http://127.0.0.1:3000"    }  }}

重启客户端即可用自然语言控制浏览器。

八、后台运行（可选）

bash 复制代码

# 后台启动，日志输出到 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