Chrome Devtools
/install chrome-devtools
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 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_pageornew_page - Wait:
wait_forto ensure content is loaded if you know what you look for. - Snapshot:
take_snapshotto understand page structure - Interact: Use element
uids from snapshot forclick,fill, etc.
Efficient data retrieval
- Use
filePathparameter for large outputs (screenshots, snapshots, traces) - Use pagination (
pageIdx,pageSize) and filtering (types) to minimize data - Set
includeSnapshot: falseon 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_scriptfor 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:
If there are errors launching chrome-devtools-mcp or Chrome, refer to https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md.
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install chrome-devtools - After installation, invoke the skill by name or use
/chrome-devtools - Provide required inputs per the skill's parameter spec and get structured output
What is Chrome Devtools?
Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions,... It is an AI Agent Skill for Claude Code / OpenClaw, with 2270 downloads so far.
How do I install Chrome Devtools?
Run "/install chrome-devtools" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is Chrome Devtools free?
Yes, Chrome Devtools is completely free (open-source). You can download, install and use it at no cost.
Which platforms does Chrome Devtools support?
Chrome Devtools is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created Chrome Devtools?
It is built and maintained by podcasting101 (@podcasting101); the current version is v0.1.1.