使用Chrome Devtools mcp实现自动化解决bug（禅道/在线文档等一切浏览器行为）

前端小白一枚~

176人浏览 · 2026-06-15 09:35:55

前端小白一枚~ · 2026-06-15 09:35:55 发布

Chrome DevTools MCP 自动化解决 Bug 完整教程

（禅道 / Jira / 在线文档等所有浏览器行为通用）

Chrome DevTools MCP 是目前唯一能让 AI 真正实现 "读取 bug → 分析代码 → 修改代码 → 浏览器验证"完整闭环的工具。它将 Chrome 浏览器的全部调试能力通过标准化的 MCP 协议暴露给 AI，让 AI 从" 蒙眼写代码 "变成拥有" 浏览器之眼 "和" 浏览器之手 "。

更新时间：2026 年 6 月 15 日（基于 Chrome 148 稳定版和 chrome-devtools-mcp v1.2.0）

一、核心优势与工作原理

传统 AI 编程 vs MCP 自动化编程

表格

工作环节	传统 AI 编码助手	Chrome DevTools MCP
读取 bug	需要人工复制粘贴 bug 详情	自动登录禅道 / Jira，读取完整 bug 信息和截图
分析 bug	只能基于文本描述猜测	可以亲自查看 bug 实际效果、控制台错误、网络请求
修改代码	生成代码但无法验证	生成代码后自动在浏览器中验证修复效果
验证修复	需要人工手动测试	自动按照重现步骤操作，检查渲染、接口和控制台
回归测试	无法自动进行	可以自动运行完整的用户流程测试

技术架构

plaintext

┌──────────────────┐     MCP Protocol     ┌─────────────────────┐
│  AI Coding Agent │ ◄──────────────────► │ chrome-devtools-mcp │
│ (Claude/Cursor)  │                      │    (MCP Server)     │
└──────────────────┘                      └──────────┬──────────┘
                                                     │
                                                     │ CDP
                                                     ▼
                                          ┌──────────────────┐
                                          │  Chrome Browser  │
                                          └──────────────────┘

二、环境准备

系统要求

Node.js：v20.19.0 或更新的 LTS 版本
Chrome：144.0 或更高版本（推荐 148 + 稳定版）
AI 客户端：任何支持 MCP 协议的编码助手

验证环境

bash

运行

# 检查Node.js版本
node --version

# 检查Chrome版本（在Chrome地址栏输入）
chrome://version

# 测试MCP服务器是否可用
npx chrome-devtools-mcp@latest --version

三、三种连接模式详解（2026 最新）

Chrome DevTools MCP 提供了三种连接 Chrome 的方式，适用于不同场景：

模式一：自动连接模式（强烈推荐，Chrome 146+）

这是目前最方便、最安全的方式，AI 可以直接连接到你正在使用的 Chrome 浏览器，共享所有已登录的会话。

步骤 1：启用 Chrome 远程调试

在 Chrome 地址栏输入：chrome://inspect/#remote-debugging
打开 "启用远程调试" 开关
保持这个页面打开（不需要停留在这个标签页）

步骤 2：配置 MCP 服务器 在你的 AI 客户端 MCP 配置文件中添加：

json

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

步骤 3：授权连接 当 AI 第一次尝试连接时，Chrome 会弹出一个权限对话框，点击 "允许" 即可。调试期间，浏览器顶部会持续显示黄色横幅提醒。

模式二：独立配置文件模式（最安全）

适用于处理敏感内容的场景，使用完全隔离的 Chrome 配置文件，不会影响你的日常使用。

步骤 1：创建专用 Chrome 快捷方式

Windows：桌面新建 Chrome 快捷方式，右键属性，在 "目标" 末尾添加：
plaintext
```
--remote-debugging-port=9222 --user-data-dir="%USERPROFILE%\ChromeDebugProfile"
```

macOS：在终端运行：

bash

运行

alias chrome-debug="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=$HOME/.chrome-debug-profile"

Linux：

bash

运行

