# 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. This skill does not apply to `--slim` mode (MCP configuration). Use when this capability is needed. - Skill: `tomevault-io/chrome-devtools-8` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/chrome-devtools-8` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/chrome-devtools-8/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: AI & ML - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/chrome-devtools-8 --- ## 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 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. ## 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. --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/chromedevtools) — claim your Tome and manage your conversions.