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.
• npx 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:
• npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics

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

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

• Invocation patterns:
• references/usage-patterns.md