Chrome DevTools MCP Skill

SkillWeb & browsing

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.

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the Chrome DevTools MCP Skill skill

What this skill tells your AI

The instructions your AI receives, as published by holon-run/uxc in skills/chrome-devtools-mcp-skill/SKILL.md and read by ahel’s review.

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

Signals

GitHub stars
113
Forks
7
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
chrome-devtools-mcp-skill
Source
github.com/holon-run/uxc