chrome-devtools-mcp-skill（chrome devtools MCP 技能）

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).

1. 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.

1. 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

1. 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

1. Prefer read-first interaction:

- Start with new_page, list_pages, take_snapshot, list_network_requests, or list_console_messages.

1. 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