opencode使用chrome-devtools-mcp连接edge浏览器

1 好处

大模型-直接连接浏览器，抓取快照，操作dom，方便前端调试，就是太烧token；

2 安装chrome-devtools-mcp

npx -y chrome-devtools-mcp@latest

3 opencode配置

打开文件夹 C:\Users\用户.config\opencode 这两个都是opencode的配置

添加下面的配置

"mcp": {
    "chrome-devtools": {
      "type": "local",
      "command": [
        "cmd",
        "/c",
        "npx",
        "-y",
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ],
      "enabled": true,
      "timeout": 20000,
    },
  },

4 浏览器配置

edge浏览器输入

edge://inspect/#remote-debugging

勾选

桌面新建快捷方式 -- 前半部分是浏览器启动路径

"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --remote-debugging-port=9222

调试

启动上面新建的快捷方式 -- 启动时最好关闭所有浏览器进程 输入 127.0.0.1:9222/json 如果出现类似下面的大段文字证明浏览器配置没问题

如果没有出现，可以切换管理员运行快捷方式看看

接着打开opencode，输入文字让ai 帮你自动链接浏览器就行

使用 chrome-devtools MCP 连接浏览器

到这儿就大功告成