alias chrome-debug="google-chrome --remote-debugging-port=9222 --user-data-dir=$HOME/.chrome-debug-profile"

步骤 2：配置 MCP 服务器

json

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

步骤 3：登录所需系统 打开这个专用 Chrome，手动登录禅道、Jira 等系统，勾选 "记住我"。

模式三：临时隔离模式（一次性使用）

适用于临时测试或不信任的场景，使用临时配置文件，关闭浏览器后所有数据自动清除。

json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--isolated",
        "--headless=new"
      ]
    }
  }
}

四、主流 AI 客户端配置

1. Cursor（推荐）

打开 Cursor
按Ctrl+Shift+P（macOS: Cmd+Shift+P）
输入MCP，选择MCP: Open Config File
将上述配置粘贴进去，保存
重启 Cursor

2. Claude Desktop

打开 Claude Desktop
点击左上角头像 → Settings → Developer → Edit Config
将上述配置粘贴进去，保存
重启 Claude Desktop

3. VS Code Copilot

打开 VS Code
安装 GitHub Copilot Chat 扩展
按Ctrl+Shift+P，输入Copilot: Open MCP Settings
添加上述配置

4. Gemini CLI

安装 Gemini CLI：npm install -g @google/gemini-cli
编辑配置文件：code ~/.gemini/settings.json
添加上述配置

五、核心工作流：自动化解决禅道 Bug

这是一个完整的、可直接复制使用的工作流，适用于任何基于浏览器的 bug 管理系统。

完整自动化指令

只需给 AI 一条指令，它就能自动完成所有步骤：

plaintext

帮我修复禅道上编号为#1234的bug。

严格按照以下工作流程执行：

## 第一步：读取并分析Bug
1. 导航到禅道bug详情页：https://your-zentao-url.com/bug-view-1234.html
2. 提取完整的bug信息：
   - 标题、严重程度、优先级
   - 详细描述、重现步骤
   - 预期结果、实际结果
   - 附件中的截图和日志
3. 截取当前bug的实际效果截图
4. 总结bug的核心问题

## 第二步：代码分析与修复
1. 查看项目中与这个bug相关的代码文件
2. 分析bug产生的根本原因
3. 生成修复代码
4. 将修复代码保存到对应的文件中

## 第三步：本地验证修复效果
1. 如果本地开发服务器没有运行，自动启动它
2. 导航到本地开发环境对应的页面
3. 严格按照禅道上的重现步骤模拟用户操作
4. 检查以下内容：
   - 页面渲染是否正确
   - 控制台是否有JavaScript错误
   - 所有相关的网络请求是否正常返回
   - 功能是否符合预期结果
5. 截取修复后的页面截图

## 第四步：回归测试
1. 测试相关的边缘情况
2. 确保修复没有引入新的bug
3. 如果发现问题，重复步骤2-3直到修复成功

## 第五步：生成修复报告
1. 总结bug的根本原因
2. 说明修复方案
3. 附上修复前后的对比截图
4. 列出验证过的测试用例

AI 会自动调用的关键工具

表格

工作环节	使用的 MCP 工具	作用
读取 bug 详情	`evaluate_script`	执行 JavaScript 提取页面上的所有信息
获取 bug 截图	`take_screenshot`	截取 bug 的实际效果
导航页面	`navigate_page`	在浏览器中打开指定 URL
模拟用户操作	`click`, `fill`, `type_text`, `scroll`	按照重现步骤操作
检查前端错误	`list_console_messages`	查看控制台所有日志和错误
检查后端接口	`list_network_requests`, `get_network_request`	查看 API 请求和响应
验证修复结果	`take_screenshot`	截取修复后的页面作为证明
性能分析	`performance_start_trace`, `performance_stop_trace`	分析性能问题

六、通用浏览器自动化技巧

Chrome DevTools MCP 不仅适用于禅道，还可以自动化任何基于浏览器的操作：

1. Jira/Confluence 自动化

plaintext

