Core Concepts
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.
Addional tooling can be enabled by providing the following flags:
- For extension tooling, use the
--categoryExtensions flag.
- For memory tooling, use the
--memoryDebugging flag.
Page targeting: Page-scoped tools require a pageId parameter to target a specific page. Use list_pages to see available pages and their IDs (e.g. pageId: 1), or use the ID returned when creating a page with new_page.
Note: For evaluate_script, pageId is required when targeting pages. However, when --categoryExtensions is enabled, pageId is optional so you can pass serviceWorkerId instead to evaluate inside an extension background service worker.
Element interaction: Use take_snapshot to get page structure with element uids. 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.
Workflow Patterns
Before interacting with a page
- Navigate:
navigate_page or new_page
- Wait:
wait_for to ensure content is loaded if you know what you look for.
- Snapshot:
take_snapshot with pageId to understand page structure
- Interact: Use element
uids from snapshot for click, fill, etc., passing the corresponding pageId.
Efficient data retrieval
- Use
filePath parameter for large outputs (screenshots, snapshots, traces)
- Use pagination (
pageIdx, pageSize) and filtering (types) to minimize data
- Set
includeSnapshot: false on input actions unless you need updated page state
Tool selection
- Automation/interaction:
take_snapshot (text-based, faster, better for automation)
- Visual inspection:
take_screenshot (when user needs to see visual state)
- Additional details:
evaluate_script for data not in accessibility tree
Parallel execution
You can send multiple tool calls in parallel, but maintain correct order: navigate → wait → snapshot → interact.
Testing an extension
Before proceeding: Extension tools (install_extension, list_extensions, etc.) are only available when the MCP server is started with the --categoryExtensions flag. If these tools are not in your tool list, stop and ask the user to update their MCP server configuration:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest", "--categoryExtensions"]
}
}
}
After updating, the user must restart the MCP server (or their AI client) for the change to take effect.
- Install: Use
install_extension with the path to the unpacked extension.
- Identify: Get the extension ID from the response or by calling
list_extensions.
- Trigger Action: Use
trigger_extension_action to open the popup or side panel if applicable.
- Verify Service Worker: Use
evaluate_script with serviceWorkerId (omitting pageId and args) to check extension state or trigger background actions. When evaluating in a page, pass pageId (omitting serviceWorkerId).
- Verify Page Behavior: Navigate to a page where the extension operates and use
take_snapshot to check if content scripts injected elements or modified the page correctly.
Troubleshooting
If chrome-devtools-mcp is insufficient, guide users to use Chrome DevTools UI:
If there are errors launching chrome-devtools-mcp or Chrome, refer to https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md.
1---2name: chrome-devtools3description: 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. This skill does not apply to `--slim` mode (MCP configuration).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`.
9Addional tooling can be enabled by providing the following flags:
10
11- For extension tooling, use the `--categoryExtensions` flag.
12- For memory tooling, use the `--memoryDebugging` flag.
13
14**Page targeting**: Page-scoped tools require a `pageId` parameter to target a specific page. Use `list_pages` to see available pages and their IDs (e.g. `pageId: 1`), or use the ID returned when creating a page with `new_page`.
15Note: For `evaluate_script`, `pageId` is required when targeting pages. However, when `--categoryExtensions` is enabled, `pageId` is optional so you can pass `serviceWorkerId` instead to evaluate inside an extension background service worker.
16**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.
17
18## Workflow Patterns
19
20### Before interacting with a page
21
221. Navigate: `navigate_page` or `new_page`
232. Wait: `wait_for` to ensure content is loaded if you know what you look for.
243. Snapshot: `take_snapshot` with `pageId` to understand page structure
254. Interact: Use element `uid`s from snapshot for `click`, `fill`, etc., passing the corresponding `pageId`.
26
27### Efficient data retrieval
28
29- Use `filePath` parameter for large outputs (screenshots, snapshots, traces)
30- Use pagination (`pageIdx`, `pageSize`) and filtering (`types`) to minimize data
31- Set `includeSnapshot: false` on input actions unless you need updated page state
32
33### Tool selection
34
35- **Automation/interaction**: `take_snapshot` (text-based, faster, better for automation)
36- **Visual inspection**: `take_screenshot` (when user needs to see visual state)
37- **Additional details**: `evaluate_script` for data not in accessibility tree
38
39### Parallel execution
40
41You can send multiple tool calls in parallel, but maintain correct order: navigate → wait → snapshot → interact.
42
43### Testing an extension
44
45> **Before proceeding**: Extension tools (`install_extension`, `list_extensions`, etc.) are only available when the MCP server is started with the `--categoryExtensions` flag. If these tools are not in your tool list, stop and ask the user to update their MCP server configuration:
46>
47> ```json
48> {
49> "mcpServers": {
50> "chrome-devtools": {
51> "command": "npx",
52> "args": ["chrome-devtools-mcp@latest", "--categoryExtensions"]
53> }
54> }
55> }
56> ```
57>
58> After updating, the user must restart the MCP server (or their AI client) for the change to take effect.
59
601. **Install**: Use `install_extension` with the path to the unpacked extension.
612. **Identify**: Get the extension ID from the response or by calling `list_extensions`.
623. **Trigger Action**: Use `trigger_extension_action` to open the popup or side panel if applicable.
634. **Verify Service Worker**: Use `evaluate_script` with `serviceWorkerId` (omitting `pageId` and `args`) to check extension state or trigger background actions. When evaluating in a page, pass `pageId` (omitting `serviceWorkerId`).
645. **Verify Page Behavior**: Navigate to a page where the extension operates and use `take_snapshot` to check if content scripts injected elements or modified the page correctly.
65
66## Troubleshooting
67
68If `chrome-devtools-mcp` is insufficient, guide users to use Chrome DevTools UI:
69
70- https://developer.chrome.com/docs/devtools
71- https://developer.chrome.com/docs/devtools/ai-assistance
72
73If there are errors launching `chrome-devtools-mcp` or Chrome, refer to https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md.
gabrielmoreira