How do I install the Chrome Devtools skill?

Run npx skillmds add coreyone/chrome-devtools in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Chrome Devtools safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Chrome Devtools?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Chrome Devtools free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Chrome Devtools?

coreyone (@coreyone) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Chrome Devtools by coreyone — Agent Skill

Name: Chrome Devtools
Rating: 4.666666666666667 (3 reviews)
Author: coreyone

Chrome Devtools

Trigger: chrome-devtools, browser automation, headless browser, web scraping, inspect element, chrome debugger, inspect page, network request, console logs. Scope: Interact with and automate headless Chrome via Chrome DevTools Protocol (CDP) for testing, debugging, and scraping. Boundary: Do not use for macOS native desktop GUI automation (use peekaboo instead).

coreyone 4efd9cb 2.3 KB Updated Aug 19, 2026 1 repo stars

File contents

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_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 uids 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:

If there are errors launching chrome-devtools-mcp or Chrome, refer to https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md.

---name: chrome-devtoolsdescription: Trigger: chrome-devtools, browser automation, headless browser, web scraping, inspect element, chrome debugger, inspect page, network request, console logs. Scope: Interact with and automate headless Chrome via Chrome DevTools Protocol (CDP) for testing, debugging, and scraping. Boundary: Do not use for macOS native desktop GUI automation (use peekaboo instead).---## 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 page1. Navigate: `navigate_page` or `new_page`2. Wait: `wait_for` to ensure content is loaded if you know what you look for.3. Snapshot: `take_snapshot` to understand page structure4. 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 executionYou can send multiple tool calls in parallel, but maintain correct order: navigate → wait → snapshot → interact.## TroubleshootingIf `chrome-devtools-mcp` is insufficient, guide users to use Chrome DevTools UI:- https://developer.chrome.com/docs/devtools- https://developer.chrome.com/docs/devtools/ai-assistanceIf there are errors launching `chrome-devtools-mcp` or Chrome, refer to https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md.

Frequently asked questions