chrome-devtools-mcp-skill

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Chrome DevTools MCP Skill

Chrome DevTools MCP 技能

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.

你可以使用本技能通过

uxc

，借助固定的stdio端点运行Chrome DevTools MCP操作。

复用

uxc

技能实现通用MCP发现、守护进程复用、JSON信封解析和错误处理。

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.

```
uxc
```
已安装且加入系统
```
PATH
```
环境变量。
```
npx
```
已加入系统
```
PATH
```
环境变量（需安装Node.js）。
如果你使用默认的实时浏览器流程，需要本地运行Chrome 144+版本，且已通过
```
chrome://inspect/#remote-debugging
```
开启远程调试功能。
首次拉取
```
chrome-devtools-mcp
```
包时需要联网。

Core Workflow (Chrome DevTools MCP-Specific)

核心工作流（Chrome DevTools MCP专属）

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

最终确定前的候选端点输入项：

官方文档给出的原始包调用形式：
- ```
npx chrome-devtools-mcp@latest
```
可靠的非交互形式：
- ```
npx -y chrome-devtools-mcp@latest
```

本技能默认的实时浏览器端点：

npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics

显式指定browser-url的端点：

npx -y chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222 --no-usage-statistics

隔离回退端点：

npx -y chrome-devtools-mcp@latest --headless --isolated --no-usage-statistics

本地运行Chrome自动连接模式：

npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics

验证官方来源的协议/路径并进行探测：

官方来源：

https://github.com/ChromeDevTools/chrome-devtools-mcp

使用以下命令探测候选端点：

uxc "npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics" -h

确认协议为MCP stdio（信封中
```
protocol == "mcp"
```
）。

显式检测认证要求：
- 运行宿主帮助命令或最小读取调用，检查信封内容。
- 默认本地stdio流程无需OAuth/API密钥。
- 绑定现有Chrome实例需要单独开启远程调试，但不需要API认证。

默认使用固定链接命令：

```
command -v chrome-devtools-mcp-cli
```

如果命令不存在则创建：

uxc link chrome-devtools-mcp-cli "npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics"

可选的显式browser-url链接：

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

可选的隔离回退链接：

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

执行前检查操作Schema：

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

优先采用先读取的交互逻辑：
- 从
```
new_page
```
  、
```
list_pages
```
  、
```
take_snapshot
```
  、
```
list_network_requests
```
  或
```
list_console_messages
```
  这类操作开始。

修改页面状态前需确认：

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

自动化流程基于JSON输出信封实现，不要依赖
```
--text
```
参数。
默认使用
```
chrome-devtools-mcp-cli
```
作为命令路径。
当你需要真实登录状态、现有标签页、网络诊断、控制台检查或性能分析时，优先使用实时浏览器默认端点。
当浏览器端远程调试可用时，优先使用
```
--autoConnect
```
参数。
仅当你有意运行带有
```
--remote-debugging-port=9222
```
参数的Chrome实例时，才使用
```
chrome-devtools-mcp-port
```
。
如果没有可调试的Chrome实例，回退使用
```
chrome-devtools-mcp-isolated
```
。
模型动作循环中优先使用
```
take_snapshot
```
而非截图。
检查网络行为时，优先使用
```
list_network_requests
```
/
```
get_network_request
```
而非原始脚本执行。

将

lighthouse_audit

、

performance_start_trace

和

take_memory_snapshot

视为重量级操作，按需使用。

仅当现有更高层级的DevTools工具无法满足需求时，再使用
```
evaluate_script
```
。

References

参考资料

Invocation patterns:
- ```
references/usage-patterns.md
```

调用模式：
- ```
references/usage-patterns.md
```