适合谁
- 前端开发者需要 AI 辅助进行网页调试和性能分析的场景
- 需要将浏览器自动化操作和性能诊断结合在同一工具里的场景
C
76FMRS · B
Chrome DevTools 官方团队维护，工具按输入自动化、导航、仿真、性能、网络分类，覆盖面广且有专门的 troubleshooting 文档。npx 一行命令即可启动。评分基于源码与文档静态核验，未实际运行验证。
Google Chrome DevTools 团队官方维护的 MCP Server，把浏览器输入自动化、导航控制、页面仿真、性能追踪分析和网络请求检查等 Chrome DevTools 能力暴露给 AI 编码助手，用于调试网页问题、分析性能瓶颈和自动化浏览器操作。
工具能力
click
点击页面元素
drag
拖拽页面元素
fill
填写单个输入框
fill_form
批量填写表单
handle_dialog
处理浏览器弹窗（alert/confirm/prompt）
hover
悬停在页面元素上
press_key
模拟按键操作
type_text
输入文本
upload_file
上传文件
click_at
在指定坐标点击
close_page
关闭页面
list_pages
列出当前打开的所有页面
navigate_page
导航页面到指定 URL
new_page
打开新页面
select_page
切换到指定页面
wait_for
等待指定条件满足
emulate
模拟设备/网络环境
resize_page
调整页面视口大小
performance_analyze_insight
分析性能追踪中的具体洞察项
performance_start_trace
开始性能追踪录制
performance_stop_trace
停止性能追踪并返回结果
get_network_request
获取指定网络请求的详细信息
安装接入
通过 npx -y chrome-devtools-mcp@latest 启动即可，@latest 确保始终使用最新版本。如果只需要基础浏览器操作，可加 --slim 参数进入精简模式，减少启用的工具数量。
claude_desktop_config.json
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
选型与风险
不适合谁
- 只需要抓取网页文本内容而不涉及性能分析或复杂交互的场景（用更轻量的抓取工具即可）
所需权限
- 需要在本地运行 Chrome 浏览器实例
- navigate_page 可访问任意 URL，type_text/fill_form 等工具可在页面中输入任意内容
风险与副作用
- 浏览器自动化工具可以访问和操作打开的页面内容，建议只在受信任的开发/测试环境中使用
- performance_start_trace 等性能追踪功能会持续记录浏览器活动，注意不要在包含敏感信息的页面上长时间开启
常见排障
- 工具未响应：确认 Chrome 是否已正确启动并且 MCP 客户端有权限连接
- 性能追踪结果异常：确保追踪期间没有其他程序抢占系统资源导致数据失真
- 元素操作失败：查看 docs/troubleshooting.md 中列出的常见问题
使用场景
用 AI 助手分析网页性能追踪，定位加载缓慢的具体环节
自动化填写表单、点击按钮完成网页操作
检查特定网络请求的响应内容和耗时
模拟不同设备和网络环境测试页面适配
支持客户端
Claude Code完整支持
VS Code完整支持
Cursor完整支持
Windsurf完整支持
JetBrains完整支持
Cline完整支持
Amp完整支持
Kiro完整支持
Antigravity完整支持