chrome-devtools 快速入门

让 AI 直接”钻进”Chrome 浏览器里,帮你抓性能、看网络、调试前端问题。

这是什么?解决什么问题?

chrome-devtools 这个 Skill 对应的是 Chrome 团队官方维护的 chrome-devtools-mcp 仓库,本质是一个 MCP(Model Context Protocol)Server,它把 Chrome DevTools Protocol(CDP)的能力通过 MCP 协议暴露给 AI 助手(Claude Code、Cursor 等)。

传统的 AI 写前端,只能”看代码”,而 Chrome DevTools 提供的能力是”看浏览器运行时”——这是完全不同的信息维度。比如:

• 真实运行时哪些 CSS 实际生效、哪些被覆盖。
• Network 面板里哪个接口慢,慢在哪一段(TTFB、Content Download)。
• Performance 面板里哪个函数执行了 200ms 阻塞主线程。
• Memory 面板里有没有内存泄漏,GC 频率如何。
• 移动端模拟、CPU 节流、网络节流下的表现。

chrome-devtools-mcp 让 AI 助手可以直接驱动一个真实 Chrome 实例,执行这些操作,而不是凭经验”猜”问题在哪。

它解决的问题:AI 写出的前端代码,在它自己脑子里”能跑”,但放到真实浏览器里可能 LCP 4 秒、CLS 0.3、bundle 500KB。装了这个 MCP,AI 可以”亲眼看”运行时表现,提出数据驱动的优化建议。

它适合的场景:前端性能调优、调试线上问题、自动化截图对比、a11y 审计、爬虫与数据提取(配合 browser-use 类工作流)。

准备工作

1. 一个支持 MCP 协议的 AI 编程助手(Claude Code 0.2.0+、Cursor 0.40+、Cline 等)。
2. 本地装好 Chrome / Chromium 浏览器(最新稳定版即可)。
3. Node.js 18+(用于跑 MCP server)。
4. 安装 Chrome DevTools MCP:

   npx -y chrome-devtools-mcp@latest
   

   或者全局装:

   npm install -g chrome-devtools-mcp
   

3 步快速上手

第 1 步:配置 MCP Server

在 Claude Code 的 ~/.claude/settings.json(或项目的 .mcp.json)里加:

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

重启 Claude Code,会发现工具列表里多了 mcp__chrome-devtools__* 系列工具,包括:

• list_pages - 列出当前打开的标签页。
• navigate - 导航到指定 URL。
• take_screenshot - 截图。
• evaluate_script - 在浏览器里执行 JS。
• get_network_log - 拉取网络请求日志。
• start_performance_trace / stop_performance_trace - 启停性能录制。
• get_console_messages - 拉取 console 日志。

第 2 步:验证安装

在 Claude Code 中输入:

“用 chrome-devtools 打开 https://example.com,截一张图给我。”

如果 AI 真的打开 Chrome、加载页面、返回截图,说明 MCP 跑通了。

第 3 步:用 chrome-devtools 跑第一个真实任务

假设你在排查一个页面 LCP 过高的问题:

Step 1:让 AI 打开页面

“用 chrome-devtools 打开 https://my-site.com,等 5 秒,然后告诉我 LCP 是多少、LCP 元素是哪个。”

AI 会调用 navigate + evaluate_script 读取 PerformanceObserver 拿到的 LCP 指标。

Step 2:让 AI 看网络

“用 chrome-devtools 拉取这次访问的网络日志,告诉我哪个请求耗时最长,响应头里的 cache-control 是什么。”

AI 会调用 get_network_log,找出慢请求。

Step 3:让 AI 给优化建议 基于真实数据,AI 不会再瞎说”你应该压缩图片”,而是会指出具体的优化点:“LCP 元素是 hero-banner.jpg(3.2MB,未压缩),且响应头 cache-control: no-store,导致每次访问都重新下载。建议转 WebP + 加 cache-control: public, max-age=31536000。“

常见踩坑

1. MCP 版本和 Chrome 版本不兼容。MCP server 内部用 Puppeteer / Playwright 驱动 Chrome,版本不对会启动失败。报错时先 npx chrome-devtools-mcp@latest --help 看看。
2. 开了太多标签页,MCP 卡死。MCP 默认只连一个标签页,如果 Chrome 里有几十个标签,部分请求会丢失。Skill 建议排查时用 --user-data-dir 单独建一个干净的 profile。
3. Performance trace 录制时间太长。录 60 秒的 trace 文件会大到 100MB+。Skill 建议录制时长控制在 5-10 秒。
4. evaluate_script 跑异步代码没 await。AI 写 evaluate_script 时容易漏 await,导致读不到异步结果。Skill 提醒:返回 Promise 的话 MCP 会自动 await,但开发者要清楚语义。
5. 截图被广告拦截弹窗污染。页面里的”接受 cookies”弹窗会挡住 LCP 元素,让 AI 误判。Skill 建议用 --no-default-browser-check --disable-extensions 启动干净 profile。
6. 本地开发和生产环境差异。AI 通过 MCP 看到的是它启动的 Chrome,不是用户真实浏览器,可能 localhost 没有生产环境的网络延迟。Skill 建议在 staging 环境用。

初级用法

用法 1:截图对比。让 AI 跑”修改前 vs 修改后”的截图,自动算 SSIM(结构相似度),检查视觉回归。

