Skip to content

Commit 8907246

Browse files
committed
feat: add a skill for using chrome-devtools-mcp
1 parent 8e215e3 commit 8907246

1 file changed

Lines changed: 39 additions & 0 deletions

File tree

skills/chrome-devtools/SKILL.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
name: chrome-devtools
3+
description: Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions, analyzing performance, or inspecting network requests.
4+
---
5+
6+
## Core Concepts
7+
8+
**Browser lifecycle**: Browser starts automatically on first tool call using a persistent Chrome profile. Configure via CLI args in the MCP server configuration: `npx chrome-devtools-mcp@latest --help`.
9+
10+
**Page selection**: Tools operate on the currently selected page. Use `list_pages` to see available pages, then `select_page` to switch context.
11+
12+
**Element interaction**: Use `take_snapshot` to get page structure with element `uid`s. Each element has a unique `uid` for interaction. If an element isn't found, take a fresh snapshot - the element may have been removed or the page changed.
13+
14+
## Workflow Patterns
15+
16+
### Before interacting with a page
17+
1. Navigate: `navigate_page` or `new_page`
18+
2. Wait: `wait_for` to ensure content is loaded if you know what you look for.
19+
3. Snapshot: `take_snapshot` to understand page structure
20+
4. Interact: Use element `uid`s from snapshot for `click`, `fill`, etc.
21+
22+
### Efficient data retrieval
23+
- Use `filePath` parameter for large outputs (screenshots, snapshots, traces)
24+
- Use pagination (`pageIdx`, `pageSize`) and filtering (`types`) to minimize data
25+
- Set `includeSnapshot: false` on input actions unless you need updated page state
26+
27+
### Tool selection
28+
- **Automation/interaction**: `take_snapshot` (text-based, faster, better for automation)
29+
- **Visual inspection**: `take_screenshot` (when user needs to see visual state)
30+
- **Additional details**: `evaluate_script` for data not in accessibility tree
31+
32+
### Parallel execution
33+
You can send multiple tool calls in parallel, but maintain correct order: navigate → wait → snapshot → interact.
34+
35+
## Troubleshooting
36+
37+
If `chrome-devtools-mcp` is insufficient, guide users to use Chrome DevTools UI:
38+
- https://developer.chrome.com/docs/devtools
39+
- https://developer.chrome.com/docs/devtools/ai-assistance

0 commit comments

Comments
 (0)