{"id":"b4b68ad6-c107-4eaf-9442-b9cfd235c129","entityType":"agent","slug":"clawhub-cn-big-cabbage-cn-chrome-devtools-mcp","name":"Skill","canonicalUrl":"https://www.xpersona.co/agent/clawhub-cn-big-cabbage-cn-chrome-devtools-mcp","canonicalPath":"/agent/clawhub-cn-big-cabbage-cn-chrome-devtools-mcp","generatedAt":"2026-10-11T15:15:10.710Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T11:52:47.064Z","emptyReason":null},"description":"Chrome DevTools MCP 服务器，让 AI 编码助手（Claude Code、Cursor、Copilot）直接控制和调试真实 Chrome 浏览器，实现截图、性能分析、网络请求检查、控制台调试和自动化操作 Skill: Skill Owner: cn-big-cabbage Summary: Chrome DevTools MCP 服务器，让 AI 编码助手（Claude Code、Cursor、Copilot）直接控制和调试真实 Chrome 浏览器，实现截图、性能分析、网络请求检查、控制台调试和自动化操作 Tags: latest:0.1.1 Version history: v0.1.1 | 2026-06-16T09:47:24.718Z | auto - Bumped version to 0.1.1. - Updated metadata in SKILL.md to specify required binaries (node, npx) for better environment validation. - Added _meta.json file for improved metadata manageme","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.1K downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s17dbd0j0kazk5ay31x9kv1z3n84f04v:cn-chrome-devtools-mcp","sourceUrl":"https://clawhub.ai/cn-big-cabbage/cn-chrome-devtools-mcp","homepage":"https://clawhub.ai/cn-big-cabbage/skills/cn-chrome-devtools-mcp","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/cn-big-cabbage/cn-chrome-devtools-mcp","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/cn-big-cabbage/skills/cn-chrome-devtools-mcp","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":61,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Chrome DevTools MCP 服务器，让 AI 编码助手（Claude Code、Cursor、Copilot）直接控制和调试真实 Chrome 浏览器，实现截图、性能分析、网络请求检查、控制台调试和自动化操作 Skill: Skill Owner: cn-big-cabbage Summary: Chrom"},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T11:52:47.064Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T11:52:47.064Z","emptyReason":null},"stars":null,"forks":null,"downloads":1071,"packageName":null,"latestVersion":"0.1.1","tractionLabel":"1.1K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T11:52:47.052Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T11:52:47.064Z","lastCrawledAt":"2026-10-11T11:52:47.052Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T11:52:47.052Z","lastVerifiedAt":null,"highlights":[{"version":"0.1.1","createdAt":"2026-06-16T09:47:24.718Z","changelog":"- Bumped version to 0.1.1. - Updated metadata in SKILL.md to specify required binaries (node, npx) for better environment validation. - Added _meta.json file for improved metadata management. - Removed obsolete skill-card.md file.","fileCount":7,"zipByteSize":11813},{"version":"0.1.0","createdAt":"2026-04-22T00:43:35.165Z","changelog":"Initial release of chrome-devtools-mcp. - Provides an MCP server for AI coding assistants to control and debug real Chrome browsers via DevTools. - Supports key DevTools features: screenshots, performance analysis, network inspection, console debugging, and browser automation. - Compatible with major AI tools including Claude Code, Cursor, Copilot, and Codex. - Utilizes Puppeteer for robust browser automation with built-in wait mechanisms. - Allows connection to existing Chrome instances via remote debugging port. - Includes detailed usage guides, advanced features, troubleshooting info, and installation instructions.","fileCount":7,"zipByteSize":11923}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s17dbd0j0kazk5ay31x9kv1z3n84f04v:cn-chrome-devtools-mcp","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cn-big-cabbage-cn-chrome-devtools-mcp/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cn-big-cabbage-cn-chrome-devtools-mcp/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cn-big-cabbage-cn-chrome-devtools-mcp/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-cn-big-cabbage-cn-chrome-devtools-mcp/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-cn-big-cabbage-cn-chrome-devtools-mcp/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-cn-big-cabbage-cn-chrome-devtools-mcp/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-11T15:15:10.709Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cn-big-cabbage-cn-chrome-devtools-mcp/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cn-big-cabbage-cn-chrome-devtools-mcp/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cn-big-cabbage-cn-chrome-devtools-mcp/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cn-big-cabbage-cn-chrome-devtools-mcp/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T11:52:47.064Z","emptyReason":null},"readme":"Skill: Skill\n\nOwner: cn-big-cabbage\n\nSummary: Chrome DevTools MCP 服务器，让 AI 编码助手（Claude Code、Cursor、Copilot）直接控制和调试真实 Chrome 浏览器，实现截图、性能分析、网络请求检查、控制台调试和自动化操作\n\nTags: latest:0.1.1\n\nVersion history:\n\nv0.1.1 | 2026-06-16T09:47:24.718Z | auto\n\n- Bumped version to 0.1.1.\n- Updated metadata in SKILL.md to specify required binaries (node, npx) for better environment validation.\n- Added _meta.json file for improved metadata management.\n- Removed obsolete skill-card.md file.\n\nv0.1.0 | 2026-04-22T00:43:35.165Z | auto\n\nInitial release of chrome-devtools-mcp.\n\n- Provides an MCP server for AI coding assistants to control and debug real Chrome browsers via DevTools.\n- Supports key DevTools features: screenshots, performance analysis, network inspection, console debugging, and browser automation.\n- Compatible with major AI tools including Claude Code, Cursor, Copilot, and Codex.\n- Utilizes Puppeteer for robust browser automation with built-in wait mechanisms.\n- Allows connection to existing Chrome instances via remote debugging port.\n- Includes detailed usage guides, advanced features, troubleshooting info, and installation instructions.\n\nArchive index:\n\nArchive v0.1.1: 7 files, 11813 bytes\n\nFiles: _meta.json (141b), guides/01-installation.md (3032b), guides/02-quickstart.md (2699b), guides/03-advanced-usage.md (2463b), skill-card.md (2590b), SKILL.md (4966b), troubleshooting.md (6793b)\n\nFile v0.1.1:SKILL.md\n\n---\nname: chrome-devtools-mcp\ndescription: Chrome DevTools MCP 服务器，让 AI 编码助手（Claude Code、Cursor、Copilot）直接控制和调试真实 Chrome 浏览器，实现截图、性能分析、网络请求检查、控制台调试和自动化操作\nversion: 0.1.1\nmetadata:\n openclaw:\n requires:\n bins:\n - node\n - npx\n emoji: 🔧\n homepage: https://github.com/ChromeDevTools/chrome-devtools-mcp\n---\n\n# chrome-devtools-mcp — AI 浏览器调试与自动化 MCP 工具\n\nchrome-devtools-mcp 是 Google Chrome DevTools 团队官方出品的 MCP 服务器，通过 Model Context Protocol 让 AI 编码助手获得完整的 Chrome DevTools 能力。它使用 Puppeteer 实现可靠的浏览器自动化，内置等待机制确保操作结果正确。支持 Claude Code、Cursor、VS Code Copilot、Codex 等主流 AI 工具，是 AI 驱动前端调试和 Web 自动化的首选方案。\n\n## 核心使用场景\n\n- **前端 Bug 调试**：AI 直接打开页面、查看控制台报错（含源码映射的堆栈追踪）、检查网络请求\n- **性能分析**：录制页面性能 Trace、提取可操作的优化建议，结合真实用户数据（CrUX）\n- **截图与视觉验证**：AI 截图当前页面状态，辅助 UI 回归测试和 Bug 复现\n- **Web 自动化测试**：AI 填写表单、点击按钮、导航页面，可靠等待操作完成\n- **接入已有 Chrome 实例**：连接 DevTools 远程调试端口，调试任意 Chrome 标签页\n\n## AI 辅助使用流程\n\n1. **安装配置** — AI 在 Claude Code 中执行一行命令完成 MCP 服务器安装\n2. **连接浏览器** — 服务器自动启动 Chrome，或连接指定的 DevTools 远程端口\n3. **导航目标页面** — AI 通过 MCP 工具导航到待调试的 URL\n4. **执行调试操作** — AI 截图、检查控制台、分析网络请求、录制性能 Trace\n5. **自动化交互** — AI 自动化点击/填写/滚动等用户操作\n6. **分析结果** — AI 基于 DevTools 数据给出优化建议或 Bug 定位\n\n## 关键章节导航\n\n- [安装指南](guides/01-installation.md) — Claude Code / VS Code / Cursor 多种安装方式\n- [快速开始](guides/02-quickstart.md) — 调试工作流、截图、性能分析、网络检查\n- [高级用法](guides/03-advanced-usage.md) — 连接已有浏览器、Slim 模式、隐私配置\n- [故障排查](troubleshooting.md) — 浏览器连接失败、超时、权限问题\n\n## AI 助手能力\n\n使用本技能时，AI 可以：\n\n- ✅ 通过 `claude mcp add` 或 `/plugin install` 完成 MCP 服务器安装\n- ✅ 导航到任意 URL 并等待页面加载完成\n- ✅ 截图当前页面状态（支持全页面 / 视口截图）\n- ✅ 读取浏览器控制台消息（含源码映射的完整堆栈追踪）\n- ✅ 检查网络请求（URL / 状态码 / 响应头 / 响应体）\n- ✅ 录制性能 Trace 并提取关键性能指标\n- ✅ 执行点击、填写表单、键盘输入等自动化操作\n- ✅ 执行任意 JavaScript 代码并获取返回值\n\n## 核心功能\n\n- ✅ **截图** — 全页面或视口截图，辅助视觉 Bug 复现\n- ✅ **控制台检查** — 读取 log/warn/error 消息，含源码映射堆栈\n- ✅ **网络分析** — 拦截和检查所有 HTTP/HTTPS 请求\n- ✅ **性能分析** — 录制 DevTools Trace，结合 CrUX 真实用户数据\n- ✅ **浏览器自动化** — 基于 Puppeteer 的可靠点击/填写/导航\n- ✅ **JavaScript 执行** — 在页面上下文中执行任意 JS\n- ✅ **Slim 模式** — 精简工具集，适合基础浏览任务\n- ✅ **无头模式** — `--headless` 支持 CI 环境\n- ✅ **远程连接** — 连接已有 Chrome DevTools 远程调试端口\n- ✅ **多 AI 工具** — Claude Code / Cursor / VS Code / Copilot / Codex\n\n## 快速安装示例\n\n```bash\n# Claude Code CLI 安装（推荐）\nclaude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest\n\n# Claude Code 插件安装（含 Skills）\n/plugin marketplace add ChromeDevTools/chrome-devtools-mcp\n/plugin install chrome-devtools-mcp\n\n# VS Code CLI 安装\ncode --add-mcp '{\"name\":\"chrome-devtools\",\"command\":\"npx\",\"args\":[\"-y\",\"chrome-devtools-mcp\"]}'\n```\n\n**MCP 配置（手动添加到 settings.json）：**\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\"]\n }\n }\n}\n```\n\n## 安装要求\n\n| 依赖 | 版本要求 |\n|------|---------|\n| Node.js | >= 20.19（最新 LTS 维护版） |\n| Chrome | 当前稳定版或更新 |\n| npm | 任意版本 |\n\n## 项目链接\n\n- GitHub：https://github.com/ChromeDevTools/chrome-devtools-mcp\n- 工具参考：https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md\n- Slim 工具参考：https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/slim-tool-reference.md\n- 故障排查：https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md\n\nFile v0.1.1:_meta.json\n\n{\n \"ownerId\": \"kn7c5ry95ff7x22mt3fx6j0q3d81p8t3\",\n \"slug\": \"cn-chrome-devtools-mcp\",\n \"version\": \"0.1.1\",\n \"publishedAt\": 1781603244718\n}\n\nFile v0.1.1:guides/01-installation.md\n\n# 安装指南\n\n## 适用场景\n\n- 在 Claude Code 中安装 chrome-devtools-mcp\n- 在 VS Code / Cursor 等其他 AI 工具中配置\n- 验证 MCP 服务器正常连接\n\n---\n\n## Claude Code 安装（推荐两种方式）\n\n### 方式一：CLI 安装（仅 MCP）\n\n> **AI 可自动执行**\n\n```bash\nclaude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest\n```\n\n`--scope user` 表示对当前用户全局生效（所有项目可用）。\n\n### 方式二：插件安装（MCP + Skills，功能更完整）\n\n在 Claude Code 会话中执行：\n\n```\n/plugin marketplace add ChromeDevTools/chrome-devtools-mcp\n/plugin install chrome-devtools-mcp\n```\n\n**安装完成后必须重启 Claude Code**，然后用 `/skills` 验证 Skills 已加载。\n\n> 若出现 `Failed to clone repository` 错误（企业网络 HTTPS 受限），改用方式一 CLI 安装。\n\n---\n\n## VS Code / Copilot 安装\n\n### CLI 一键安装\n\n```bash\n# macOS / Linux\ncode --add-mcp '{\"name\":\"io.github.ChromeDevTools/chrome-devtools-mcp\",\"command\":\"npx\",\"args\":[\"-y\",\"chrome-devtools-mcp\"],\"env\":{}}'\n\n# Windows PowerShell\ncode --add-mcp '{\"\"\"name\"\"\":\"\"\"io.github.ChromeDevTools/chrome-devtools-mcp\"\"\",\"\"\"command\"\"\":\"\"\"npx\"\"\",\"\"\"args\"\"\":[\"\"\"-y\"\"\",\"\"\"chrome-devtools-mcp\"\"\"]}'\n```\n\n### 手动配置\n\n在 VS Code MCP 配置文件中添加：\n\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\"]\n }\n }\n}\n```\n\n---\n\n## Cursor 安装\n\n进入 `Cursor Settings → MCP → New MCP Server`，使用以下配置：\n\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\"]\n }\n }\n}\n```\n\n---\n\n## Windows 特殊配置（Codex）\n\nWindows 下需要指定 Chrome 路径和增加超时时间，在 `.codex/config.toml` 中：\n\n```toml\n[mcp_servers.chrome-devtools]\ncommand = \"cmd\"\nargs = [\"/c\", \"npx\", \"-y\", \"chrome-devtools-mcp@latest\"]\nenv = { SystemRoot=\"C:\\\\Windows\", PROGRAMFILES=\"C:\\\\Program Files\" }\nstartup_timeout_ms = 20_000\n```\n\n---\n\n## 验证安装\n\n安装并重启 AI 工具后，在对话中发送：\n\n```\n请截图 https://example.com 的当前状态\n```\n\n**期望结果：** AI 打开浏览器，导航到 example.com，并返回截图。\n\n或检查 MCP 服务器列表：\n\n```bash\n# Claude Code\nclaude mcp list\n```\n\n---\n\n## 隐私设置（可选）\n\n禁用 Google 使用统计收集：\n\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\", \"--no-usage-statistics\"]\n }\n }\n}\n```\n\n或通过环境变量：\n```bash\nexport CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1\n```\n\n---\n\n## 完成确认检查清单\n\n- [ ] MCP 服务器配置已添加到对应 AI 工具\n- [ ] AI 工具已重启\n- [ ] 发送截图请求，AI 成功控制浏览器并返回截图\n- [ ] （可选）`claude mcp list` 显示 chrome-devtools 已注册\n\n---\n\n## 下一步\n\n- [快速开始](02-quickstart.md) — 调试工作流、性能分析、网络检查\n\nFile v0.1.1:guides/02-quickstart.md\n\n# 快速开始\n\n## 适用场景\n\n- 用 AI 调试前端页面的 JavaScript 报错\n- 分析页面性能瓶颈\n- 检查网络请求和 API 响应\n- 执行浏览器自动化操作\n\n---\n\n## 基础工作流：调试前端 Bug\n\n典型的 AI 调试会话流程：\n\n1. **告诉 AI 访问页面**\n ```\n 请打开 http://localhost:3000，截图并检查控制台是否有报错\n ```\n\n2. **AI 返回截图 + 控制台消息**，通常包含带源码映射的完整错误堆栈\n\n3. **深入检查**\n ```\n 查看页面所有网络请求，找出失败的 API 调用\n ```\n\n4. **执行交互**\n ```\n 点击\"Submit\"按钮，然后截图表单提交后的状态\n ```\n\n---\n\n## 截图\n\n```\n请截图 https://www.example.com 的首屏效果\n```\n\n```\n截图 http://localhost:3000/dashboard，确认侧边栏是否正确显示\n```\n\nAI 会返回图片供直接查看，无需手动操作浏览器。\n\n---\n\n## 控制台调试\n\n```\n打开 http://localhost:3000，读取控制台的所有错误和警告\n```\n\nchrome-devtools-mcp 会返回：\n- 错误消息文本\n- 源码映射后的真实文件名和行号（不是 bundle.js:1）\n- 完整调用堆栈\n\n---\n\n## 网络请求检查\n\n```\n访问 http://localhost:3000/api-test，检查所有网络请求，\n特别关注失败的请求（4xx/5xx）\n```\n\nAI 可以看到：\n- 请求 URL 和方法\n- 响应状态码\n- 请求/响应头\n- 响应体内容\n\n---\n\n## 性能分析\n\n```\n录制 https://example.com 的页面性能，找出主要性能瓶颈\n```\n\nAI 会：\n1. 录制 DevTools Performance Trace\n2. 提取关键指标（FCP、LCP、TBT 等）\n3. 结合真实用户数据（CrUX）对比实验室数据\n4. 给出可操作的优化建议\n\n禁用 CrUX 真实用户数据（隐私敏感场景）：\n```json\n\"args\": [\"-y\", \"chrome-devtools-mcp@latest\", \"--no-performance-crux\"]\n```\n\n---\n\n## 浏览器自动化\n\n```\n在 http://localhost:3000/login 填写用户名 \"test@example.com\"\n和密码 \"password123\"，点击登录，截图登录结果\n```\n\n```\n在搜索框输入 \"Claude Code\"，点击搜索按钮，截图结果页面\n```\n\nPuppeteer 底层确保每次操作都等待执行完成，比简单的 `setTimeout` 更可靠。\n\n---\n\n## 执行 JavaScript\n\n```\n在当前页面执行 document.title，返回页面标题\n```\n\n```\n执行 window.localStorage.getItem('user_token')，查看当前存储的 token\n```\n\n---\n\n## 完成确认检查清单\n\n- [ ] 成功截图本地开发服务器页面\n- [ ] 读取到控制台错误消息（含源码映射堆栈）\n- [ ] 检查到网络请求列表\n- [ ] 执行了至少一次自动化点击/填写操作\n\n---\n\n## 下一步\n\n- [高级用法](03-advanced-usage.md) — 连接已有浏览器、Slim 模式、CI 无头模式\n\nFile v0.1.1:guides/03-advanced-usage.md\n\n# 高级用法\n\n## 连接已有 Chrome 实例\n\n不启动新浏览器，而是连接到已运行的 Chrome：\n\n```bash\n# 先启动 Chrome 并开启远程调试\n/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome \\\n --remote-debugging-port=9222\n\n# 配置 MCP 连接到该端口\n```\n\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\",\n \"--browser-url=http://127.0.0.1:9222\"]\n }\n }\n}\n```\n\n适用场景：调试已登录状态的页面、连接特定浏览器 Profile。\n\n---\n\n## Slim 模式（轻量基础功能）\n\n只需要截图、导航等基础操作时，使用 `--slim` 减少工具数量：\n\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\", \"--slim\", \"--headless\"]\n }\n }\n}\n```\n\nSlim 模式工具集更小，适合 Token 敏感场景，完整工具列表见 [Slim 工具参考](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/slim-tool-reference.md)。\n\n---\n\n## 无头模式（CI 环境）\n\n在 CI/CD 中使用，无需图形界面：\n\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\", \"--headless\"]\n }\n }\n}\n```\n\nCI 环境会自动禁用使用统计（检测到 `CI` 环境变量）。\n\n---\n\n## 禁用自动更新检查\n\n```bash\nexport CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS=1\n```\n\n---\n\n## 工具参考速查\n\n完整 MCP 工具列表（从对话中直接调用）：\n\n| 工具类别 | 说明 |\n|---------|------|\n| `screenshot` | 截图当前页面 |\n| `navigate` | 导航到 URL |\n| `click` | 点击元素 |\n| `type` | 输入文本 |\n| `evaluate` | 执行 JavaScript |\n| `network` | 检查网络请求 |\n| `console` | 读取控制台消息 |\n| `performance` | 录制性能 Trace |\n\n完整工具文档：https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md\n\n---\n\n## 完成确认检查清单\n\n- [ ] 成功连接到已有 Chrome 实例（如有需要）\n- [ ] Slim 模式测试通过（如需精简功能）\n- [ ] 无头模式在 CI 脚本中运行成功\n\n---\n\n## 相关链接\n\n- [故障排查](../troubleshooting.md)\n- [完整工具参考](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md)\n- [设计原则](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/design-principles.md)\n\nFile v0.1.1:skill-card.md\n\n## Description:\n\nGuides agents to install and use Chrome DevTools MCP so they can control and debug a real Chrome browser for screenshots, console inspection, network analysis, performance tracing, and browser automation.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[cn-big-cabbage](https://clawhub.ai/user/cn-big-cabbage)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and engineers use this skill to configure an AI coding assistant with Chrome DevTools MCP and run browser-based debugging workflows against local or remote web pages.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The skill enables broad AI-assisted control over Chrome, including page navigation, JavaScript execution, screenshots, console inspection, and network inspection.\n\nMitigation: Use a dedicated disposable browser profile and avoid personal or production logged-in sessions.\n\nRisk: The artifact recommends unpinned runtime installation with @latest.\n\nMitigation: Pin chrome-devtools-mcp to a reviewed npm package version before deployment.\n\nRisk: The artifact includes an example that reads a user token from localStorage.\n\nMitigation: Do not ask the agent to read tokens, cookies, authorization headers, or other secrets.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/cn-big-cabbage/skills/cn-chrome-devtools-mcp)\n- [Chrome DevTools MCP project homepage](https://github.com/ChromeDevTools/chrome-devtools-mcp)\n- [Chrome DevTools MCP tool reference](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md)\n- [Chrome DevTools MCP slim tool reference](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/slim-tool-reference.md)\n- [Chrome DevTools MCP troubleshooting](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown guidance with shell commands and JSON or TOML configuration snippets]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May guide an agent to operate Chrome and inspect browser state after the MCP server is configured.]\n\n## Skill Version(s):\n\n0.1.1 (source: frontmatter and release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nFile v0.1.1:troubleshooting.md\n\n# 故障排查\n\n## 安装问题\n\n---\n\n### 问题 1：Chrome 未找到或无法启动\n\n**难度：** 低\n\n**症状：** `Error: Chrome not found` 或 `Could not find Chrome (ver. xxx)`\n\n**排查步骤：**\n```bash\n# macOS\nls /Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome\n\n# Linux\nwhich google-chrome || which chromium-browser\n\n# Windows\n\"C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe\" --version\n```\n\n**解决方案：**\n- 安装 Chrome：从 https://www.google.com/chrome/ 下载稳定版\n- 或在 MCP 配置中指定 Chrome 路径：\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\",\n \"--executable-path=/usr/bin/google-chrome\"]\n }\n }\n}\n```\n\n---\n\n### 问题 2：Node.js 版本不兼容\n\n**难度：** 低\n\n**症状：** `engines.node is not satisfied` 或 `SyntaxError: Unexpected token`\n\n**排查步骤：**\n```bash\nnode --version\n# 需要 >= 20.19\n```\n\n**解决方案：**\n```bash\n# 使用 nvm 安装最新 LTS\nnvm install --lts\nnvm use --lts\n\n# 或使用 fnm\nfnm install --lts\nfnm use --lts\n\n# 验证\nnode --version # 应显示 v20.x.x 或更高\n```\n\n---\n\n### 问题 3：`claude mcp add` 命令后 MCP 未生效\n\n**难度：** 低\n\n**症状：** 安装命令成功但 AI 无法使用浏览器工具\n\n**排查步骤：**\n```bash\nclaude mcp list\n# 确认 chrome-devtools 已在列表中\n```\n\n**解决方案：**\n- **必须重启 Claude Code** — 安装后 MCP 不会自动热加载\n- 如果使用插件安装方式，需执行 `/plugin install chrome-devtools-mcp` 后再重启\n- 重启后发送截图请求验证：`请截图 https://example.com`\n\n---\n\n## 使用问题\n\n---\n\n### 问题 4：MCP 服务器启动超时\n\n**难度：** 中\n\n**症状：** `MCP server failed to start within timeout` 或连接请求挂起\n\n**常见原因：**\n- Chrome 首次启动下载组件（概率 40%）\n- 系统资源不足（概率 30%）\n- 防火墙拦截了 DevTools 协议端口（概率 20%）\n- npm/npx 缓存损坏（概率 10%）\n\n**解决方案：**\n```bash\n# 清理 npx 缓存后重试\nnpx clear-npx-cache\nnpx -y chrome-devtools-mcp@latest --headless\n\n# Windows 增加超时时间（在 .codex/config.toml 中）\n# startup_timeout_ms = 20_000\n```\n\n---\n\n### 问题 5：截图返回空白或黑屏\n\n**难度：** 中\n\n**症状：** AI 调用截图工具成功但返回全黑图片，或图片只有背景色\n\n**常见原因：**\n- 页面尚未完全渲染（SPA 水合延迟）\n- 目标页面需要登录\n- CSS 动画未完成\n\n**解决方案：**\n```\n# 让 AI 等待后再截图\n请打开 http://localhost:3000，等待 2 秒后截图\n\n# 或者先检查控制台是否有渲染错误\n打开 http://localhost:3000，读取控制台所有错误，然后截图\n```\n\n如果页面需要登录状态：\n```bash\n# 先启动带已有 Profile 的 Chrome\n/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome \\\n --remote-debugging-port=9222 \\\n --user-data-dir=$HOME/.chrome-debug-profile\n\n# 在 Profile 中手动登录后，配置 MCP 连接\n```\n\n---\n\n### 问题 6：网络请求检查不到数据\n\n**难度：** 中\n\n**症状：** `network` 工具返回空列表，或只显示部分请求\n\n**原因：** MCP 服务器在页面加载后才连接，错过了初始请求\n\n**解决方案：**\n```\n# 让 AI 先连接，再触发请求\n请导航到 http://localhost:3000/api-test，开始监听网络请求，\n然后点击\"加载数据\"按钮，最后显示所有捕获到的网络请求\n```\n\n或让 AI 刷新页面后立即捕获：\n```\n导航到 http://localhost:3000，强制刷新页面，然后立即检查所有网络请求\n```\n\n---\n\n### 问题 7：JavaScript 执行返回 undefined 或报错\n\n**难度：** 低\n\n**症状：** `evaluate` 工具执行成功但结果为 `undefined`\n\n**常见原因：**\n- 返回值需要显式 `return` 语句\n- 异步代码未等待\n\n**解决方案：**\n```\n# 错误：缺少 return\n执行 JavaScript: document.title\n\n# 正确：添加 return\n执行 JavaScript: return document.title\n\n# 异步代码\n执行 JavaScript: return await fetch('/api/data').then(r => r.json())\n```\n\n---\n\n## 网络/环境问题\n\n---\n\n### 问题 8：企业网络环境 HTTPS 插件安装失败\n\n**难度：** 中\n\n**症状：** `Failed to clone repository` 或 `/plugin marketplace add` 报网络错误\n\n**解决方案：**\n\n改用 CLI 方式安装（不依赖 Git clone）：\n```bash\nclaude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest\n```\n\n或手动添加 JSON 配置到 `~/.claude/settings.json`：\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\"]\n }\n }\n}\n```\n\n---\n\n### 问题 9：Windows 下 Chrome 找不到或路径错误\n\n**难度：** 中\n\n**症状：** Windows 环境下 `spawn chrome ENOENT` 或 `Chrome not found`\n\n**解决方案：**\n\n在 `.codex/config.toml` 中显式配置：\n```toml\n[mcp_servers.chrome-devtools]\ncommand = \"cmd\"\nargs = [\"/c\", \"npx\", \"-y\", \"chrome-devtools-mcp@latest\"]\nenv = { SystemRoot=\"C:\\\\Windows\", PROGRAMFILES=\"C:\\\\Program Files\" }\nstartup_timeout_ms = 20_000\n```\n\n或在 MCP 配置中指定 Chrome 路径：\n```json\n{\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\",\n \"--executable-path=C:\\\\Program Files\\\\Google\\\\Chrome\\\\Application\\\\chrome.exe\"]\n}\n```\n\n---\n\n### 问题 10：连接已有 Chrome 实例失败（`--browser-url` 无响应）\n\n**难度：** 高\n\n**症状：** 使用 `--browser-url=http://127.0.0.1:9222` 但连接超时\n\n**排查步骤：**\n```bash\n# 确认 Chrome 远程调试端口已开启\ncurl http://127.0.0.1:9222/json/version\n\n# 期望返回 JSON，如：\n# {\"Browser\": \"Chrome/130.0.0.0\", \"webSocketDebuggerUrl\": \"...\"}\n```\n\n**常见原因：**\n- Chrome 没有以 `--remote-debugging-port=9222` 启动（概率 60%）\n- 端口被防火墙拦截（概率 25%）\n- Chrome 已有实例正在运行且未开启调试（概率 15%）\n\n**解决方案：**\n```bash\n# 关闭所有现有 Chrome 进程\npkill -f \"Google Chrome\" # macOS/Linux\n\n# 重新以调试模式启动\n/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome \\\n --remote-debugging-port=9222 \\\n --no-first-run \\\n --no-default-browser-check\n\n# 验证连接\ncurl http://127.0.0.1:9222/json/version\n```\n\n---\n\n## 通用诊断\n\n```bash\n# 检查 MCP 服务器状态\nclaude mcp list\n\n# 手动测试 MCP 服务器启动\nnpx -y chrome-devtools-mcp@latest --headless\n\n# 检查 Node.js 和 Chrome 版本\nnode --version\ngoogle-chrome --version || /Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome --version\n```\n\n**GitHub Issues：** https://github.com/ChromeDevTools/chrome-devtools-mcp/issues\n\n**完整故障排查文档：** https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md\n\nArchive v0.1.0: 7 files, 11923 bytes\n\nFiles: guides/01-installation.md (3032b), guides/02-quickstart.md (2699b), guides/03-advanced-usage.md (2463b), skill-card.md (3000b), SKILL.md (4926b), troubleshooting.md (6793b), _meta.json (141b)\n\nFile v0.1.0:SKILL.md\n\n---\nname: chrome-devtools-mcp\ndescription: Chrome DevTools MCP 服务器，让 AI 编码助手（Claude Code、Cursor、Copilot）直接控制和调试真实 Chrome 浏览器，实现截图、性能分析、网络请求检查、控制台调试和自动化操作\nversion: 0.1.0\nmetadata:\n openclaw_requires: \">=1.0.0\"\n emoji: 🔧\n homepage: https://github.com/ChromeDevTools/chrome-devtools-mcp\n---\n\n# chrome-devtools-mcp — AI 浏览器调试与自动化 MCP 工具\n\nchrome-devtools-mcp 是 Google Chrome DevTools 团队官方出品的 MCP 服务器，通过 Model Context Protocol 让 AI 编码助手获得完整的 Chrome DevTools 能力。它使用 Puppeteer 实现可靠的浏览器自动化，内置等待机制确保操作结果正确。支持 Claude Code、Cursor、VS Code Copilot、Codex 等主流 AI 工具，是 AI 驱动前端调试和 Web 自动化的首选方案。\n\n## 核心使用场景\n\n- **前端 Bug 调试**：AI 直接打开页面、查看控制台报错（含源码映射的堆栈追踪）、检查网络请求\n- **性能分析**：录制页面性能 Trace、提取可操作的优化建议，结合真实用户数据（CrUX）\n- **截图与视觉验证**：AI 截图当前页面状态，辅助 UI 回归测试和 Bug 复现\n- **Web 自动化测试**：AI 填写表单、点击按钮、导航页面，可靠等待操作完成\n- **接入已有 Chrome 实例**：连接 DevTools 远程调试端口，调试任意 Chrome 标签页\n\n## AI 辅助使用流程\n\n1. **安装配置** — AI 在 Claude Code 中执行一行命令完成 MCP 服务器安装\n2. **连接浏览器** — 服务器自动启动 Chrome，或连接指定的 DevTools 远程端口\n3. **导航目标页面** — AI 通过 MCP 工具导航到待调试的 URL\n4. **执行调试操作** — AI 截图、检查控制台、分析网络请求、录制性能 Trace\n5. **自动化交互** — AI 自动化点击/填写/滚动等用户操作\n6. **分析结果** — AI 基于 DevTools 数据给出优化建议或 Bug 定位\n\n## 关键章节导航\n\n- [安装指南](guides/01-installation.md) — Claude Code / VS Code / Cursor 多种安装方式\n- [快速开始](guides/02-quickstart.md) — 调试工作流、截图、性能分析、网络检查\n- [高级用法](guides/03-advanced-usage.md) — 连接已有浏览器、Slim 模式、隐私配置\n- [故障排查](troubleshooting.md) — 浏览器连接失败、超时、权限问题\n\n## AI 助手能力\n\n使用本技能时，AI 可以：\n\n- ✅ 通过 `claude mcp add` 或 `/plugin install` 完成 MCP 服务器安装\n- ✅ 导航到任意 URL 并等待页面加载完成\n- ✅ 截图当前页面状态（支持全页面 / 视口截图）\n- ✅ 读取浏览器控制台消息（含源码映射的完整堆栈追踪）\n- ✅ 检查网络请求（URL / 状态码 / 响应头 / 响应体）\n- ✅ 录制性能 Trace 并提取关键性能指标\n- ✅ 执行点击、填写表单、键盘输入等自动化操作\n- ✅ 执行任意 JavaScript 代码并获取返回值\n\n## 核心功能\n\n- ✅ **截图** — 全页面或视口截图，辅助视觉 Bug 复现\n- ✅ **控制台检查** — 读取 log/warn/error 消息，含源码映射堆栈\n- ✅ **网络分析** — 拦截和检查所有 HTTP/HTTPS 请求\n- ✅ **性能分析** — 录制 DevTools Trace，结合 CrUX 真实用户数据\n- ✅ **浏览器自动化** — 基于 Puppeteer 的可靠点击/填写/导航\n- ✅ **JavaScript 执行** — 在页面上下文中执行任意 JS\n- ✅ **Slim 模式** — 精简工具集，适合基础浏览任务\n- ✅ **无头模式** — `--headless` 支持 CI 环境\n- ✅ **远程连接** — 连接已有 Chrome DevTools 远程调试端口\n- ✅ **多 AI 工具** — Claude Code / Cursor / VS Code / Copilot / Codex\n\n## 快速安装示例\n\n```bash\n# Claude Code CLI 安装（推荐）\nclaude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest\n\n# Claude Code 插件安装（含 Skills）\n/plugin marketplace add ChromeDevTools/chrome-devtools-mcp\n/plugin install chrome-devtools-mcp\n\n# VS Code CLI 安装\ncode --add-mcp '{\"name\":\"chrome-devtools\",\"command\":\"npx\",\"args\":[\"-y\",\"chrome-devtools-mcp\"]}'\n```\n\n**MCP 配置（手动添加到 settings.json）：**\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\"]\n }\n }\n}\n```\n\n## 安装要求\n\n| 依赖 | 版本要求 |\n|------|---------|\n| Node.js | >= 20.19（最新 LTS 维护版） |\n| Chrome | 当前稳定版或更新 |\n| npm | 任意版本 |\n\n## 项目链接\n\n- GitHub：https://github.com/ChromeDevTools/chrome-devtools-mcp\n- 工具参考：https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md\n- Slim 工具参考：https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/slim-tool-reference.md\n- 故障排查：https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md\n\nFile v0.1.0:_meta.json\n\n{\n \"ownerId\": \"kn7c5ry95ff7x22mt3fx6j0q3d81p8t3\",\n \"slug\": \"cn-chrome-devtools-mcp\",\n \"version\": \"0.1.0\",\n \"publishedAt\": 1776818615165\n}\n\nFile v0.1.0:guides/01-installation.md\n\n# 安装指南\n\n## 适用场景\n\n- 在 Claude Code 中安装 chrome-devtools-mcp\n- 在 VS Code / Cursor 等其他 AI 工具中配置\n- 验证 MCP 服务器正常连接\n\n---\n\n## Claude Code 安装（推荐两种方式）\n\n### 方式一：CLI 安装（仅 MCP）\n\n> **AI 可自动执行**\n\n```bash\nclaude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest\n```\n\n`--scope user` 表示对当前用户全局生效（所有项目可用）。\n\n### 方式二：插件安装（MCP + Skills，功能更完整）\n\n在 Claude Code 会话中执行：\n\n```\n/plugin marketplace add ChromeDevTools/chrome-devtools-mcp\n/plugin install chrome-devtools-mcp\n```\n\n**安装完成后必须重启 Claude Code**，然后用 `/skills` 验证 Skills 已加载。\n\n> 若出现 `Failed to clone repository` 错误（企业网络 HTTPS 受限），改用方式一 CLI 安装。\n\n---\n\n## VS Code / Copilot 安装\n\n### CLI 一键安装\n\n```bash\n# macOS / Linux\ncode --add-mcp '{\"name\":\"io.github.ChromeDevTools/chrome-devtools-mcp\",\"command\":\"npx\",\"args\":[\"-y\",\"chrome-devtools-mcp\"],\"env\":{}}'\n\n# Windows PowerShell\ncode --add-mcp '{\"\"\"name\"\"\":\"\"\"io.github.ChromeDevTools/chrome-devtools-mcp\"\"\",\"\"\"command\"\"\":\"\"\"npx\"\"\",\"\"\"args\"\"\":[\"\"\"-y\"\"\",\"\"\"chrome-devtools-mcp\"\"\"]}'\n```\n\n### 手动配置\n\n在 VS Code MCP 配置文件中添加：\n\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\"]\n }\n }\n}\n```\n\n---\n\n## Cursor 安装\n\n进入 `Cursor Settings → MCP → New MCP Server`，使用以下配置：\n\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\"]\n }\n }\n}\n```\n\n---\n\n## Windows 特殊配置（Codex）\n\nWindows 下需要指定 Chrome 路径和增加超时时间，在 `.codex/config.toml` 中：\n\n```toml\n[mcp_servers.chrome-devtools]\ncommand = \"cmd\"\nargs = [\"/c\", \"npx\", \"-y\", \"chrome-devtools-mcp@latest\"]\nenv = { SystemRoot=\"C:\\\\Windows\", PROGRAMFILES=\"C:\\\\Program Files\" }\nstartup_timeout_ms = 20_000\n```\n\n---\n\n## 验证安装\n\n安装并重启 AI 工具后，在对话中发送：\n\n```\n请截图 https://example.com 的当前状态\n```\n\n**期望结果：** AI 打开浏览器，导航到 example.com，并返回截图。\n\n或检查 MCP 服务器列表：\n\n```bash\n# Claude Code\nclaude mcp list\n```\n\n---\n\n## 隐私设置（可选）\n\n禁用 Google 使用统计收集：\n\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\", \"--no-usage-statistics\"]\n }\n }\n}\n```\n\n或通过环境变量：\n```bash\nexport CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1\n```\n\n---\n\n## 完成确认检查清单\n\n- [ ] MCP 服务器配置已添加到对应 AI 工具\n- [ ] AI 工具已重启\n- [ ] 发送截图请求，AI 成功控制浏览器并返回截图\n- [ ] （可选）`claude mcp list` 显示 chrome-devtools 已注册\n\n---\n\n## 下一步\n\n- [快速开始](02-quickstart.md) — 调试工作流、性能分析、网络检查\n\nFile v0.1.0:guides/02-quickstart.md\n\n# 快速开始\n\n## 适用场景\n\n- 用 AI 调试前端页面的 JavaScript 报错\n- 分析页面性能瓶颈\n- 检查网络请求和 API 响应\n- 执行浏览器自动化操作\n\n---\n\n## 基础工作流：调试前端 Bug\n\n典型的 AI 调试会话流程：\n\n1. **告诉 AI 访问页面**\n ```\n 请打开 http://localhost:3000，截图并检查控制台是否有报错\n ```\n\n2. **AI 返回截图 + 控制台消息**，通常包含带源码映射的完整错误堆栈\n\n3. **深入检查**\n ```\n 查看页面所有网络请求，找出失败的 API 调用\n ```\n\n4. **执行交互**\n ```\n 点击\"Submit\"按钮，然后截图表单提交后的状态\n ```\n\n---\n\n## 截图\n\n```\n请截图 https://www.example.com 的首屏效果\n```\n\n```\n截图 http://localhost:3000/dashboard，确认侧边栏是否正确显示\n```\n\nAI 会返回图片供直接查看，无需手动操作浏览器。\n\n---\n\n## 控制台调试\n\n```\n打开 http://localhost:3000，读取控制台的所有错误和警告\n```\n\nchrome-devtools-mcp 会返回：\n- 错误消息文本\n- 源码映射后的真实文件名和行号（不是 bundle.js:1）\n- 完整调用堆栈\n\n---\n\n## 网络请求检查\n\n```\n访问 http://localhost:3000/api-test，检查所有网络请求，\n特别关注失败的请求（4xx/5xx）\n```\n\nAI 可以看到：\n- 请求 URL 和方法\n- 响应状态码\n- 请求/响应头\n- 响应体内容\n\n---\n\n## 性能分析\n\n```\n录制 https://example.com 的页面性能，找出主要性能瓶颈\n```\n\nAI 会：\n1. 录制 DevTools Performance Trace\n2. 提取关键指标（FCP、LCP、TBT 等）\n3. 结合真实用户数据（CrUX）对比实验室数据\n4. 给出可操作的优化建议\n\n禁用 CrUX 真实用户数据（隐私敏感场景）：\n```json\n\"args\": [\"-y\", \"chrome-devtools-mcp@latest\", \"--no-performance-crux\"]\n```\n\n---\n\n## 浏览器自动化\n\n```\n在 http://localhost:3000/login 填写用户名 \"test@example.com\"\n和密码 \"password123\"，点击登录，截图登录结果\n```\n\n```\n在搜索框输入 \"Claude Code\"，点击搜索按钮，截图结果页面\n```\n\nPuppeteer 底层确保每次操作都等待执行完成，比简单的 `setTimeout` 更可靠。\n\n---\n\n## 执行 JavaScript\n\n```\n在当前页面执行 document.title，返回页面标题\n```\n\n```\n执行 window.localStorage.getItem('user_token')，查看当前存储的 token\n```\n\n---\n\n## 完成确认检查清单\n\n- [ ] 成功截图本地开发服务器页面\n- [ ] 读取到控制台错误消息（含源码映射堆栈）\n- [ ] 检查到网络请求列表\n- [ ] 执行了至少一次自动化点击/填写操作\n\n---\n\n## 下一步\n\n- [高级用法](03-advanced-usage.md) — 连接已有浏览器、Slim 模式、CI 无头模式\n\nFile v0.1.0:guides/03-advanced-usage.md\n\n# 高级用法\n\n## 连接已有 Chrome 实例\n\n不启动新浏览器，而是连接到已运行的 Chrome：\n\n```bash\n# 先启动 Chrome 并开启远程调试\n/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome \\\n --remote-debugging-port=9222\n\n# 配置 MCP 连接到该端口\n```\n\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\",\n \"--browser-url=http://127.0.0.1:9222\"]\n }\n }\n}\n```\n\n适用场景：调试已登录状态的页面、连接特定浏览器 Profile。\n\n---\n\n## Slim 模式（轻量基础功能）\n\n只需要截图、导航等基础操作时，使用 `--slim` 减少工具数量：\n\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\", \"--slim\", \"--headless\"]\n }\n }\n}\n```\n\nSlim 模式工具集更小，适合 Token 敏感场景，完整工具列表见 [Slim 工具参考](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/slim-tool-reference.md)。\n\n---\n\n## 无头模式（CI 环境）\n\n在 CI/CD 中使用，无需图形界面：\n\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\", \"--headless\"]\n }\n }\n}\n```\n\nCI 环境会自动禁用使用统计（检测到 `CI` 环境变量）。\n\n---\n\n## 禁用自动更新检查\n\n```bash\nexport CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS=1\n```\n\n---\n\n## 工具参考速查\n\n完整 MCP 工具列表（从对话中直接调用）：\n\n| 工具类别 | 说明 |\n|---------|------|\n| `screenshot` | 截图当前页面 |\n| `navigate` | 导航到 URL |\n| `click` | 点击元素 |\n| `type` | 输入文本 |\n| `evaluate` | 执行 JavaScript |\n| `network` | 检查网络请求 |\n| `console` | 读取控制台消息 |\n| `performance` | 录制性能 Trace |\n\n完整工具文档：https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md\n\n---\n\n## 完成确认检查清单\n\n- [ ] 成功连接到已有 Chrome 实例（如有需要）\n- [ ] Slim 模式测试通过（如需精简功能）\n- [ ] 无头模式在 CI 脚本中运行成功\n\n---\n\n## 相关链接\n\n- [故障排查](../troubleshooting.md)\n- [完整工具参考](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md)\n- [设计原则](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/design-principles.md)\n\nFile v0.1.0:skill-card.md\n\n## Description:
\nChrome DevTools MCP lets AI coding assistants control and debug real Chrome browsers for screenshots, performance analysis, network inspection, console debugging, and browser automation.
\n\nThis skill is ready for commercial/non-commercial use.
\n\n## Publisher:
\n[cn-big-cabbage](https://clawhub.ai/user/cn-big-cabbage)
\n\n### License/Terms of Use:
\nMIT-0
\n\n\n## Use Case:
\nDevelopers and engineers use this skill to configure and operate Chrome DevTools MCP from AI coding assistants, so the assistant can inspect pages, reproduce frontend issues, capture screenshots, analyze performance, and automate browser interactions.
\n\n### Deployment Geography for Use:
\nGlobal
\n\n## Known Risks and Mitigations:
\nRisk: The skill can give an AI assistant broad access to real Chrome browser sessions, including logged-in pages.
\nMitigation: Use a project-scoped MCP registration when possible, a dedicated temporary Chrome profile, and disposable test accounts; avoid personal or production logged-in sessions.
\nRisk: Browser inspection can expose tokens, cookies, localStorage values, sensitive headers, or response bodies in assistant-visible output.
\nMitigation: Do not ask the AI to read secrets, and redact sensitive headers, response bodies, cookies, tokens, and localStorage values before sharing outputs.
\nRisk: Installing or running an unpinned MCP package can change behavior unexpectedly.
\nMitigation: Review before installing and use a pinned package version for repeatable environments.
\n\n\n## Reference(s):
\n- [ClawHub listing](https://clawhub.ai/cn-big-cabbage/cn-chrome-devtools-mcp)
\n- [Chrome DevTools MCP homepage](https://github.com/ChromeDevTools/chrome-devtools-mcp)
\n- [Tool reference](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md)
\n- [Slim tool reference](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/slim-tool-reference.md)
\n- [Troubleshooting](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md)
\n- [Design principles](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/design-principles.md)
\n\n\n## Skill Output:
\n**Output Type(s):** [text, markdown, shell commands, configuration, guidance]
\n**Output Format:** [Markdown with inline shell commands and JSON or TOML configuration snippets]
\n**Output Parameters:** [1D]
\n**Other Properties Related to Output:** [May include browser screenshots, console and network details, performance trace summaries, and setup commands.]
\n\n## Skill Version(s):
\n0.1.0 (source: frontmatter and release evidence)
\n\n## Ethical Considerations:
\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.
\n\nFile v0.1.0:troubleshooting.md\n\n# 故障排查\n\n## 安装问题\n\n---\n\n### 问题 1：Chrome 未找到或无法启动\n\n**难度：** 低\n\n**症状：** `Error: Chrome not found` 或 `Could not find Chrome (ver. xxx)`\n\n**排查步骤：**\n```bash\n# macOS\nls /Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome\n\n# Linux\nwhich google-chrome || which chromium-browser\n\n# Windows\n\"C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe\" --version\n```\n\n**解决方案：**\n- 安装 Chrome：从 https://www.google.com/chrome/ 下载稳定版\n- 或在 MCP 配置中指定 Chrome 路径：\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\",\n \"--executable-path=/usr/bin/google-chrome\"]\n }\n }\n}\n```\n\n---\n\n### 问题 2：Node.js 版本不兼容\n\n**难度：** 低\n\n**症状：** `engines.node is not satisfied` 或 `SyntaxError: Unexpected token`\n\n**排查步骤：**\n```bash\nnode --version\n# 需要 >= 20.19\n```\n\n**解决方案：**\n```bash\n# 使用 nvm 安装最新 LTS\nnvm install --lts\nnvm use --lts\n\n# 或使用 fnm\nfnm install --lts\nfnm use --lts\n\n# 验证\nnode --version # 应显示 v20.x.x 或更高\n```\n\n---\n\n### 问题 3：`claude mcp add` 命令后 MCP 未生效\n\n**难度：** 低\n\n**症状：** 安装命令成功但 AI 无法使用浏览器工具\n\n**排查步骤：**\n```bash\nclaude mcp list\n# 确认 chrome-devtools 已在列表中\n```\n\n**解决方案：**\n- **必须重启 Claude Code** — 安装后 MCP 不会自动热加载\n- 如果使用插件安装方式，需执行 `/plugin install chrome-devtools-mcp` 后再重启\n- 重启后发送截图请求验证：`请截图 https://example.com`\n\n---\n\n## 使用问题\n\n---\n\n### 问题 4：MCP 服务器启动超时\n\n**难度：** 中\n\n**症状：** `MCP server failed to start within timeout` 或连接请求挂起\n\n**常见原因：**\n- Chrome 首次启动下载组件（概率 40%）\n- 系统资源不足（概率 30%）\n- 防火墙拦截了 DevTools 协议端口（概率 20%）\n- npm/npx 缓存损坏（概率 10%）\n\n**解决方案：**\n```bash\n# 清理 npx 缓存后重试\nnpx clear-npx-cache\nnpx -y chrome-devtools-mcp@latest --headless\n\n# Windows 增加超时时间（在 .codex/config.toml 中）\n# startup_timeout_ms = 20_000\n```\n\n---\n\n### 问题 5：截图返回空白或黑屏\n\n**难度：** 中\n\n**症状：** AI 调用截图工具成功但返回全黑图片，或图片只有背景色\n\n**常见原因：**\n- 页面尚未完全渲染（SPA 水合延迟）\n- 目标页面需要登录\n- CSS 动画未完成\n\n**解决方案：**\n```\n# 让 AI 等待后再截图\n请打开 http://localhost:3000，等待 2 秒后截图\n\n# 或者先检查控制台是否有渲染错误\n打开 http://localhost:3000，读取控制台所有错误，然后截图\n```\n\n如果页面需要登录状态：\n```bash\n# 先启动带已有 Profile 的 Chrome\n/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome \\\n --remote-debugging-port=9222 \\\n --user-data-dir=$HOME/.chrome-debug-profile\n\n# 在 Profile 中手动登录后，配置 MCP 连接\n```\n\n---\n\n### 问题 6：网络请求检查不到数据\n\n**难度：** 中\n\n**症状：** `network` 工具返回空列表，或只显示部分请求\n\n**原因：** MCP 服务器在页面加载后才连接，错过了初始请求\n\n**解决方案：**\n```\n# 让 AI 先连接，再触发请求\n请导航到 http://localhost:3000/api-test，开始监听网络请求，\n然后点击\"加载数据\"按钮，最后显示所有捕获到的网络请求\n```\n\n或让 AI 刷新页面后立即捕获：\n```\n导航到 http://localhost:3000，强制刷新页面，然后立即检查所有网络请求\n```\n\n---\n\n### 问题 7：JavaScript 执行返回 undefined 或报错\n\n**难度：** 低\n\n**症状：** `evaluate` 工具执行成功但结果为 `undefined`\n\n**常见原因：**\n- 返回值需要显式 `return` 语句\n- 异步代码未等待\n\n**解决方案：**\n```\n# 错误：缺少 return\n执行 JavaScript: document.title\n\n# 正确：添加 return\n执行 JavaScript: return document.title\n\n# 异步代码\n执行 JavaScript: return await fetch('/api/data').then(r => r.json())\n```\n\n---\n\n## 网络/环境问题\n\n---\n\n### 问题 8：企业网络环境 HTTPS 插件安装失败\n\n**难度：** 中\n\n**症状：** `Failed to clone repository` 或 `/plugin marketplace add` 报网络错误\n\n**解决方案：**\n\n改用 CLI 方式安装（不依赖 Git clone）：\n```bash\nclaude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest\n```\n\n或手动添加 JSON 配置到 `~/.claude/settings.json`：\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\"]\n }\n }\n}\n```\n\n---\n\n### 问题 9：Windows 下 Chrome 找不到或路径错误\n\n**难度：** 中\n\n**症状：** Windows 环境下 `spawn chrome ENOENT` 或 `Chrome not found`\n\n**解决方案：**\n\n在 `.codex/config.toml` 中显式配置：\n```toml\n[mcp_servers.chrome-devtools]\ncommand = \"cmd\"\nargs = [\"/c\", \"npx\", \"-y\", \"chrome-devtools-mcp@latest\"]\nenv = { SystemRoot=\"C:\\\\Windows\", PROGRAMFILES=\"C:\\\\Program Files\" }\nstartup_timeout_ms = 20_000\n```\n\n或在 MCP 配置中指定 Chrome 路径：\n```json\n{\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\",\n \"--executable-path=C:\\\\Program Files\\\\Google\\\\Chrome\\\\Application\\\\chrome.exe\"]\n}\n```\n\n---\n\n### 问题 10：连接已有 Chrome 实例失败（`--browser-url` 无响应）\n\n**难度：** 高\n\n**症状：** 使用 `--browser-url=http://127.0.0.1:9222` 但连接超时\n\n**排查步骤：**\n```bash\n# 确认 Chrome 远程调试端口已开启\ncurl http://127.0.0.1:9222/json/version\n\n# 期望返回 JSON，如：\n# {\"Browser\": \"Chrome/130.0.0.0\", \"webSocketDebuggerUrl\": \"...\"}\n```\n\n**常见原因：**\n- Chrome 没有以 `--remote-debugging-port=9222` 启动（概率 60%）\n- 端口被防火墙拦截（概率 25%）\n- Chrome 已有实例正在运行且未开启调试（概率 15%）\n\n**解决方案：**\n```bash\n# 关闭所有现有 Chrome 进程\npkill -f \"Google Chrome\" # macOS/Linux\n\n# 重新以调试模式启动\n/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome \\\n --remote-debugging-port=9222 \\\n --no-first-run \\\n --no-default-browser-check\n\n# 验证连接\ncurl http://127.0.0.1:9222/json/version\n```\n\n---\n\n## 通用诊断\n\n```bash\n# 检查 MCP 服务器状态\nclaude mcp list\n\n# 手动测试 MCP 服务器启动\nnpx -y chrome-devtools-mcp@latest --headless\n\n# 检查 Node.js 和 Chrome 版本\nnode --version\ngoogle-chrome --version || /Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome --version\n```\n\n**GitHub Issues：** https://github.com/ChromeDevTools/chrome-devtools-mcp/issues\n\n**完整故障排查文档：** https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md","readmeExcerpt":"Skill: Skill Owner: cn-big-cabbage Summary: Chrome DevTools MCP 服务器，让 AI 编码助手（Claude Code、Cursor、Copilot）直接控制和调试真实 Chrome 浏览器，实现截图、性能分析、网络请求检查、控制台调试和自动化操作 Tags: latest:0.1.1 Version history: v0.1.1 | 2026-06-16T09:47:24.718Z | auto - Bumped version to 0.1.1. - Updated metadata in SKILL.md to specify required binaries (node, npx) for better environment validation. - Added _meta.json file for improved metadata manageme","codeSnippets":[],"executableExamples":[{"language":"bash","snippet":"# Claude Code CLI 安装（推荐）\nclaude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest\n\n# Claude Code 插件安装（含 Skills）\n/plugin marketplace add ChromeDevTools/chrome-devtools-mcp\n/plugin install chrome-devtools-mcp\n\n# VS Code CLI 安装\ncode --add-mcp '{\"name\":\"chrome-devtools\",\"command\":\"npx\",\"args\":[\"-y\",\"chrome-devtools-mcp\"]}'"},{"language":"json","snippet":"{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\"]\n }\n }\n}"},{"language":"bash","snippet":"claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest"},{"language":"text","snippet":"/plugin marketplace add ChromeDevTools/chrome-devtools-mcp\n/plugin install chrome-devtools-mcp"},{"language":"bash","snippet":"# macOS / Linux\ncode --add-mcp '{\"name\":\"io.github.ChromeDevTools/chrome-devtools-mcp\",\"command\":\"npx\",\"args\":[\"-y\",\"chrome-devtools-mcp\"],\"env\":{}}'\n\n# Windows PowerShell\ncode --add-mcp '{\"\"\"name\"\"\":\"\"\"io.github.ChromeDevTools/chrome-devtools-mcp\"\"\",\"\"\"command\"\"\":\"\"\"npx\"\"\",\"\"\"args\"\"\":[\"\"\"-y\"\"\",\"\"\"chrome-devtools-mcp\"\"\"]}'"},{"language":"json","snippet":"{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\"]\n }\n }\n}"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: chrome-devtools-mcp\ndescription: Chrome DevTools MCP 服务器，让 AI 编码助手（Claude Code、Cursor、Copilot）直接控制和调试真实 Chrome 浏览器，实现截图、性能分析、网络请求检查、控制台调试和自动化操作\nversion: 0.1.1\nmetadata:\n openclaw:\n requires:\n bins:\n - node\n - npx\n emoji: 🔧\n homepage: https://github.com/ChromeDevTools/chrome-devtools-mcp\n---\n\n# chrome-devtools-mcp — AI 浏览器调试与自动化 MCP 工具\n\nchrome-devtools-mcp 是 Google Chrome DevTools 团队官方出品的 MCP 服务器，通过 Model Context Protocol 让 AI 编码助手获得完整的 Chrome DevTools 能力。它使用 Puppeteer 实现可靠的浏览器自动化，内置等待机制确保操作结果正确。支持 Claude Code、Cursor、VS Code Copilot、Codex 等主流 AI 工具，是 AI 驱动前端调试和 Web 自动化的首选方案。\n\n## 核心使用场景\n\n- **前端 Bug 调试**：AI 直接打开页面、查看控制台报错（含源码映射的堆栈追踪）、检查网络请求\n- **性能分析**：录制页面性能 Trace、提取可操作的优化建议，结合真实用户数据（CrUX）\n- **截图与视觉验证**：AI 截图当前页面状态，辅助 UI 回归测试和 Bug 复现\n- **Web 自动化测试**：AI 填写表单、点击按钮、导航页面，可靠等待操作完成\n- **接入已有 Chrome 实例**：连接 DevTools 远程调试端口，调试任意 Chrome 标签页\n\n## AI 辅助使用流程\n\n1. **安装配置** — AI 在 Claude Code 中执行一行命令完成 MCP 服务器安装\n2. **连接浏览器** — 服务器自动启动 Chrome，或连接指定的 DevTools 远程端口\n3. **导航目标页面** — AI 通过 MCP 工具导航到待调试的 URL\n4. **执行调试操作** — AI 截图、检查控制台、分析网络请求、录制性能 Trace\n5. **自动化交互** — AI 自动化点击/填写/滚动等用户操作\n6. **分析结果** — AI 基于 DevTools 数据给出优化建议或 Bug 定位\n\n## 关键章节导航\n\n- [安装指南](guides/01-installation.md) — Claude Code / VS Code / Cursor 多种安装方式\n- [快速开始](guides/02-quickstart.md) — 调试工作流、截图、性能分析、网络检查\n- [高级用法](guides/03-advanced-usage.md) — 连接已有浏览器、Slim 模式、隐私配置\n- [故障排查](troubleshooting.md) — 浏览器连接失败、超时、权限问题\n\n## AI 助手能力\n\n使用本技能时，AI 可以：\n\n- ✅ 通过 `claude mcp add` 或 `/plugin install` 完成 MCP 服务器安装\n- ✅ 导航到任意 URL 并等待页面加载完成\n- ✅ 截图当前页面状态（支持全页面 / 视口截图）\n- ✅ 读取浏览器控制台消息（含源码映射的完整堆栈追踪）\n- ✅ 检查网络请求（URL / 状态码 / 响应头 / 响应体）\n- ✅ 录制性能 Trace 并提取关键性能指标\n- ✅ 执行点击、填写表单、键盘输入等自动化操作\n- ✅ 执行任意 JavaScript 代码并获取返回值\n\n## 核心功能\n\n- ✅ **截图** — 全页面或视口截图，辅助视觉 Bug 复现\n- ✅ **控制台检查** — 读取 log/warn/error 消息，含源码映射堆栈\n- ✅ **网络分析** — 拦截和检查所有 HTTP/HTTPS 请求\n- ✅ **性能分析** — 录制 DevTools Trace，结合 CrUX 真实用户数据\n- ✅ **浏览器自动化** — 基于 Puppeteer 的可靠点击/填写/导航\n- ✅ **JavaScript 执行** — 在页面上下文中执行任意 JS\n- ✅ **Slim 模式** — 精简工具集，适合基础浏览任务\n- ✅ **无头模式** — `--headless` 支持 CI 环境\n- ✅ **远程连接** — 连接已有 Chrome DevTools 远程调试端口\n- ✅ **多 AI 工具** — Claude Code / Cursor / VS Code / Copilot / Codex\n\n## 快速安装示例\n\n```bash\n# Claude Code CLI 安装（推荐）\nclaude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest\n\n# Claude Code 插件安装（含 Skills）\n/plugin marketplace add ChromeDevTools/chrome-devtools-mcp\n/plugin install chrome-devtools-mcp\n\n# VS Code CLI 安装\ncode --add-mcp '{\"name\":\"chrome-devtools\",\"command\":\"npx\",\"args\":[\"-y\",\"chrome-devtools-mcp\"]}'\n```\n\n**MCP 配置（手动添加到 settings.json）：**\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\"]\n }\n }\n}\n```\n\n## 安装要求\n\n| 依赖 | 版本要求 |\n|------|---------|\n| Node.js | >= 20.19（最新 LTS 维护版） |\n| Chrome | 当前稳定版或更新 |\n| npm | 任意版本 |\n\n## 项目链接\n\n- GitHub：https://github.com/ChromeDevTools/chrome-devtools-mcp\n- 工具参考：https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md\n- Slim 工具参考：https://github.com/ChromeDevTools/chr"},{"path":"_meta.json","content":"{\n \"ownerId\": \"kn7c5ry95ff7x22mt3fx6j0q3d81p8t3\",\n \"slug\": \"cn-chrome-devtools-mcp\",\n \"version\": \"0.1.1\",\n \"publishedAt\": 1781603244718\n}"},{"path":"guides/01-installation.md","content":"# 安装指南\n\n## 适用场景\n\n- 在 Claude Code 中安装 chrome-devtools-mcp\n- 在 VS Code / Cursor 等其他 AI 工具中配置\n- 验证 MCP 服务器正常连接\n\n---\n\n## Claude Code 安装（推荐两种方式）\n\n### 方式一：CLI 安装（仅 MCP）\n\n> **AI 可自动执行**\n\n```bash\nclaude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest\n```\n\n`--scope user` 表示对当前用户全局生效（所有项目可用）。\n\n### 方式二：插件安装（MCP + Skills，功能更完整）\n\n在 Claude Code 会话中执行：\n\n```\n/plugin marketplace add ChromeDevTools/chrome-devtools-mcp\n/plugin install chrome-devtools-mcp\n```\n\n**安装完成后必须重启 Claude Code**，然后用 `/skills` 验证 Skills 已加载。\n\n> 若出现 `Failed to clone repository` 错误（企业网络 HTTPS 受限），改用方式一 CLI 安装。\n\n---\n\n## VS Code / Copilot 安装\n\n### CLI 一键安装\n\n```bash\n# macOS / Linux\ncode --add-mcp '{\"name\":\"io.github.ChromeDevTools/chrome-devtools-mcp\",\"command\":\"npx\",\"args\":[\"-y\",\"chrome-devtools-mcp\"],\"env\":{}}'\n\n# Windows PowerShell\ncode --add-mcp '{\"\"\"name\"\"\":\"\"\"io.github.ChromeDevTools/chrome-devtools-mcp\"\"\",\"\"\"command\"\"\":\"\"\"npx\"\"\",\"\"\"args\"\"\":[\"\"\"-y\"\"\",\"\"\"chrome-devtools-mcp\"\"\"]}'\n```\n\n### 手动配置\n\n在 VS Code MCP 配置文件中添加：\n\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\"]\n }\n }\n}\n```\n\n---\n\n## Cursor 安装\n\n进入 `Cursor Settings → MCP → New MCP Server`，使用以下配置：\n\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\"]\n }\n }\n}\n```\n\n---\n\n## Windows 特殊配置（Codex）\n\nWindows 下需要指定 Chrome 路径和增加超时时间，在 `.codex/config.toml` 中：\n\n```toml\n[mcp_servers.chrome-devtools]\ncommand = \"cmd\"\nargs = [\"/c\", \"npx\", \"-y\", \"chrome-devtools-mcp@latest\"]\nenv = { SystemRoot=\"C:\\\\Windows\", PROGRAMFILES=\"C:\\\\Program Files\" }\nstartup_timeout_ms = 20_000\n```\n\n---\n\n## 验证安装\n\n安装并重启 AI 工具后，在对话中发送：\n\n```\n请截图 https://example.com 的当前状态\n```\n\n**期望结果：** AI 打开浏览器，导航到 example.com，并返回截图。\n\n或检查 MCP 服务器列表：\n\n```bash\n# Claude Code\nclaude mcp list\n```\n\n---\n\n## 隐私设置（可选）\n\n禁用 Google 使用统计收集：\n\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\", \"--no-usage-statistics\"]\n }\n }\n}\n```\n\n或通过环境变量：\n```bash\nexport CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1\n```\n\n---\n\n## 完成确认检查清单\n\n- [ ] MCP 服务器配置已添加到对应 AI 工具\n- [ ] AI 工具已重启\n- [ ] 发送截图请求，AI 成功控制浏览器并返回截图\n- [ ] （可选）`claude mcp list` 显示 chrome-devtools 已注册\n\n---\n\n## 下一步\n\n- [快速开始](02-quickstart.md) — 调试工作流、性能分析、网络检查"},{"path":"guides/02-quickstart.md","content":"# 快速开始\n\n## 适用场景\n\n- 用 AI 调试前端页面的 JavaScript 报错\n- 分析页面性能瓶颈\n- 检查网络请求和 API 响应\n- 执行浏览器自动化操作\n\n---\n\n## 基础工作流：调试前端 Bug\n\n典型的 AI 调试会话流程：\n\n1. **告诉 AI 访问页面**\n ```\n 请打开 http://localhost:3000，截图并检查控制台是否有报错\n ```\n\n2. **AI 返回截图 + 控制台消息**，通常包含带源码映射的完整错误堆栈\n\n3. **深入检查**\n ```\n 查看页面所有网络请求，找出失败的 API 调用\n ```\n\n4. **执行交互**\n ```\n 点击\"Submit\"按钮，然后截图表单提交后的状态\n ```\n\n---\n\n## 截图\n\n```\n请截图 https://www.example.com 的首屏效果\n```\n\n```\n截图 http://localhost:3000/dashboard，确认侧边栏是否正确显示\n```\n\nAI 会返回图片供直接查看，无需手动操作浏览器。\n\n---\n\n## 控制台调试\n\n```\n打开 http://localhost:3000，读取控制台的所有错误和警告\n```\n\nchrome-devtools-mcp 会返回：\n- 错误消息文本\n- 源码映射后的真实文件名和行号（不是 bundle.js:1）\n- 完整调用堆栈\n\n---\n\n## 网络请求检查\n\n```\n访问 http://localhost:3000/api-test，检查所有网络请求，\n特别关注失败的请求（4xx/5xx）\n```\n\nAI 可以看到：\n- 请求 URL 和方法\n- 响应状态码\n- 请求/响应头\n- 响应体内容\n\n---\n\n## 性能分析\n\n```\n录制 https://example.com 的页面性能，找出主要性能瓶颈\n```\n\nAI 会：\n1. 录制 DevTools Performance Trace\n2. 提取关键指标（FCP、LCP、TBT 等）\n3. 结合真实用户数据（CrUX）对比实验室数据\n4. 给出可操作的优化建议\n\n禁用 CrUX 真实用户数据（隐私敏感场景）：\n```json\n\"args\": [\"-y\", \"chrome-devtools-mcp@latest\", \"--no-performance-crux\"]\n```\n\n---\n\n## 浏览器自动化\n\n```\n在 http://localhost:3000/login 填写用户名 \"test@example.com\"\n和密码 \"password123\"，点击登录，截图登录结果\n```\n\n```\n在搜索框输入 \"Claude Code\"，点击搜索按钮，截图结果页面\n```\n\nPuppeteer 底层确保每次操作都等待执行完成，比简单的 `setTimeout` 更可靠。\n\n---\n\n## 执行 JavaScript\n\n```\n在当前页面执行 document.title，返回页面标题\n```\n\n```\n执行 window.localStorage.getItem('user_token')，查看当前存储的 token\n```\n\n---\n\n## 完成确认检查清单\n\n- [ ] 成功截图本地开发服务器页面\n- [ ] 读取到控制台错误消息（含源码映射堆栈）\n- [ ] 检查到网络请求列表\n- [ ] 执行了至少一次自动化点击/填写操作\n\n---\n\n## 下一步\n\n- [高级用法](03-advanced-usage.md) — 连接已有浏览器、Slim 模式、CI 无头模式"},{"path":"guides/03-advanced-usage.md","content":"# 高级用法\n\n## 连接已有 Chrome 实例\n\n不启动新浏览器，而是连接到已运行的 Chrome：\n\n```bash\n# 先启动 Chrome 并开启远程调试\n/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome \\\n --remote-debugging-port=9222\n\n# 配置 MCP 连接到该端口\n```\n\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\",\n \"--browser-url=http://127.0.0.1:9222\"]\n }\n }\n}\n```\n\n适用场景：调试已登录状态的页面、连接特定浏览器 Profile。\n\n---\n\n## Slim 模式（轻量基础功能）\n\n只需要截图、导航等基础操作时，使用 `--slim` 减少工具数量：\n\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\", \"--slim\", \"--headless\"]\n }\n }\n}\n```\n\nSlim 模式工具集更小，适合 Token 敏感场景，完整工具列表见 [Slim 工具参考](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/slim-tool-reference.md)。\n\n---\n\n## 无头模式（CI 环境）\n\n在 CI/CD 中使用，无需图形界面：\n\n```json\n{\n \"mcpServers\": {\n \"chrome-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"chrome-devtools-mcp@latest\", \"--headless\"]\n }\n }\n}\n```\n\nCI 环境会自动禁用使用统计（检测到 `CI` 环境变量）。\n\n---\n\n## 禁用自动更新检查\n\n```bash\nexport CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS=1\n```\n\n---\n\n## 工具参考速查\n\n完整 MCP 工具列表（从对话中直接调用）：\n\n| 工具类别 | 说明 |\n|---------|------|\n| `screenshot` | 截图当前页面 |\n| `navigate` | 导航到 URL |\n| `click` | 点击元素 |\n| `type` | 输入文本 |\n| `evaluate` | 执行 JavaScript |\n| `network` | 检查网络请求 |\n| `console` | 读取控制台消息 |\n| `performance` | 录制性能 Trace |\n\n完整工具文档：https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md\n\n---\n\n## 完成确认检查清单\n\n- [ ] 成功连接到已有 Chrome 实例（如有需要）\n- [ ] Slim 模式测试通过（如需精简功能）\n- [ ] 无头模式在 CI 脚本中运行成功\n\n---\n\n## 相关链接\n\n- [故障排查](../troubleshooting.md)\n- [完整工具参考](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md)\n- [设计原则](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/design-principles.md)"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Chrome DevTools MCP 服务器，让 AI 编码助手（Claude Code、Cursor、Copilot）直接控制和调试真实 Chrome 浏览器，实现截图、性能分析、网络请求检查、控制台调试和自动化操作 Skill: Skill Owner: cn-big-cabbage Summary: Chrome DevTools MCP 服务器，让 AI 编码助手（Claude Code、Cursor、Copilot）直接控制和调试真实 Chrome 浏览器，实现截图、性能分析、网络请求检查、控制台调试和自动化操作 Tags: latest:0.1.1 Version history: v0.1.1 | 2026-06-16T09:47:24.718Z | auto - Bumped version to 0.1.1. - Updated metadata in SKILL.md to specify required binaries (node, npx) for better environment validation. - Added _meta.json file for improved metadata manageme","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":783,"uniquenessScore":51,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T11:52:47.064Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-11T11:52:47.064Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-11T15:15:10.710Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}