用法 2:抓 console 报错。get_console_messages 拉取所有 console.error / console.warn,自动汇总到报告里。

用法 3:跑 Lighthouse。MCP 可以驱动 Chrome DevTools 内置的 Lighthouse,跑完整 5 项指标(性能、可访问性、最佳实践、SEO、PWA)。

高级玩法

玩法 1:长任务自动拆分。让 AI 跑 Performance trace,识别 > 50ms 的长任务,自动给出拆分到 Web Worker 的建议。

玩法 2:Core Web Vitals 真实数据采集。MCP 可以模拟不同网络(3G / 4G / WiFi)和 CPU 速度(4x slowdown),看页面在低端设备上的表现。

玩法 3:和 performance-optimization Skill 联动。两个 Skill 配合形成”实测 → 优化 → 复测”闭环,AI 一次对话里完成整个调优流程。

小技巧

1. MCP 默认用 headless Chrome。看不到浏览器窗口,适合 CI;调试时加 --headless=false 看真实渲染。
2. 每个项目独立 user-data-dir。--user-data-dir=/tmp/chrome-mcp-1,避免不同项目的 cookie / 缓存互相串。
3. 录制 trace 时禁用扩展。--disable-extensions,防止 Chrome 自己的扩展污染 trace。
4. 截图分辨率用 2x。take_screenshot 时传 deviceScaleFactor: 2,导出 retina 清晰度,设计稿对比更准。
5. 配合 Lighthouse CI。把 MCP 跑的 Lighthouse 结果存入 JSON,接 GitHub Actions 持续追踪指标变化。

常见问题 FAQ

Q1: 这个 Skill 跟 chrome-devtools 有什么关系?必须装吗?

A: Skill 是给 AI Agent 用的”技能包”,能告诉 Agent 怎么按特定规范工作。不是必须装——如果你的项目规模小、要求不高,不装也能用。但装上能让 Agent 输出的质量更高、更符合最佳实践,推荐装。

Q2: 这个 Skill 适合哪些 AI Agent?Cursor?Claude Code?其他?

A: chrome-devtools 来自 Anthropic,主要面向支持 Skill 机制的 Agent。常见兼容 Agent 包括 Claude Code、Cursor、OpenCode、Windsurf 等。具体兼容性请查 Skill 官方文档。

Q3: 装了这个 Skill 后,会拖慢 Agent 响应吗?

A: 会的——Skill 通常会增加 prompt 长度,导致响应变慢、token 消耗增加。但质量提升明显。建议:1) 只装项目必需的 Skill;2) 用 Skill 启动/加载/卸载机制按需加载;3) 定期清理不用的 Skill。

Q4: 怎么验证 Skill 装对了?

A: 在 Agent 中输入”列出已加载的 Skill”或类似命令。如果 Skill 出现在列表里,说明装对了。然后用 Skill 跑一个相关任务,看输出是否符合 Skill 规范。

Q5: 这个 Skill 有许可证吗?能商用吗?

A: 取决于 chrome-devtools 的许可证。常见许可证包括 MIT(完全自由)、Apache-2.0(自由但有专利条款)、源可用(可看不能用)、GPL(强开源)。商用前请查仓库 LICENSE 文件。

进阶学习建议

如果想进一步用好 chrome-devtools,建议按以下路径学习:

第 1 周:熟练使用

• 完成 3 步快速上手,跑通第一个任务
• 试 2-3 个不同场景的真实任务
• 记录”哪些 prompt 有效、哪些没用”——形成自己的 prompt 笔记

第 2 周:理解机制

• 阅读 Skill 的官方文档(README、SKILL.md)
• 了解 Skill 的”触发关键词”和”输出格式”
• 学习”如何用更具体的描述触发 Skill”

第 3-4 周:组合使用

• 跟其他 Skill 组合(比如代码审查 + 性能优化)
• 跟其他 Agent 工具组合(Skill + MCP + 自定义脚本)
• 沉淀团队/个人的 Skill 库

长期:贡献社区

• 把自定义的 Skill 开源到 GitHub
• 提 PR 改进现有 Skill
• 写使用心得分享到 CSDN/掘金/知乎

推荐资源:

• 官方文档:https://github.com/ChromeDevTools/chrome-devtools-mcp
• 官方仓库 README 里的 Examples
• 社区最佳实践:Anthropic 官方博客 https://www.anthropic.com/blog
• 国内社区:CSDN AI 板块、掘金 AI 板块

避免的坑:

• 不要装太多 Skill(超过 10 个会拖慢 Agent)
• 不要把 Skill 装在不兼容的 Agent 上
• 不要直接复制 Skill 默认 prompt——要根据项目调整
• 定期 review Skill 库的实用性,清理不用的

参考链接

• chrome-devtools-mcp 官方仓库:https://github.com/ChromeDevTools/chrome-devtools-mcp
• Chrome DevTools Protocol:https://chromedevtools.github.io/devtools-protocol/
• MCP 协议规范:https://modelcontextprotocol.io/
• Chrome DevTools 官方文档:https://developer.chrome.com/docs/devtools/
• Lighthouse CI:https://github.com/GoogleChrome/lighthouse-ci

本文基于官方文档和公开资料整理，AI辅助生成，MagicNetWorld 尚未完成独立实测。如有错误或过时信息，请通过 contact@magicnetworld.com 反馈。