devtools

Name: devtools
Author: henkisdabro

28installs9forks

How to install devtools?

henkisdabro/wookstar-claude-plugins/devtools

$npx -y skills add henkisdabro/wookstar-claude-plugins --skill devtools

Installs into the current project.

Summary

Chrome DevTools MCP setup and live-browser debugging for visual app inspection, console/network/performance triage, and automation. Use when the user asks to set up browser debugging, launch Chrome with DevTools, configure chrome-devtools-mcp, see what my app looks like, take scr

Files · 1

View on GitHub

SKILL.md

1	# Chrome DevTools MCP
2
3	GitHub Repository: https://github.com/ChromeDevTools/chrome-devtools-mcp
4
5	Without browser access, Claude is "coding blindfolded" - making changes without seeing results. The Chrome DevTools MCP server provides specialised tools across these categories:
6
7	\| Category \| Capabilities \|
8	\|----------\|--------------\|
9	\| Visual Inspection \| Take screenshots, capture DOM snapshots, see rendered output \|
10	\| Console & Logging \| Read console messages, catch JavaScript errors, debug issues \|
11	\| Network Analysis \| Inspect API requests/responses, analyse headers, debug fetch calls \|
12	\| Performance \| Record traces, measure Core Web Vitals (LCP, CLS, TBT), identify bottlenecks \|
13	\| User Simulation \| Click elements, fill forms, drag-and-drop, handle dialogs \|
14	\| Device Emulation \| Simulate mobile viewports, throttle CPU/network, test responsive design \|
15
16	## Quick Start Workflow
17
18	Execute these steps in order:
19
20	### Step 1: Detect Environment
21
22	```bash
23	bash scripts/detect_environment.sh
24	```
25
26	Returns one of: `windows`, `linux`, or `wsl2`
27
28	### Step 2: Verify Chrome Installation
29
30	```bash
31	bash scripts/check_chrome.sh <environment>
32	```
33
34	Outputs `status:installed` or `status:not_installed`. If not installed, see [references/chrome-installation.md](references/chrome-installation.md) for installation options.
35
36	IMPORTANT: Do not proceed until Chrome is installed and verified.
37
38	### Step 3: Check MCP Server Status
39
40	```bash
41	claude mcp list \| grep -i chrome
42	```
43
44	If not installed:
45
46	```bash
47	claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222
48	```
49
50	For advanced configuration options and alternative connection methods, see [references/mcp-configuration.md](references/mcp-configuration.md).
51
52	### Step 4: Detect Running Dev Server
53
54	```bash
55	bash scripts/detect_dev_server.sh
56	```
57
58	Checks ports 5173, 5174, 5175, 3000, 3001, 8080, and 8000. If no dev server is running and one is needed, offer to start it.
59
60	### Step 5: Launch Chrome with Debugging
61
62	```bash
63	bash scripts/launch_chrome.sh <environment> <url> [headed]
64	```
65
66	- `<environment>`: `windows`, `linux`, or `wsl2`
67	- `<url>`: Target URL (e.g., `http://localhost:5173`)
68	- `[headed]`: Optional - pass `headed` for visible browser, omit for headless (default)
69
70	### Step 6: Verify Connection
71
72	```bash
73	curl -s http://127.0.0.1:9222/json/version
74	```
75
76	Once connected, test with the `mcp__chrome-devtools__list_pages` tool.
77
78	## Quick Troubleshooting
79
80	\| Issue \| Solution \|
81	\|-------\|----------\|
82	\| "Target closed" error \| Close all Chrome instances, restart with debugging \|
83	\| Module not found \| Clear npm cache: `rm -rf ~/.npm/_npx && npm cache clean --force` \|
84	\| Connection refused \| Ensure Chrome launched with `--remote-debugging-port=9222` \|
85	\| Port already in use \| Kill existing Chrome or use different port \|
86	\| Chrome won't start in sandbox \| Use `--browserUrl` to connect to manually-started Chrome \|
87	\| WebDriver sign-in blocked \| Use `--autoConnect` to connect to your normal browser session \|
88
89	For detailed troubleshooting steps, see [references/troubleshooting.md](references/troubleshooting.md).
90
91	## References
92
93	- Chrome Installation: [references/chrome-installation.md](references/chrome-installation.md) - platform-specific installation options
94	- MCP Configuration: [references/mcp-configuration.md](references/mcp-configuration.md) - all configuration flags, JSON examples, connection methods, platform commands, and known limitations
95	- Troubleshooting: [references/troubleshooting.md](references/troubleshooting.md) - detailed error resolution, debugging with logs, and recovery scripts

