chrome-devtools

核心概念

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

• 对于扩展工具，使用 --categoryExtensions 标志。
• 对于内存工具，使用 --memoryDebugging 标志。

页面选择：工具在当前选中的页面上操作。使用 list_pages 查看可用页面，然后使用 select_page 切换上下文。
元素交互：使用 take_snapshot 获取页面结构及元素 uid。每个元素都有一个唯一的 uid 用于交互。如果找不到元素，请重新截图——该元素可能已被移除或页面已更改。

工作流模式

在与页面交互之前

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

高效数据检索

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

工具选择

• 自动化/交互：take_snapshot（基于文本，更快，更适合自动化）
• 视觉检查：take_screenshot（当用户需要查看视觉状态时）
• 额外细节：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. 识别：从响应中获取扩展 ID，或调用 list_extensions 获取。
3. 触发操作：使用 trigger_extension_action 打开弹出窗口或侧面板（如果适用）。
4. 验证 Service Worker：使用 evaluate_script 并传入 serviceWorkerId 检查扩展状态或触发后台操作。
5. 验证页面行为：导航到扩展运行的页面，使用 take_snapshot 检查内容脚本是否注入了元素或正确修改了页面。

故障排除

如果 chrome-devtools-mcp 不够用，引导用户使用 Chrome DevTools UI：

• 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。