一、概述

Chrome DevTools MCP 是一个将 Chrome 浏览器的 DevTools 协议暴露为 MCP 工具的服务器，配合 Kiro 编辑器可以实现在对话中直接操控浏览器，无需手动切换窗口。

核心价值：让 AI 助手拥有"眼睛"和"手"，能看到页面、操作页面、分析问题。

---

二、能力矩阵

2.1 页面导航与管理

能力	说明	典型场景
打开页面	navigate_page 导航到指定 URL	打开测试环境验证部署
多页面管理	new_page / list_pages / select_page / close_page	同时对比多个环境
前进/后退/刷新	navigate_page 支持 back/forward/reload	测试浏览器历史导航

示例指令：

"打开 http://localhost:8080 检查页面是否正常"
"同时打开生产和测试环境，对比页面差异"

2.2 控制台监控与调试

能力	说明	典型场景
查看控制台日志	list_console_messages 按类型过滤	检查 error/warn 日志
查看日志详情	get_console_message 获取完整堆栈	定位 JS 报错根因
执行 JS 脚本	evaluate_script 在页面上下文执行	检查变量状态、调用 API

示例指令：

"打开首页，检查控制台是否有错误日志"
"在控制台执行 localStorage.getItem('token') 看下登录状态"
"检查 Vue 组件的 data 状态"

2.3 网络请求分析

能力	说明	典型场景
列出所有请求	list_network_requests 按资源类型过滤	找出失败的 API 请求
查看请求详情	get_network_request 含请求/响应体	分析接口返回数据
导出请求数据	保存请求/响应体到文件	留存接口调试证据
网络限速	emulate 模拟 3G/4G/离线	测试弱网环境表现

示例指令：

"监控页面网络请求，找出加载最慢的资源"
"检查 /api/user/info 接口的返回数据"
"模拟 Slow 3G 网络，看页面加载体验"

2.4 页面截图与快照

能力	说明	典型场景
页面截图	take_screenshot 支持全页/元素级	记录 UI 状态、对比布局
页面快照	take_snapshot 基于 a11y 树的文本快照	AI 理解页面结构和内容
保存到文件	截图/快照可保存到本地	生成测试报告附件

示例指令：

"截图当前页面并分析布局问题"
"截图登录表单区域"
"全页截图保存到 docs/screenshots/ 目录"

2.5 页面交互操作

能力	说明	典型场景
点击元素	click / dblClick	点击按钮、链接、菜单
填写表单	fill / fill_form	输入文本、选择下拉框
键盘操作	press_key 支持组合键	Enter 提交、快捷键操作
悬停	hover	触发 tooltip、下拉菜单
拖拽	drag	拖拽排序、拖拽上传
文件上传	upload_file	上传测试文件
弹窗处理	handle_dialog	处理 alert/confirm/prompt
等待元素	wait_for	等待异步内容加载完成

示例指令：

"执行登录流程：输入用户名 admin，密码 123456，点击登录"
"填写注册表单并提交，验证跳转是否正确"
"点击删除按钮，确认弹窗后验证数据是否移除"

2.6 设备模拟与响应式测试

能力	说明	典型场景
视口调整	emulate 设置宽高/DPR	测试响应式布局
移动端模拟	设置 isMobile/hasTouch	模拟手机浏览
深色模式	emulate colorScheme	测试暗色主题
地理位置	emulate geolocation	测试定位功能
UA 伪装	emulate userAgent	模拟不同浏览器
CPU 限速	emulate cpuThrottlingRate	模拟低端设备
页面缩放	resize_page	测试不同分辨率

示例指令：

"模拟 iPhone 14 Pro 的视口，截图看移动端布局"
"切换到深色模式，检查样式是否正常"
"模拟 CPU 4x 降速，测试页面交互流畅度"

2.7 性能分析

能力	说明	典型场景
录制性能 Trace	performance_start_trace / performance_stop_trace	分析页面加载性能
性能洞察	performance_analyze_insight	查看 LCP/CLS/FID 等 Core Web Vitals
导出 Trace	保存为 .json.gz 文件	在 Chrome DevTools 中深入分析

示例指令：

"录制首页加载性能，分析 Core Web Vitals 得分"
"找出导致页面卡顿的性能瓶颈"
"导出性能 Trace 到 docs/performance/ 目录"

---

三、实战场景

3.1 前端 Bug 排查流程

1. "打开出问题的页面"
2. "检查控制台错误日志"
3. "查看失败的网络请求详情"
4. "截图当前页面状态"
5. → 根据信息定位代码问题并修复

3.2 接口联调验证

1. "打开页面，触发某个操作"
2. "查看 /api/xxx 接口的请求参数和返回数据"
3. → 对比预期，发现前后端数据不一致的问题

3.3 自动化回归测试

1. "打开登录页"
2. "输入用户名密码，点击登录"
3. "等待跳转到首页"
4. "验证页面显示了用户名"
5. "截图保存测试证据"

3.4 响应式布局验证

1. "打开页面"
2. "分别模拟 1920x1080、1366x768、375x812 三个分辨率"
3. "每个分辨率截图保存"
4. → 对比不同分辨率下的布局差异

3.5 性能优化分析

1. "录制页面加载性能 Trace"
2. "分析 LCP、CLS 等指标"
3. "找出加载最慢的资源"
4. → 针对性优化

---

四、配置参考

4.1 Kiro MCP 配置（.kiro/settings/mcp.json）

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--channel=stable"
      ],
      "autoApprove": [],
      "disabled": false
    }
  }
}

4.2 注意事项

• Node.js 版本要求 ≥ 20.19.0 LTS
• 如果使用 nvm 管理 Node，需要在 command 中指定高版本 npx 的绝对路径，并通过 env.PATH 确保子进程也使用正确版本
• --channel 参数：stable（普通 Chrome）、beta（Chrome Beta）、canary（Chrome Canary）
• --autoConnect 会自动连接已运行的 Chrome，如果 Chrome 未启动会自动以调试模式启动
• 首次连接时需要关闭所有已打开的 Chrome 窗口，让 MCP 以远程调试模式重新启动

---

五、与纯手动调试的对比

维度	手动调试	Kiro + Chrome DevTools MCP
窗口切换	频繁在编辑器和浏览器间切换	在对话中直接操作，无需切窗口
信息传递	手动复制粘贴错误信息	AI 直接读取控制台和网络数据
重复操作	每次手动点击填写	一句话描述，AI 自动执行
多设备测试	手动调整视口或用真机	一句话切换模拟设备
问题分析	自己看日志分析	AI 读取数据后直接给出分析和修复建议
测试记录	手动截图保存	自动截图并保存到项目目录