|
| 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