chrome-tools-mcp指定浏览器调试

kvenLin
116 阅读2分钟

chrome-tools-mcp指定浏览器调试

mcp使用时遇到的问题

直接使用mcp的默认配置会导致每次打开的都是一个无状态的chrome浏览器, 这样会导致很多调试很不方便, 需要重复登录等操作.

所以需要将mcp指定到我们正常使用的chrome来进行开发调试.

配置mcp

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

在原有mcp配置的基础上使用 --browser-url 来指定打开的浏览器.

macOS下配置浏览器

chrome启动指定调试端口

如果只指定端口的方式启动chrome会出现报错:

使用命令直接代开chrome进行调试提示必须设置user-data的目录, Chrome出于安全考虑，要求启用远程调试时必须使用非默认的用户数据目录

所以需要手动复制原有的chrome目录然后再指定目录打开.

cp -R ~/Library/Application\ Support/Google/Chrome/ /tmp/chrome-remote-profile

然后启动命令:

open -na "Google Chrome" --args \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-remote-profile

这时候打开的chrome就是带有用户数据环境的chrome了.

设置快捷命令

为了快捷打开还可以在自己的shell环境设置快捷命令来打开chrome.

vim ~/.zshrc

最下方添加一行配置, 然后保存退出 wq

alias chrome-remote='open -na "Google Chrome" --args --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-remote-profile'

windows下配置浏览器

同步用户数据

找到用户的chrome数据文件夹, 默认数据是在账号的 AppData\Local\Google\Chrome\User Data路径下

# ${user} 为你当前的登录账号
C:\Users\${user}\AppData\Local\Google\Chrome\User Data

将整个user data复制一份数据到其他自定义的路径

修改chrome快捷启动命令

右键chrome点击属性-快捷方式, 配置桌面图标快捷启动的命令

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="D:\software\chrome-data\User Data"

检查是否配置成功

使用快捷命令或双击快捷启动, 然后访问 http://localhost:9222/json/version 检查是否能正常访问到数据

返回如图所示的数据结构就表示配置正常了.

测试mcp是否正常使用

随便找一个支持mcp的工具就行, 配置mcp配置后, AI正常调用即可

avatar
文章
阅读
粉丝