智能体使用 Chrome DevTools MCP 调试浏览器

一、前置条件

在开始之前，请确保：

Chrome 版本 ≥ 146（在地址栏输入 chrome://version 查看）
使用的是桌面版 Chrome（Windows/Mac/Linux）
拥有管理员权限（部分系统可能需要）

如何更新 Chrome：

点击右上角菜单（三个点）
选择「帮助」→「关于 Google Chrome」
浏览器会自动检查并下载更新
重启 Chrome 完成更新

官方文档：https://developer.chrome.com/blog/chrome-devtools-mcp-debug-your-browser-session?hl=zh-cn

二、开启远程调试（图形界面方式）

步骤 1：访问远程调试页面

在 Chrome 地址栏输入以下地址并按回车：

复制代码

chrome://inspect/#remote-debugging

你会看到如下界面：

步骤 2：开启远程调试开关

在页面右侧找到核心开关：

☑️ Allow remote debugging for this browser instance

允许此浏览器实例进行远程调试

勾选该开关。

此时会弹出安全提示：

复制代码

开启此选项后，外部应用将有权请求该浏览器的完全控制权，包括：
- 读取保存的数据、Cookie、网站数据
- 导航到任何 URL
- 执行 JavaScript 代码

点击「确认」或「允许」。

三、安装 chrome-devtools-mcp 服务

1、基于qodercli，执行如下命令

复制代码

qodercli mcp add chrome-devtools-mcp "npx chrome-devtools-mcp@latest --autoConnect --no-usage-statistics --no-performance-crux" --scope user

运行 qodercli 进入，输入 /mcp 查看安装是否成功

2、基于qoder

右上角头像，Qoder设置

MCP服务，添加

打开mcp.json , 添加 chrome-devtools-mcp 服务，保存等待加载

复制代码

{
  "mcpServers": {
    "chrome-devtools-mcp":{
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--no-usage-statistics",
        "--no-performance-crux"
      ]
    }
  }
}

--no-usage-statistics 和 --no-performance-crux 表示不上传使用数据到google服务器

绿色链接则为加载成功

四、使用 chrome-devtools-mcp

1、要求大模型使用 chrome-devtools 工具链接浏览器，进行调试

配合安装 qoder-skill 使用

https://code.alibaba-inc.com/content_audit/qoder-workflow

2、浏览器允许

3、提示受控，连接成功

4、能够实现截图、查看控制台输出、网络面板，辅助调试，只需要提示需求，让浏览器自己输出日志、自己调试