Chrome Devtools
Debug web UIs, automate browser steps, inspect network traffic, and profile performance through Chrome DevTools MCP instead of manual DevTools clicking.
Overview
chrome-devtools is an agent skill most often used in Build (also Ship testing, Operate errors) that drives Chrome DevTools via MCP for debugging, automation, performance, and network inspection.
Install
npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill chrome-devtoolsWhat is this skill?
- Persistent Chrome profile starts on first tool call; CLI flags configure categories via npx chrome-devtools-mcp@latest
- Page context via list_pages and select_page; interactions require fresh take_snapshot uids after DOM changes
- Standard workflow: navigate_page or new_page, wait_for, take_snapshot, then click/fill by uid
- Optional --categoryExtensions and --memoryDebugging flags for extension and memory tooling
- Use filePath on tools when responses are large to avoid truncating network or performance dumps
- 4-step interact workflow: navigate, wait_for, take_snapshot, interact by uid
- 2 optional MCP category flags: --categoryExtensions and --memoryDebugging
Adoption & trust: 3.8k installs on skills.sh; 43.1k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are fixing a web bug or slow page but manually flipping between the IDE and Chrome DevTools breaks flow and is hard to delegate to an agent.
Who is it for?
Solo builders shipping web apps or extensions who already run chrome-devtools-mcp and want agent-driven reproduction steps.
Skip if: Agents in --slim MCP mode, headless-only CI without Chrome, or backend-only APIs with no browser surface.
When should I use this skill?
Debugging web pages, automating browser interactions, analyzing performance, or inspecting network requests (not when MCP is in --slim mode).
What do I get? / Deliverables
The agent navigates real Chrome, snapshots the DOM with uids, and returns actionable debug or performance data from DevTools tools in-thread.
- Page snapshots with element uids for automation
- Network and performance diagnostic output (optionally via filePath for large traces)
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Primary shelf is build/frontend because most invocations happen while implementing pages, components, and client-side behavior. frontend is where navigate → wait → snapshot → interact loops replace guesswork about DOM state during active development.
Where it fits
Reproduce a broken checkout button by navigating staging, waiting for the cart drawer, and clicking via snapshot uid.
Capture a performance timeline before launch to confirm LCP regressions on the marketing homepage.
Inspect failing API calls in the Network panel when users report intermittent 403s on the dashboard.
How it compares
Live browser DevTools via MCP, not Playwright-only scripts without Chrome debugging panels.
Common Questions / FAQ
Who is chrome-devtools for?
Frontend-focused indie developers using Claude Code, Cursor, or similar agents with chrome-devtools-mcp configured for day-to-day web debugging and automation.
When should I use chrome-devtools?
Use it while building frontend features, during ship testing when reproducing flaky UI, or in operate when investigating production-like staging pages for network or performance regressions.
Is chrome-devtools safe to install?
It can drive a real browser profile and read page content; review the Security Audits panel on this page and scope MCP server flags before use on logged-in or production accounts.
SKILL.md
READMESKILL.md - 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`. Addional tooling can be enabled by providing the following flags: - For extension tooling, use the `--categoryExtensions` flag. - For memory tooling, use the `--memoryDebugging` flag. **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 1. 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 structure 4. 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 1. **Install**: Use `install_extension` with the path to the unpacked extension. 2. **Identify**: Get the extension ID from the response or by calling `list_extensions`. 3. **Trigger Action**: Use `trigger_extension_action` to open the popup or side panel if applicable. 4. **Verify Service Worker**: Use `evaluate_script` with `serviceWorkerId` to check extension state or trigger background actions. 5. **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 If `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-assistance If there are errors launching `chrome-devtools-mcp` or Chrome, refer to https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md.