Chrome DevTools MCP 技能

使用此技能通过 uxc 运行 Chrome DevTools MCP 操作，使用固定的 stdio 端点。

复用 uxc 技能进行通用 MCP 发现、守护进程复用、JSON 信封解析和错误处理。

前提条件

• uxc 已安装并在 PATH 中可用。
• npx 已安装并在 PATH 中可用（已安装 Node.js）。
• 如果使用默认的实时浏览器流程，Chrome 144+ 需要在本地运行，并从 chrome://inspect/#remote-debugging 启用远程调试。
• 首次获取 chrome-devtools-mcp 包时需要网络访问。

核心工作流（Chrome DevTools MCP 专用）

在最终确定端点之前，可以尝试以下候选输入：

• 官方文档中的原始包形式：
  • npx chrome-devtools-mcp@latest
• 可靠的非交互形式：
  • npx -y chrome-devtools-mcp@latest
• 本技能的默认实时浏览器端点：
  • npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics
• 显式指定浏览器 URL 的端点：
  • npx -y chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222 --no-usage-statistics
• 回退的隔离端点：
  • npx -y chrome-devtools-mcp@latest --headless --isolated --no-usage-statistics
• 运行本地 Chrome 的自动连接模式：
  • npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics

1. 从官方来源验证协议/路径并进行探测：
   • 官方来源：
     • https://github.com/ChromeDevTools/chrome-devtools-mcp
   • 使用以下方式探测候选端点：
     • uxc "npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics" -h
   • 确认协议是 MCP stdio（信封中的 protocol == "mcp"）。
2. 明确检测认证要求：
   • 运行主机帮助或最小的读取调用，并检查信封。
   • 默认的本地 stdio 流程不需要 OAuth/API 密钥。
   • 附加到现有 Chrome 需要单独启用远程调试，但不需要 API 认证。
3. 默认使用固定的链接命令：
   • command -v chrome-devtools-mcp-cli
   • 如果不存在，创建它：
     • uxc link chrome-devtools-mcp-cli "npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics"
   • 可选的显式浏览器 URL 链接：
     • command -v chrome-devtools-mcp-port
     • uxc link chrome-devtools-mcp-port "npx -y chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222 --no-usage-statistics"
   • 可选的隔离回退链接：
     • command -v chrome-devtools-mcp-isolated
     • uxc link chrome-devtools-mcp-isolated "npx -y chrome-devtools-mcp@latest --headless --isolated --no-usage-statistics"
   • chrome-devtools-mcp-cli -h
4. 在执行前检查操作模式：
   • chrome-devtools-mcp-cli new_page -h
   • chrome-devtools-mcp-cli take_snapshot -h
   • chrome-devtools-mcp-cli list_network_requests -h
   • chrome-devtools-mcp-cli lighthouse_audit -h
5. 优先进行只读交互：
   • 从 new_page、list_pages、take_snapshot、list_network_requests 或 list_console_messages 开始。
6. 在更改页面状态前进行确认：
   • click
   • fill
   • fill_form
   • press_key
   • upload_file
   • evaluate_script
   • handle_dialog

防护措施

• 保持自动化基于 JSON 输出信封；不要依赖 --text。
• 使用 chrome-devtools-mcp-cli 作为默认命令路径。
• 当需要真实的登录状态、当前标签页、网络诊断、控制台检查或性能分析时，优先使用实时浏览器默认端点。
• 当浏览器端远程调试可用时，优先使用 --autoConnect。
• 仅当您有意运行带有 --remote-debugging-port=9222 的 Chrome 实例时，才使用 chrome-devtools-mcp-port。
• 如果没有可调试的 Chrome，则回退到 chrome-devtools-mcp-isolated。
• 在模型-动作循环中，优先使用 take_snapshot 而非屏幕截图。
• 在检查网络行为时，优先使用 list_network_requests / get_network_request 而非原始脚本评估。
• 将 lighthouse_audit、performance_start_trace 和 take_memory_snapshot 视为较重操作，请有目的地使用。
• 仅当没有更高级别的 DevTools 工具能回答问题时，才使用 evaluate_script。

参考资料

• 调用模式：
  • references/usage-patterns.md