People who liked this also viewed

6 picks

Type

devtools

28installs9forks

View on GitHub

How to install devtools?

henkisdabro/wookstar-claude-plugins/devtools

$npx -y skills add henkisdabro/wookstar-claude-plugins --skill devtools

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Chrome DevTools MCP
2
3	GitHub Repository: https://github.com/ChromeDevTools/chrome-devtools-mcp
4
5	Without browser access, Claude is "coding blindfolded" - making changes without seeing results. The Chrome DevTools MCP server provides specialised tools across these categories:
6
7	\| Category \| Capabilities \|
8	\|----------\|--------------\|
9	\| Visual Inspection \| Take screenshots, capture DOM snapshots, see rendered output \|
10	\| Console & Logging \| Read console messages, catch JavaScript errors, debug issues \|
11	\| Network Analysis \| Inspect API requests/responses, analyse headers, debug fetch calls \|
12	\| Performance \| Record traces, measure Core Web Vitals (LCP, CLS, TBT), identify bottlenecks \|
13	\| User Simulation \| Click elements, fill forms, drag-and-drop, handle dialogs \|
14	\| Device Emulation \| Simulate mobile viewports, throttle CPU/network, test responsive design \|
15
16	## Quick Start Workflow
17
18	Execute these steps in order:
19
20	### Step 1: Detect Environment
21
22	```bash
23	bash scripts/detect_environment.sh
24	```
25
26	Returns one of: `windows`, `linux`, or `wsl2`
27
28	### Step 2: Verify Chrome Installation
29
30	```bash
31	bash scripts/check_chrome.sh <environment>
32	```
33
34	Outputs `status:installed` or `status:not_installed`. If not installed, see [references/chrome-installation.md](references/chrome-installation.md) for installation options.
35
36	IMPORTANT: Do not proceed until Chrome is installed and verified.
37
38	### Step 3: Check MCP Server Status
39
40	```bash
41	claude mcp list \| grep -i chrome
42	```
43
44	If not installed:
45
46	```bash
47	claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222
48	```
49
50	For advanced configuration options and alternative connection methods, see [references/mcp-configuration.md](references/mcp-configuration.md).
51
52	### Step 4: Detect Running Dev Server
53
54	```bash
55	bash scripts/detect_dev_server.sh
56	```
57
58	Checks ports 5173, 5174, 5175, 3000, 3001, 8080, and 8000. If no dev server is running and one is needed, offer to start it.
59
60	### Step 5: Launch Chrome with Debugging
61
62	```bash
63	bash scripts/launch_chrome.sh <environment> <url> [headed]
64	```
65
66	- `<environment>`: `windows`, `linux`, or `wsl2`
67	- `<url>`: Target URL (e.g., `http://localhost:5173`)
68	- `[headed]`: Optional - pass `headed` for visible browser, omit for headless (default)
69
70	### Step 6: Verify Connection
71
72	```bash
73	curl -s http://127.0.0.1:9222/json/version
74	```
75
76	Once connected, test with the `mcp__chrome-devtools__list_pages` tool.
77
78	## Quick Troubleshooting
79
80	\| Issue \| Solution \|
81	\|-------\|----------\|
82	\| "Target closed" error \| Close all Chrome instances, restart with debugging \|
83	\| Module not found \| Clear npm cache: `rm -rf ~/.npm/_npx && npm cache clean --force` \|
84	\| Connection refused \| Ensure Chrome launched with `--remote-debugging-port=9222` \|
85	\| Port already in use \| Kill existing Chrome or use different port \|
86	\| Chrome won't start in sandbox \| Use `--browserUrl` to connect to manually-started Chrome \|
87	\| WebDriver sign-in blocked \| Use `--autoConnect` to connect to your normal browser session \|
88
89	For detailed troubleshooting steps, see [references/troubleshooting.md](references/troubleshooting.md).
90
91	## References
92
93	- Chrome Installation: [references/chrome-installation.md](references/chrome-installation.md) - platform-specific installation options
94	- MCP Configuration: [references/mcp-configuration.md](references/mcp-configuration.md) - all configuration flags, JSON examples, connection methods, platform commands, and known limitations
95	- Troubleshooting: [references/troubleshooting.md](references/troubleshooting.md) - detailed error resolution, debugging with logs, and recovery scripts

People who liked this also viewed

6 picks

Type