Chrome Devtools
- 1 installs
- Updated August 2, 2026
- anian0/pick-skills
chrome-devtools is a Claude Code skill that uses the Chrome DevTools MCP for debugging web pages, inspecting network requests, analyzing performance, and automating browser interactions.
About
This skill uses Chrome DevTools via MCP for debugging, troubleshooting, and browser automation. A developer uses it to debug web pages, automate browser interactions, analyze performance, or inspect network requests. It follows a snapshot-first workflow (navigate, wait_for, take_snapshot, then interact by element uid) and advises when to use take_snapshot versus take_screenshot and how to keep outputs small.
- Drives Chrome DevTools via MCP for debugging and browser automation
- Snapshot-first workflow: navigate, wait_for, take_snapshot, then interact by uid
- Guidance on performance analysis and network request inspection
Chrome Devtools by the numbers
- 1 all-time installs (skills.sh)
- Ranked #488 of 596 Debugging skills by installs in the Skillselion catalog
- Data as of Aug 3, 2026 (Skillselion catalog sync)
chrome-devtools capabilities & compatibility
Free; runs chrome-devtools-mcp locally with a persistent Chrome profile.
- Capabilities
- debugging · browser automation · performance analysis · network inspection
- Works with
- chrome · playwright
- Use cases
- debugging · testing · web scraping
- Pricing
- Free
What chrome-devtools says it does
Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation.
Use `take_snapshot` to get page structure with element `uid`s. Each element has a unique `uid` for interaction.
**Automation/interaction**: `take_snapshot` (text-based, faster, better for automation)
npx skills add https://github.com/anian0/pick-skills --skill chrome-devtoolsAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1 |
|---|---|
| Last updated | August 2, 2026 |
| Repository | anian0/pick-skills ↗ |
What it does
Debug web pages, inspect network requests, analyze performance, and automate browser interactions through Chrome DevTools MCP.
Who is it for?
Developers debugging or automating web pages who want an efficient snapshot-driven Chrome DevTools MCP workflow.
Skip if: '--slim' mode (MCP configuration), which the skill explicitly excludes.
When should I use this skill?
When debugging web pages, automating browser interactions, analyzing performance, or inspecting network requests.
What you get
Reliable page debugging and automation using element uids from snapshots, with minimal output payloads.
- Debugged web page or automated browser flow
- Network and performance inspection results
By the numbers
- 4-step before-interaction workflow (navigate, wait, snapshot, interact)
Files
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
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 uids from snapshot for click, 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:
- 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.
Related skills
Azure DiagnosticsSystematically diagnose and resolve production issues on Microsoft Azure using official Microsoft guidance.495k1.3kAzure MessagingQuickly diagnose and fix connection, authentication, and message-processing failures when using Azure Event Hubs or Service Bus SDKs.483k1.3k
Diagnosing BugsGet a systematic, step-by-step process that surfaces the real root cause instead of guessing at bugs.291k200k
Use My BrowserWhen their agent task requires access to the live browser session, rendered DOM state, authenticated dashboards, localhost apps, or DevTools-selected elements instea269k71
Systematic DebuggingFollow a repeatable four-phase process that forces root-cause discovery before any code changes.210k265k
Safe DebugGet conservative, non-destructive diagnosis of deep learning and agent errors before any code changes are made.185k512Forks & variants (1)
Chrome Devtools has 1 known copy in the catalog totaling 1 installs. They canonicalize to this original listing.
- mz038197 - 1 installs
FAQ
How does element interaction work?
Use take_snapshot to get page structure with element uids, then use those uids for click, fill, and other actions; take a fresh snapshot if an element is not found.
When should I use a screenshot versus a snapshot?
Use take_snapshot for automation (text-based, faster) and take_screenshot when the user needs to see the visual state.