chrome-devtools

核心概念

浏览器生命周期：浏览器在首次工具调用时自动启动，并使用持久化的 Chrome 配置文件。可通过 MCP 服务配置中的 CLI 参数进行配置：npx chrome-devtools-mcp@latest --help。 可通过提供以下标志启用额外的工具：

• 如需扩展工具，请使用 --categoryExtensions 标志。
• 如需内存工具，请使用 --memoryDebugging 标志。

页面定位：页面级工具需要 pageId 参数来定位特定页面。使用 list_pages 查看可用页面及其 ID（例如 pageId: 1），或使用通过 new_page 创建页面时返回的 ID。 注意：对于 evaluate_script，定位页面时 pageId 为必填项。但是，当启用 --categoryExtensions 时，pageId 为可选项，你可以改为传入 serviceWorkerId，以便在扩展后台 Service Worker 中执行求值。 元素交互：使用 take_snapshot 获取带有元素 uid 的页面结构。每个元素都有一个唯一的 uid 用于交互。如果找不到某个元素，请重新获取快照 —— 该元素可能已被移除，或者页面已发生变化。

工作流模式

与页面交互之前

1. 导航：navigate_page 或 new_page
2. 等待：如果你知道要查找的内容，使用 wait_for 确保内容已加载。
3. 快照：使用带 pageId 的 take_snapshot 了解页面结构
4. 交互：使用快照中的元素 uid 进行 click、fill 等操作，并传入对应的 pageId。

高效获取数据

• 对于大型输出（截图、快照、追踪），使用 filePath 参数
• 使用分页（pageIdx、pageSize）和过滤（types）来最小化数据量
• 在输入操作上设置 includeSnapshot: false，除非你需要更新后的页面状态

工具选择

• 自动化/交互：take_snapshot（基于文本，速度更快，更适合自动化）
• 视觉检查：take_screenshot（当用户需要查看视觉状态时）
• CSS 与样式检查：使用 get_css_styles 检查匹配的规则、层叠和 CSS 变量。将输出视为权威且完整的结果。
• 附加细节：对于 get_css_styles 或 take_snapshot 无法提供的运行时 DOM/JS 数据，使用 evaluate_script。

并行执行

你可以并行发送多个工具调用，但要保持正确的顺序：导航 → 等待 → 快照 → 交互。

测试扩展

继续之前：扩展工具（install_extension、list_extensions 等）仅在 MCP 服务以 --categoryExtensions 标志启动时可用。如果这些工具不在你的工具列表中，请停止并让用户更新其 MCP 服务配置：

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

更新后，用户必须重启 MCP 服务（或其 AI 客户端），更改才会生效。

1. 安装：使用 install_extension 并传入未打包扩展的路径。
2. 识别：从响应中或通过调用 list_extensions 获取扩展 ID。
3. 触发操作：如适用，使用 trigger_extension_action 打开弹出窗口或侧边面板。
4. 验证 Service Worker：使用带 serviceWorkerId 的 evaluate_script（省略 pageId 和 args）检查扩展状态或触发后台操作。在页面中求值时，传入 pageId（省略 serviceWorkerId）。
5. 验证页面行为：导航到扩展运行的页面，并使用 take_snapshot 检查内容脚本是否正确注入了元素或修改了页面。

故障排除

如果 chrome-devtools-mcp 功能不足，请引导用户使用 Chrome DevTools 界面：

• https://developer.chrome.com/docs/devtools
• https://developer.chrome.com/docs/devtools/ai-assistance

如果启动 chrome-devtools-mcp 或 Chrome 时出现错误，请参阅 https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md。