Chrome DevTools MCP 让 Agent 检查渲染后的页面、读取控制台、查看请求并录制性能 trace。沿着一个具体症状查请求与代码。本例在本地复现按钮加载失败，只改一条请求路径，再验证结果。
选择浏览器连接方式
陌生应用或练习优先用新的隔离实例。官方工具也支持 browserUrl 或 wsEndpoint 连接可调试浏览器，并给符合要求的 Chrome 提供 autoConnect。连接现有会话可能暴露登录页和存储，限定已授权的配置与目标来源。本地实测显式指定 Tabbit Browser Dev 可执行文件与隔离配置，这是一个实际验证的自定义环境，不能推广为官方支持所有 Tabbit 版本。
注册固定版本并启动练习服务
在客户端注册本地 stdio MCP。本次使用 chrome-devtools-mcp 1.12.0 与下方显式路径。按你的环境调整。测试关闭服务用量统计和 CrUX 查询。把两个文件放进同一练习目录，用 Python 启动，然后让 MCP 工具打开终端打印的回环地址。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@1.12.0",
"--executablePath",
"/Applications/Tabbit Browser Dev.app/Contents/MacOS/Tabbit Browser Dev",
"--isolated",
"--headless",
"--viewport=1000x565",
"--usageStatistics=false",
"--performanceCrux=false"
]
}
}
}python3 fixture.py --port 8765复现后取得两类证据
打开页面，取快照，点一次 Load records。从当前回执获取 pageId 和元素 uid。页面显示 Could not load records。list_console_messages 返回 F02 load failed: HTTP 404。list_network_requests 过滤 fetch 得到 GET /api/record [404]，再用 get_network_request 查详细请求。另有 favicon 404，和本次业务故障无关。
| 步骤 | 工具 | 预期结果 |
|---|---|---|
| 1 | take_snapshot + click | Could not load records |
| 2 | list_console_messages | F02 load failed: HTTP 404 |
| 3 | list_network_requests + get_network_request | GET /api/record [404] |
Chrome DevTools MCP · Tool reference
只改路径，再验证相同动作
练习服务提供 /api/records，脚本写的是 /api/record。把 fixture.html 的 fetch 路径改为 /api/records 后保存。刷新同一页，取新快照，再点一次同一个按钮。正确请求返回 200，页面显示 Loaded: F02-FIXED，未再出现原业务控制台错误。保存前后回执便于对照。
- const response = await fetch("/api/record");
+ const response = await fetch("/api/records");
性能 trace 回答另一个问题
完成功能验证后，我们对修好的页面运行 performance_start_trace，开启 reload 与 autoStop。单次本地数据为 LCP 386 毫秒、TTFB 2 毫秒、CLS 0.00，未限制 CPU 或网络，无真实用户数据。这个样本验证 trace 能采集，不能说明修复使网页变快。排查慢页面时保持任务与环境一致，重复采样。
| 工具 | 预期结果 |
|---|---|
| LCP | 386 ms |
| TTFB | 2 ms |
| CLS | 0.00 |
两条社区反馈补充的经验
一位 r/ClaudeAI 用户结合控制台和网络，区分了缺失资源与另一个异常。一位 r/mcp 用户说 MCP 启动的浏览器比自己平时使用的慢。这些是不同环境的个案，提醒我们保留具体请求回执和运行模式，并独立测性能。
可以连接正在运行的浏览器吗？
可在环境支持且浏览器提供已授权调试端点时连接。问题不依赖现有会话时先用隔离环境。
常见问题
可以连接正在运行的浏览器吗？
可在环境支持且浏览器提供已授权调试端点时连接。问题不依赖现有会话时先用隔离环境。
Chrome DevTools MCP 能检查什么？
Chrome DevTools MCP 让 Agent 检查渲染后的页面、读取控制台、查看请求并录制性能 trace。沿着一个具体症状查请求与代码。本例在本地复现按钮加载失败，只改一条请求路径，再验证结果。
怎样注册服务？
在客户端注册本地 stdio MCP。本次使用 chrome-devtools-mcp 1.12.0 与下方显式路径。按你的环境调整。测试关闭服务用量统计和 CrUX 查询。把两个文件放进同一练习目录，用 Python 启动，然后让 MCP 工具打开终端打印的回环地址。
怎样验证修复？
练习服务提供 /api/records，脚本写的是 /api/record。把 fixture.html 的 fetch 路径改为 /api/records 后保存。刷新同一页，取新快照，再点一次同一个按钮。正确请求返回 200，页面显示 Loaded: F02-FIXED，未再出现原业务控制台错误。保存前后回执便于对照。
一次本地 trace 能说明什么？
完成功能验证后，我们对修好的页面运行 performance_start_trace，开启 reload 与 autoStop。单次本地数据为 LCP 386 毫秒、TTFB 2 毫秒、CLS 0.00，未限制 CPU 或网络，无真实用户数据。这个样本验证 trace 能采集，不能说明修复使网页变快。排查慢页面时保持任务与环境一致，重复采样。