Skill: jolestar/chrome-devtools-mcp-skill (version 1.0.0)

--- name: chrome-devtools-mcp-skill description: 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. --- # 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`


Security scan verdicts — ClawScan: suspicious | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)