Chrome DevTools MCP Skill

Use Chrome DevTools MCP through UXC over local stdio for page navigation, DOM/a11y snapshots, network inspection, console inspection, and performance tooling, with a live-browser autoConnect default and optional browserUrl or isolated fallback modes.

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