帮我从Jira上读取ISSUE-5678的需求详情，然后根据需求实现对应的功能。
实现完成后，自动在Jira上更新状态为"已完成"，并添加实现说明。

2. 在线文档读取

plaintext

帮我阅读飞书文档中这个链接的内容：https://your-feishu-url.com/doc/abc123
总结文档中的技术要求，然后按照要求修改代码。

3. 自动化测试

plaintext

帮我测试用户登录功能：
1. 导航到登录页
2. 输入正确的用户名和密码
3. 点击登录按钮
4. 验证是否成功跳转到首页
5. 测试错误的用户名和密码情况
6. 生成测试报告

4. 性能优化

plaintext

帮我优化这个页面的性能：http://localhost:3000/dashboard
1. 运行Lighthouse审计
2. 分析性能瓶颈
3. 生成优化建议
4. 自动实现可以修复的性能问题
5. 再次运行Lighthouse验证优化效果

七、高级用法

1. 批量处理多个 bug

plaintext

帮我处理禅道上分配给我的所有未解决bug。
对于每个bug：
1. 提取bug详情
2. 分析并尝试修复
3. 验证修复效果
4. 生成一个汇总报告，列出每个bug的修复情况和剩余问题

2. 自动更新禅道状态

plaintext

修复完成后，自动在禅道中：
1. 更新bug状态为"已解决"
2. 添加修复备注，说明问题原因和解决方案
3. 上传修复后的截图作为附件

3. 结合其他 MCP 工具

你可以将 Chrome DevTools MCP 与其他 MCP 工具结合使用，打造更强大的自动化流程：

结合 git-mcp：自动提交代码并创建 PR
结合 github-mcp：自动将 PR 链接到禅道 bug
结合 terminal-mcp：自动运行单元测试和构建
结合 database-mcp：自动检查数据库中的数据

示例：

plaintext

修复完成后：
1. 运行npm test确保所有测试通过
2. git提交代码，提交信息为"fix: 修复#1234 bug"
3. 创建PR并请求代码审查
4. 在禅道中更新bug状态为"已解决"并添加PR链接

八、安全最佳实践（极其重要）

⚠️ Chrome DevTools MCP 会将浏览器的所有内容暴露给 AI 客户端，包括 Cookie、密码和个人数据。请务必遵守以下安全规则：

永远不要在主浏览器配置文件中启用远程调试，除非你完全信任你的 AI 客户端
永远不要在提示词中硬编码账号密码，使用已登录的会话是唯一安全的方式
调试端口默认只绑定到 127.0.0.1，不要修改为 0.0.0.0 暴露到公网
不要在调试 Chrome 中登录敏感账号，如银行、邮件、社交媒体等
使用--no-usage-statistics和--no-performance-crux禁用数据收集
每次使用后检查是否有未授权的连接，及时关闭远程调试
使用独立配置文件模式处理敏感内容，使用完成后可以删除整个配置目录

九、常见问题与排错

1. MCP 服务器无法启动

检查 Node.js 版本是否符合要求
尝试清除 npm 缓存：npm cache clean --force
手动安装最新版本：npm install -g chrome-devtools-mcp@latest

2. 无法连接到 Chrome

检查 Chrome 远程调试是否已启用
检查端口是否被其他程序占用
尝试重启 Chrome 和 AI 客户端
对于 autoConnect 模式，确保 Chrome 版本≥146

3. AI 无法找到页面元素

提示 AI 使用更稳定的选择器，如 ID 或 data-testid
让 AI 等待页面完全加载后再操作
尝试使用evaluate_script直接通过 JavaScript 操作元素

4. 禅道登录状态丢失

使用独立配置文件模式，不要使用临时隔离模式
确保在专用 Chrome 中勾选了 "记住我"
不要在其他地方使用同一个配置文件

5. 验证码问题

AI 目前无法自动处理验证码，这就是为什么强烈推荐使用已登录会话的原因
如果遇到验证码，手动完成验证后 AI 可以继续工作

十、提示词模板库

基础调试模板

plaintext

