chrome-devtools-cli

Name: chrome-devtools-cli
Author: appautomaton

5installs1forks

How to install chrome-devtools-cli?

appautomaton/webmaton/chrome-devtools-cli

$npx -y skills add appautomaton/webmaton --skill chrome-devtools-cli

Installs into the current project.

Summary

Use when a task needs Chrome DevTools from the shell: automate a live Chrome browser with chrome-devtools, inspect accessibility snapshots and UIDs, click/fill/navigate pages, evaluate JavaScript, inspect console and network activity, take screenshots, run Lighthouse, capture p

Files · 1

View on GitHub

SKILL.md

1	# chrome-devtools-cli
2
3	The package is `chrome-devtools-mcp`, but the action CLI is `chrome-devtools`. Use `chrome-devtools <tool> ...` for this skill. Do not use `npx chrome-devtools-mcp@latest` unless you are configuring an MCP server outside this skill.
4
5	## Core Workflow
6
7	```bash
8	chrome-devtools new_page "https://example.com"
9	chrome-devtools take_snapshot
10	chrome-devtools click "1_3"
11	chrome-devtools fill "1_5" "search text"
12	chrome-devtools press_key "Enter"
13	```
14
15	`take_snapshot` returns accessibility-tree UIDs such as `1_3`. Always act on UIDs from the latest snapshot. Re-snapshot after navigation, reloads, or major DOM updates.
16
17	## Operating Rules
18
19	- Run tools directly; the background daemon starts implicitly on first real action and preserves browser state.
20	- Do not run `start`, `status`, or `stop` before every action. Use them only for setup, custom launch flags, or troubleshooting.
21	- Use `chrome-devtools <command> --help` for exact syntax. Output defaults to Markdown; add `--output-format=json` when structured output is useful.
22	- Prefer snapshots over screenshots for deciding what to click or fill. Use screenshots for visual proof, layout inspection, or reports.
23	- Use `evaluate_script`, console, and network commands when debugging runtime behavior; use Lighthouse and performance tracing for page-quality/performance work.
24
25	## Common Tasks
26
27	```bash
28	chrome-devtools list_pages
29	chrome-devtools navigate_page --url "https://example.com"
30	chrome-devtools navigate_page --type "reload" --ignoreCache=true
31	chrome-devtools evaluate_script "() => document.title"
32	chrome-devtools list_console_messages --types error
33	chrome-devtools list_network_requests --pageSize 50
34	chrome-devtools take_screenshot --filePath page.png
35	chrome-devtools lighthouse_audit --mode "navigation"
36	chrome-devtools performance_start_trace --reload=true --autoStop=false --filePath trace.json.gz
37	chrome-devtools performance_stop_trace
38	```
39
40	For a broader command map, read `references/cli-reference.md`.
41
42	## Setup
43
44	If this is the first time using the CLI or `chrome-devtools` is missing, read `references/installation.md`. Installation is a one-time prerequisite, not part of the regular workflow.
45
46	## References
47
48	- `references/cli-reference.md` — command groups, daemon behavior, output modes, and troubleshooting commands
49	- `references/installation.md` — global install and PATH troubleshooting

People who liked this also viewed

6 picks

Type

chrome-devtools-cli

5installs1forks

View on GitHub

How to install chrome-devtools-cli?

appautomaton/webmaton/chrome-devtools-cli

$npx -y skills add appautomaton/webmaton --skill chrome-devtools-cli

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# chrome-devtools-cli
2
3	The package is `chrome-devtools-mcp`, but the action CLI is `chrome-devtools`. Use `chrome-devtools <tool> ...` for this skill. Do not use `npx chrome-devtools-mcp@latest` unless you are configuring an MCP server outside this skill.
4
5	## Core Workflow
6
7	```bash
8	chrome-devtools new_page "https://example.com"
9	chrome-devtools take_snapshot
10	chrome-devtools click "1_3"
11	chrome-devtools fill "1_5" "search text"
12	chrome-devtools press_key "Enter"
13	```
14
15	`take_snapshot` returns accessibility-tree UIDs such as `1_3`. Always act on UIDs from the latest snapshot. Re-snapshot after navigation, reloads, or major DOM updates.
16
17	## Operating Rules
18
19	- Run tools directly; the background daemon starts implicitly on first real action and preserves browser state.
20	- Do not run `start`, `status`, or `stop` before every action. Use them only for setup, custom launch flags, or troubleshooting.
21	- Use `chrome-devtools <command> --help` for exact syntax. Output defaults to Markdown; add `--output-format=json` when structured output is useful.
22	- Prefer snapshots over screenshots for deciding what to click or fill. Use screenshots for visual proof, layout inspection, or reports.
23	- Use `evaluate_script`, console, and network commands when debugging runtime behavior; use Lighthouse and performance tracing for page-quality/performance work.
24
25	## Common Tasks
26
27	```bash
28	chrome-devtools list_pages
29	chrome-devtools navigate_page --url "https://example.com"
30	chrome-devtools navigate_page --type "reload" --ignoreCache=true
31	chrome-devtools evaluate_script "() => document.title"
32	chrome-devtools list_console_messages --types error
33	chrome-devtools list_network_requests --pageSize 50
34	chrome-devtools take_screenshot --filePath page.png
35	chrome-devtools lighthouse_audit --mode "navigation"
36	chrome-devtools performance_start_trace --reload=true --autoStop=false --filePath trace.json.gz
37	chrome-devtools performance_stop_trace
38	```
39
40	For a broader command map, read `references/cli-reference.md`.
41
42	## Setup
43
44	If this is the first time using the CLI or `chrome-devtools` is missing, read `references/installation.md`. Installation is a one-time prerequisite, not part of the regular workflow.
45
46	## References
47
48	- `references/cli-reference.md` — command groups, daemon behavior, output modes, and troubleshooting commands
49	- `references/installation.md` — global install and PATH troubleshooting

People who liked this also viewed

6 picks

Type