Chrome DevTools MCP

调试感知 + 基础交互（基于document.getElementById的形式实现自动化测试）

基于快照实现查看并且解决控制台报错问题

Chrome DevTools MCP 完整介绍

一、基础定义

Chrome DevTools MCP（chrome-devtools-mcp） 是 Chrome 官方推出的 MCP（Model Context Protocol）服务端 ，底层基于 CDP（Chrome DevTools Protocol）+ Puppeteer。作用：打通 AI 编码助手（Claude Code、Cursor、GitHub Copilot、Gemini 等）与真实 Chrome 浏览器，让 AI 直接调用全套 DevTools 调试能力，不再只能 "盲写代码"。

MCP：开放标准，用来让大模型安全调用外部工具、获取外部实时数据。

简单理解：给 AI 装上浏览器的眼睛和双手，AI 可以直接打开网页、查报错、分析性能、操作页面、定位前端 Bug。

二、核心功能分类

1. 页面导航与浏览器会话管理

新建标签、切换标签、关闭页面、列出所有页面
访问指定 URL、刷新页面、前进 / 后退
智能等待：等待元素出现、页面加载完成、接口请求结束（内置等待机制，稳定性优于基础 Puppeteer 脚本）

2. 用户行为自动化（模拟真实用户操作）

AI 可以自动操控页面：

点击元素、悬浮、拖拽、坐标点击
输入文本、批量填充表单、键盘快捷键
文件上传、弹窗确认 / 取消适合：自动化复现 bug、端到端简易测试

3. DOM & CSS 样式调试（对应 DevTools Elements 面板）

获取完整 DOM 快照、提取元素属性
读取元素生效 CSS、计算样式，定位布局错乱、溢出、样式不生效问题
在页面执行任意 JS 脚本（evaluate_script）
直接查找选择器对应的元素

典型场景：让 AI 排查页面错位、样式冲突、响应式异常。

4. 控制台调试（Console 面板）

获取全部控制台日志：log/warn/error
读取带 SourceMap 映射的报错堆栈，精准定位源码报错行
过滤运行时异常、未捕获 Promise 错误

解决痛点：AI 写完代码不知道浏览器真实报错，无需手动复制报错贴给 AI。

5. 网络抓包（Network 面板）

捕获所有请求：Fetch/XHR、接口、静态资源
获取请求 URL、Method、请求体、响应体、状态码、Header 快速定位：接口 404、跨域、请求参数错误、后端返回异常。

6. 环境模拟（Emulation 仿真能力）

模拟移动端设备、自定义视口尺寸
开启深色 / 浅色模式
CPU 节流、网络节流（弱网测试）
模拟地理位置、离线模式

7. 性能分析（Performance 面板核心能力）

录制性能追踪（Performance Trace）
自动分析 LCP、INP、CLS 等核心指标
识别长任务、渲染阻塞、主线程卡顿 AI 可以自动审计页面性能并给出优化方案。

8. 内存调试

抓取堆快照 Heap Snapshot
检测内存泄漏、频繁 GC、大对象占用适合排查 SPA 页面长时间运行卡顿问题。

9. 截图、录屏与审计

页面全屏截图、区域截图
开启 / 停止页面录屏
一键运行 Lighthouse 审计（性能、无障碍、SEO、最佳实践）

三、典型使用场景

前端 Bug 自动排查闭环 AI 修改代码 → 打开本地页面 → 查看 Console 报错 + 网络请求 → 分析问题 → 继续修复
布局样式问题诊断 直接让 AI 访问页面，分析 DOM 与 CSS，修复排版、滚动溢出、适配问题
自动化性能调优 AI 录制性能日志，自动找出卡顿根源
简易自动化测试 复现线上偶现 bug，模拟用户操作流程
前后端联调问题定位 一键查看请求入参、返回数据，区分前端传参错误还是后端问题

四、与 Playwright MCP 的关键区别

Chrome DevTools MCP ：侧重调试，完整复刻 DevTools 能力，适合开发查 bug、性能分析；原生对接 Chrome 调试协议。
Playwright MCP：侧重跨浏览器自动化测试，支持多浏览器，调试能力弱于前者。

五、限制与安全提示

仅官方支持 Chrome / Chrome for Testing；其他 Chromium 浏览器可兼容但无保障
MCP 客户端拥有浏览器完整访问权限，不要在浏览器打开包含账号、隐私数据页面时接入不可信 AI 客户端
可以 Headless 无头模式运行，也可启动可视化 Chrome 窗口

六、常用调用工具示例（供参考）

plaintext

复制代码

navigate_page          // 打开网页
take_screenshot        // 截图
list_console_messages  // 获取控制台日志
list_network_requests  // 获取网络请求
performance_start_trace // 开始录制性能
evaluate_script        // 在页面执行JS
take_heapsnapshot      // 堆快照
lighthouse_audit       // 灯塔审计