SuperAPI AI 工具集

chrome-devtools-mcp-skill

测试与质量

查看项目

更新于 10-16 08:48

技能介绍

用途:该技能通过 uxc 以固定 stdio 端点运行 Chrome DevTools MCP 操作,覆盖页面导航、DOM/无障碍快照、网络检查、控制台检查与性能工具。通用 MCP 发现、守护进程复用、JSON 信封解析与错误处理复用 uxc 技能。

前提:uxc 与 npx 需在 PATH 中(已安装 Node.js);使用默认实时浏览器流程时,本地需运行 Chrome 144+ 并在 chrome://inspect/#remote-debugging 启用远程调试;首次拉取 chrome-devtools-mcp 包需要网络。

端点候选:官方原始形式 npx chrome-devtools-mcp@latest;可靠非交互形式 npx -y chrome-devtools-mcp@latest;默认实时浏览器端点 npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics;显式浏览器地址 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。

用法:先用 uxc "npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics" -h 探测端点,确认协议为 MCP stdio(信封中 protocol == "mcp")。默认本地 stdio 流程无需 OAuth/API 密钥;附加已有 Chrome 需单独启用远程调试,但不需要 API 认证。默认创建固定链接命令:uxc link chrome-devtools-mcp-cli "npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics";可选 chrome-devtools-mcp-port 与 chrome-devtools-mcp-isolated 链接。执行前用 chrome-devtools-mcp-cli new_page -h 等查看操作模式。优先只读交互(new_page、list_pages、take_snapshot、list_network_requests、list_console_messages),变更页面状态前确认(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。