我的页面上有一个[问题描述]。
请帮我：
1. 导航到http://localhost:3000/[页面路径]
2. 检查控制台是否有错误
3. 检查相关的DOM元素和CSS样式
4. 检查网络请求是否正常
5. 找出问题原因并修复
6. 验证修复效果

完整 bug 修复模板

plaintext

帮我修复[系统名称]上编号为#[编号]的bug。

Bug详情页：[URL]

工作流程：
1. 读取bug的完整信息
2. 分析bug原因
3. 生成修复代码
4. 在本地环境验证修复效果
5. 生成修复报告

自动化测试模板

plaintext

帮我测试[功能名称]功能。

测试步骤：
1. [步骤1]
2. [步骤2]
3. [步骤3]

预期结果：
[描述预期结果]

请按照步骤测试，并生成测试报告。

官方资源

GitHub 仓库：https://github.com/ChromeDevTools/chrome-devtools-mcp
官方文档：https://developer.chrome.com/blog/chrome-devtools-mcp
工具参考：https://developer.chrome.com/docs/devtools/mcp/tools

MCP技术社区

欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！

更多推荐

easy-agent：面向 Spring Boot 的轻量级 Agent 能力组件

MCP技术社区

什么是大模型 Agent？它与传统的 AI 系统有什么不同？

AI Agent（人工智能智能体）是一种能够感知环境、进行决策并执行动作的自主软件系统。它以大语言模型（LLM）为大脑，代表用户自动化完成复杂任务，例如自动化处理电子邮件、生成报告、执行多步查询或控制智能设备。不同于单纯的聊天机器人，AI Agent 强调自主性和交互性，能够在动态环境中持续迭代，直到任务完成。核心公式：Agent = LLM + Planning（规划）+ Memory（记忆）+

MCP技术社区

OpenClaw.NET 外部 CLI 连接器 (External CLI Connectors) 详细技术总结

是 OpenClaw.NET 的一个受控原生工具 ()，用于将官方平台 CLI（如 GitHub CLI、Azure CLI、kubectl、Stripe CLI、Lark/Feishu CLI 等）包装为可被 AI Agent 安全调用的工具。核心设计哲学：默认禁用— 功能不会自动启用，需要显式配置不是通用 Shell— 不接受任意命令字符串，只允许预配置的具名命令深度防御— 通过命名命令白名单

MCP技术社区

所有评论(0)

查看更多评论

前端小白一枚~

@m0_59090162

已为社区贡献1条内容

使用Chrome Devtools mcp实现自动化解决bug（禅道/在线文档等一切浏览器行为）

前端小白一枚~

Chrome DevTools MCP 自动化解决 Bug 完整教程

（禅道 / Jira / 在线文档等所有浏览器行为通用）

一、核心优势与工作原理

传统 AI 编程 vs MCP 自动化编程

技术架构

二、环境准备

系统要求

验证环境

三、三种连接模式详解（2026 最新）

模式一：自动连接模式（强烈推荐，Chrome 146+）

模式二：独立配置文件模式（最安全）

模式三：临时隔离模式（一次性使用）

四、主流 AI 客户端配置

1. Cursor（推荐）

2. Claude Desktop

3. VS Code Copilot

4. Gemini CLI

五、核心工作流：自动化解决禅道 Bug

完整自动化指令

AI 会自动调用的关键工具

六、通用浏览器自动化技巧

1. Jira/Confluence 自动化

2. 在线文档读取

3. 自动化测试

4. 性能优化

七、高级用法

1. 批量处理多个 bug

2. 自动更新禅道状态

3. 结合其他 MCP 工具

八、安全最佳实践（极其重要）

九、常见问题与排错

1. MCP 服务器无法启动

2. 无法连接到 Chrome

3. AI 无法找到页面元素

4. 禅道登录状态丢失

5. 验证码问题

十、提示词模板库

基础调试模板

完整 bug 修复模板

自动化测试模板

官方资源

所有评论(0)

温馨提示：您尚未绑定手机号

前端小白一枚~