Chrome-devtools-mcp chrome-devtools

Name: chrome-devtools
Author: ChromeDevTools

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

install

source · Clone the upstream repo

git clone https://github.com/ChromeDevTools/chrome-devtools-mcp

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ChromeDevTools/chrome-devtools-mcp "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/chrome-devtools" ~/.claude/skills/chromedevtools-chrome-devtools-mcp-chrome-devtools && rm -rf "$T"

manifest: skills/chrome-devtools/SKILL.md

source content

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

. To enable extensions, use

--categoryExtensions

. Page selection: Tools operate on the currently selected page. Use

list_pages

to see available pages, then

select_page

to switch context.

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.

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
```
to understand page structure
Interact: Use element
```
uid
```
s from snapshot for
```
click
```
,
```
fill
```
, etc.

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

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
```
to check extension state or trigger background actions.
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

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.