Chrome DevTools MCP Skill
Use this skill to run Chrome DevTools MCP operations through uxc using a fixed stdio endpoint.
Reuse the uxc skill for generic MCP discovery, daemon reuse, JSON envelope parsing, and error handling.
Prerequisites
- -
uxc is installed and available in PATH. - INLINECODE4 is available in
PATH (Node.js installed). - Chrome 144+ is running locally with remote debugging enabled from
chrome://inspect/#remote-debugging if you use the default live-browser flow. - Network access is available for first-time
chrome-devtools-mcp package fetch.
Core Workflow (Chrome DevTools MCP-Specific)
Endpoint candidate inputs before finalizing:
- - Raw package form from official docs:
-
npx chrome-devtools-mcp@latest
- - Reliable non-interactive form:
-
npx -y chrome-devtools-mcp@latest
- - Default live-browser endpoint for this skill:
-
npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics
- - Explicit browser-url endpoint:
-
npx -y chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222 --no-usage-statistics
- - Fallback isolated endpoint:
-
npx -y chrome-devtools-mcp@latest --headless --isolated --no-usage-statistics
- - Running local Chrome auto-connect mode:
- INLINECODE13
- 1. Verify protocol/path from official source and probe:
- Official source:
-
https://github.com/ChromeDevTools/chrome-devtools-mcp
- probe candidate endpoints with:
-
uxc "npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics" -h
- Confirm protocol is MCP stdio (
protocol == "mcp" in envelope).
- 2. Detect auth requirement explicitly:
- Run host help or a minimal read call and inspect envelope.
- Default local stdio flow requires no OAuth/API key.
- Existing Chrome attachment requires remote debugging to be enabled separately, but not API auth.
- 3. Use a fixed link command by default:
-
command -v chrome-devtools-mcp-cli
- If missing, create it:
-
uxc link chrome-devtools-mcp-cli "npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics"
- Optional explicit browser-url link:
-
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"
- Optional isolated fallback link:
-
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. Inspect operation schema before execution:
-
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. Prefer read-first interaction:
- Start with
new_page,
list_pages,
take_snapshot,
list_network_requests, or
list_console_messages.
- 6. Confirm before mutating page state:
-
click
-
fill
-
fill_form
-
press_key
-
upload_file
-
evaluate_script
- INLINECODE39
Guardrails
- - Keep automation on the JSON output envelope; do not rely on
--text. - Use
chrome-devtools-mcp-cli as the default command path. - Prefer the live-browser default endpoint when you need real logged-in state, current tabs, network diagnostics, console inspection, or performance analysis.
- Prefer
--autoConnect first when browser-side remote debugging is available. - Use
chrome-devtools-mcp-port only when you intentionally run a Chrome instance with --remote-debugging-port=9222. - If no debuggable Chrome is available, fallback to
chrome-devtools-mcp-isolated. - Prefer
take_snapshot over screenshots for model-action loops. - Prefer
list_network_requests / get_network_request over raw script evaluation when inspecting network behavior. - Treat
lighthouse_audit, performance_start_trace, and take_memory_snapshot as heavier operations; use them intentionally. - Use
evaluate_script only when an existing higher-level DevTools tool cannot answer the question.
References
- INLINECODE53
Chrome DevTools MCP 技能
使用此技能通过固定 stdio 端点运行 uxc 的 Chrome DevTools MCP 操作。
复用 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
- 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
- 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
networkrequests -h
- chrome-devtools-mcp-cli lighthouse_audit -h
- 5. 优先使用先读后交互:
- 从 new
page、listpages、take
snapshot、listnetwork
requests 或 listconsole_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。
- 在模型-动作循环中,优先使用 takesnapshot 而非截图。
- 在检查网络行为时,优先使用 listnetworkrequests / getnetworkrequest 而非原始脚本评估。
- 将 lighthouseaudit、performancestarttrace 和 takememorysnapshot 视为较重操作;有目的地使用它们。
- 仅在现有高级 DevTools 工具无法回答问题时使用 evaluate_script。
参考
- references/usage-patterns.md