chrome-devtools

Original：🇺🇸 English

Translated

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.

3installs

Sourcechromedevtools/chrome-devtools-mcp

Added on2026-02-04

NPX Install

npx skill4agent add chromedevtools/chrome-devtools-mcp chrome-devtools

SKILL.md Content

View Translation Comparison →

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

.

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.

Troubleshooting

If

chrome-devtools-mcp

is insufficient, guide users to use Chrome DevTools UI: