Skills chrome-devtools

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.

install

source · Clone the upstream repo

git clone https://github.com/openclaw/skills

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

T=$(mktemp -d) && git clone --depth=1 https://github.com/openclaw/skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/a-din/xiaopi-chrome-devtools" ~/.claude/skills/clawdbot-skills-chrome-devtools && rm -rf "$T"

manifest: skills/a-din/xiaopi-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

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

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.