chrome-devtools-mcp-skill

Original：🇺🇸 English

Translated

1 scripts

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.

2installs

Sourceholon-run/uxc

Added on2026-03-29

NPX Install

npx skill4agent add holon-run/uxc chrome-devtools-mcp-skill

SKILL.md Content

View Translation Comparison →

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

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

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.

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

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

Prefer read-first interaction:

Start with

new_page

,

list_pages

,

take_snapshot

,

list_network_requests

, or

list_console_messages

.

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