@infinitedusky/indusk-mcp 1.14.4 → 1.14.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "chrome-devtools",
|
|
3
|
+
"description": "Chrome DevTools MCP — browser automation, performance traces with CrUX data, Lighthouse audits, network inspection, screenshots",
|
|
4
|
+
"provides": {
|
|
5
|
+
"skill": true
|
|
6
|
+
},
|
|
7
|
+
"detect": {
|
|
8
|
+
"mcp_server": "chrome-devtools"
|
|
9
|
+
},
|
|
10
|
+
"mcp_server": {
|
|
11
|
+
"name": "chrome-devtools",
|
|
12
|
+
"transport": "stdio",
|
|
13
|
+
"command": "npx",
|
|
14
|
+
"args": ["-y", "chrome-devtools-mcp@latest"]
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: chrome-devtools
|
|
3
|
+
description: Chrome DevTools MCP — browser automation, performance analysis, CrUX data, Lighthouse audits, debugging, and screenshots via a live Chrome instance
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Chrome DevTools MCP gives you direct control of a live Chrome browser for debugging, performance analysis, and UI testing.
|
|
7
|
+
|
|
8
|
+
## When to Use
|
|
9
|
+
|
|
10
|
+
- **Performance analysis** — record traces, get CrUX field data, run Lighthouse audits
|
|
11
|
+
- **Visual debugging** — take screenshots, inspect the DOM, watch network requests
|
|
12
|
+
- **UI testing** — click, type, navigate, fill forms in a real browser
|
|
13
|
+
- **Network inspection** — see what requests are being made, check responses
|
|
14
|
+
- **Memory profiling** — take heap snapshots, find memory leaks
|
|
15
|
+
|
|
16
|
+
## Tools (31 total)
|
|
17
|
+
|
|
18
|
+
### Input Automation
|
|
19
|
+
- `click` — click an element by selector or coordinates
|
|
20
|
+
- `drag` — drag from one position to another
|
|
21
|
+
- `fill` — fill a single input field
|
|
22
|
+
- `fill_form` — fill multiple form fields at once
|
|
23
|
+
- `handle_dialog` — accept or dismiss browser dialogs
|
|
24
|
+
- `hover` — hover over an element
|
|
25
|
+
- `press_key` — press a keyboard key
|
|
26
|
+
- `type_text` — type text character by character
|
|
27
|
+
- `upload_file` — upload a file to a file input
|
|
28
|
+
|
|
29
|
+
### Navigation
|
|
30
|
+
- `navigate_page` — go to a URL
|
|
31
|
+
- `new_page` — open a new tab
|
|
32
|
+
- `close_page` — close a tab
|
|
33
|
+
- `list_pages` — list all open tabs
|
|
34
|
+
- `select_page` — switch to a tab
|
|
35
|
+
- `wait_for` — wait for a selector, navigation, or network idle
|
|
36
|
+
|
|
37
|
+
### Performance
|
|
38
|
+
- **`trace`** — record a performance trace. Returns timing data with CrUX field metrics for comparison. This is the primary performance tool.
|
|
39
|
+
- **`memory_snapshot`** — take a heap snapshot for memory analysis
|
|
40
|
+
- **`performance_insights`** — get performance insights from a trace
|
|
41
|
+
- **`crux`** — query Chrome User Experience Report data for a URL. Real-user field data — LCP, FID, CLS, TTFB, INP from actual Chrome users.
|
|
42
|
+
|
|
43
|
+
### Network
|
|
44
|
+
- `network_requests` — list network requests with status, size, timing
|
|
45
|
+
- `inspect_request` — get full details of a specific request (headers, body, response)
|
|
46
|
+
|
|
47
|
+
### Debugging
|
|
48
|
+
- `evaluate` — run JavaScript in the browser console
|
|
49
|
+
- `console_messages` — get console output (logs, warnings, errors)
|
|
50
|
+
- `screenshot` — take a screenshot of the current page or an element
|
|
51
|
+
- `lighthouse` — run a full Lighthouse audit (performance, accessibility, best practices, SEO)
|
|
52
|
+
- `accessibility_snapshot` — get the accessibility tree
|
|
53
|
+
- `emulate` — emulate a device (mobile, tablet) or network conditions (3G, offline)
|
|
54
|
+
|
|
55
|
+
### Page
|
|
56
|
+
- `resize_page` — resize the browser viewport
|
|
57
|
+
|
|
58
|
+
## Modes
|
|
59
|
+
|
|
60
|
+
- **Default** — all 31 tools available
|
|
61
|
+
- **`--slim`** — lightweight mode with 3 core tools only (for constrained contexts)
|
|
62
|
+
- **`--experimental-screencast`** — enables screen recording (requires ffmpeg)
|
|
63
|
+
|
|
64
|
+
## Patterns
|
|
65
|
+
|
|
66
|
+
### Performance audit workflow
|
|
67
|
+
1. `navigate_page` to the target URL
|
|
68
|
+
2. `trace` to record a performance trace
|
|
69
|
+
3. `crux` to get real-user field data for comparison
|
|
70
|
+
4. `lighthouse` for a full audit
|
|
71
|
+
5. Compare lab trace against CrUX field data to identify gaps
|
|
72
|
+
|
|
73
|
+
### Debug a UI issue
|
|
74
|
+
1. `navigate_page` to the page
|
|
75
|
+
2. `screenshot` to see current state
|
|
76
|
+
3. `console_messages` to check for errors
|
|
77
|
+
4. `network_requests` to verify API calls
|
|
78
|
+
5. `evaluate` to inspect DOM state or run diagnostics
|
|
79
|
+
|
|
80
|
+
### Test a user flow
|
|
81
|
+
1. `navigate_page` to the starting page
|
|
82
|
+
2. `fill_form` to enter data
|
|
83
|
+
3. `click` to submit
|
|
84
|
+
4. `wait_for` navigation or network idle
|
|
85
|
+
5. `screenshot` to verify the result
|
|
86
|
+
|
|
87
|
+
## vs Playwright
|
|
88
|
+
|
|
89
|
+
Both automate browsers. Use Chrome DevTools for:
|
|
90
|
+
- Performance traces and CrUX data (Playwright doesn't have this)
|
|
91
|
+
- Lighthouse audits
|
|
92
|
+
- Memory profiling
|
|
93
|
+
- Network inspection with full request/response details
|
|
94
|
+
- Working with an existing browser session
|
|
95
|
+
|
|
96
|
+
Use Playwright for:
|
|
97
|
+
- Automated test suites that run in CI
|
|
98
|
+
- Cross-browser testing (Firefox, WebKit)
|
|
99
|
+
- Headless testing at scale
|