Chrome DevTools MCP Skill

SKILL.md

---
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`