Skip to content

Commit dc33129

Browse files
OrKoNOrKoN
committed
chore: add a skill for chrome-devtools
1 parent 109bf43 commit dc33129

1 file changed

Lines changed: 121 additions & 0 deletions

File tree

‎skills/chrome-devtools-cli/SKILL.md‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
---
2+
name: chrome-devtools-cli
3+
description: Use to call Chrome DevTools MCP from shell scripts.
4+
---
5+
6+
Documentation and examples for using the `chrome-devtools` CLI to automate browser tasks, perform audits, and interact with pages via CLI.
7+
8+
Snapshots looks like this:
9+
10+
```
11+
uid=1_0 RootWebArea "Example Domain" url="https://example.com/"
12+
uid=1_1 heading "Example Domain" level="1"
13+
uid=1_2 StaticText "This domain is for use in documentation examples without needing permission. Avoid use in operations."
14+
uid=1_3 link "Learn more" url="https://iana.org/domains/example"
15+
uid=1_4 StaticText "Learn more
16+
```
17+
18+
## Input Automation (<uid> from snapshot)
19+
20+
```bash
21+
chrome-devtools take_snapshot --help # Help message for commands, works for any command.
22+
chrome-devtools take_snapshot # Take a text snapshot of the page to get UIDs for elements
23+
chrome-devtools click "id" # Clicks on the provided element
24+
chrome-devtools click "id" --dblClick true --includeSnapshot true # Double clicks and returns a snapshot
25+
chrome-devtools drag "src" "dst" # Drag an element onto another element
26+
chrome-devtools drag "src" "dst" --includeSnapshot true # Drag an element and return a snapshot
27+
chrome-devtools fill "id" "text" # Type text into an input or select an option
28+
chrome-devtools fill "id" "text" --includeSnapshot true # Fill an element and return a snapshot
29+
chrome-devtools fill_form "json" # Fill out multiple form elements at once
30+
chrome-devtools fill_form "json" --includeSnapshot true # Fill a form and return a snapshot
31+
chrome-devtools handle_dialog accept # Handle a browser dialog
32+
chrome-devtools handle_dialog dismiss --promptText "hi" # Dismiss a dialog with prompt text
33+
chrome-devtools hover "id" # Hover over the provided element
34+
chrome-devtools hover "id" --includeSnapshot true # Hover over an element and return a snapshot
35+
chrome-devtools press_key "Enter" # Press a key or key combination
36+
chrome-devtools press_key "Control+A" --includeSnapshot true # Press a key and return a snapshot
37+
chrome-devtools type_text "hello" # Type text using keyboard into a focused input
38+
chrome-devtools type_text "hello" --submitKey "Enter" # Type text and press a submit key
39+
chrome-devtools upload_file "id" "file.txt" # Upload a file through a provided element
40+
chrome-devtools upload_file "id" "file.txt" --includeSnapshot true # Upload a file and return a snapshot
41+
```
42+
43+
## Navigation
44+
45+
```bash
46+
chrome-devtools close_page 1 # Closes the page by its index
47+
chrome-devtools list_pages # Get a list of pages open in the browser
48+
chrome-devtools navigate_page --url "https://example.com" # Navigates the currently selected page to a URL
49+
chrome-devtools navigate_page --type "reload" --ignoreCache true # Reload page ignoring cache
50+
chrome-devtools navigate_page --url "https://example.com" --timeout 5000 # Navigate with a timeout
51+
chrome-devtools navigate_page --handleBeforeUnload "accept" # Handle before unload dialog
52+
chrome-devtools navigate_page --type "back" --initScript "foo()" # Navigate back and run an init script
53+
chrome-devtools new_page "https://example.com" # Creates a new page
54+
chrome-devtools new_page "https://example.com" --background true --timeout 5000 # Create new page in background
55+
chrome-devtools new_page "https://example.com" --isolatedContext "ctx" # Create new page with isolated context
56+
chrome-devtools select_page 1 # Select a page as a context for future tool calls
57+
chrome-devtools select_page 1 --bringToFront true # Select a page and bring it to front
58+
chrome-devtools wait_for "Success!" # Wait for the specified text to appear on the page
59+
chrome-devtools wait_for "Success!" --timeout 10000 # Wait for text with a timeout
60+
```
61+
62+
## Emulation
63+
64+
```bash
65+
chrome-devtools emulate --networkConditions "Offline" # Emulate network conditions
66+
chrome-devtools emulate --cpuThrottlingRate 4 --geolocation "0,0" # Emulate CPU throttling and geolocation
67+
chrome-devtools emulate --colorScheme "dark" --viewport "1920x1080" # Emulate color scheme and viewport
68+
chrome-devtools emulate --userAgent "Mozilla/5.0..." # Emulate user agent
69+
chrome-devtools resize_page 1920 1080 # Resizes the selected page's window
70+
```
71+
72+
## Performance
73+
74+
```bash
75+
chrome-devtools performance_analyze_insight "1" "LCPBreakdown" # Get more details on a specific Performance Insight
76+
chrome-devtools performance_start_trace true false # Starts a performance trace recording
77+
chrome-devtools performance_start_trace true true --filePath t.gz # Start trace and save to a file
78+
chrome-devtools performance_stop_trace # Stops the active performance trace
79+
chrome-devtools performance_stop_trace --filePath "t.json" # Stop trace and save to a file
80+
chrome-devtools take_memory_snapshot "./snap.heapsnapshot" # Capture a memory heapsnapshot
81+
```
82+
83+
## Network
84+
85+
```bash
86+
chrome-devtools get_network_request # Get the currently selected network request
87+
chrome-devtools get_network_request --reqid 1 --requestFilePath req.json # Get request by id and save to file
88+
chrome-devtools get_network_request --responseFilePath res.json # Save response body to file
89+
chrome-devtools list_network_requests # List all network requests
90+
chrome-devtools list_network_requests --pageSize 50 --pageIdx 0 # List network requests with pagination
91+
chrome-devtools list_network_requests --resourceTypes '["Fetch"]' # Filter requests by resource type
92+
chrome-devtools list_network_requests --includePreservedRequests true # Include preserved requests
93+
```
94+
95+
## Debugging & Inspection
96+
97+
```bash
98+
chrome-devtools evaluate_script "() => document.title" # Evaluate a JavaScript function on the page
99+
evaluate_script "(a) => a.innerText" --args 1_4 # Evaluate JS with UID arguments
100+
chrome-devtools get_console_message 1 # Gets a console message by its ID
101+
chrome-devtools lighthouse_audit --mode "navigation" # Run Lighthouse audit for navigation
102+
chrome-devtools lighthouse_audit --mode "snapshot" --device "mobile" # Run Lighthouse audit for a snapshot on mobile
103+
chrome-devtools lighthouse_audit --outputDirPath ./out # Run Lighthouse audit and save reports
104+
chrome-devtools list_console_messages # List all console messages
105+
chrome-devtools list_console_messages --pageSize 20 --pageIdx 1 # List console messages with pagination
106+
chrome-devtools list_console_messages --types '["error"]' # Filter console messages by type
107+
chrome-devtools list_console_messages --includePreservedMessages true # Include preserved messages
108+
chrome-devtools take_screenshot # Take a screenshot of the page viewport
109+
chrome-devtools take_screenshot --fullPage true --format "jpeg" --quality 80 # Take a full page screenshot as JPEG with quality
110+
chrome-devtools take_screenshot --uid "id" --filePath "s.png" # Take a screenshot of an element
111+
chrome-devtools take_snapshot # Take a text snapshot of the page from the a11y tree
112+
chrome-devtools take_snapshot --verbose true --filePath "s.txt" # Take a verbose snapshot and save to file
113+
```
114+
115+
## Service Management
116+
117+
```bash
118+
chrome-devtools start # Start or restart chrome-devtools-mcp
119+
chrome-devtools status # Checks if chrome-devtools-mcp is running
120+
chrome-devtools stop # Stop chrome-devtools-mcp if any
121+
```

0 commit comments

Comments
 (0)