# chrome-devtools

> Claude/Codex skill by [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md) · 54k stars · Updated 2026-10-26

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).

Tags: browser, chrome, chrome-devtools, debugging, devtools, mcp, mcp-server, puppeteer

## Install

```sh
git clone https://github.com/ChromeDevTools/chrome-devtools-mcp /tmp/chrome-devtools-mcp && ln -s /tmp/chrome-devtools-mcp/skills/chrome-devtools ~/.claude/skills/chrome-devtools
```

## From README

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 targeting: Page-scoped tools require a pageId parameter to target a specific page. Use listpages to see available pages and their IDs (e.g. pageId: 1), or use the ID returned when creating a page with newpage. Note: For evaluatescript, pageId is required when targeting pages. However, when --categoryExtensions is enabled, pageId is optional so you can pass serviceWorkerId instead to evaluate inside an extension background service worker. Element interaction: Use takesnapshot to get page structure with element uids. Each element has a unique uid for interaction.

## Links

- HTML page: https://omgskills.com/skills/chromedevtools/chrome-devtools-mcp/chrome-devtools/
- GitHub: https://github.com/ChromeDevTools/chrome-devtools-mcp
- Author: [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md)

## More from this repo

- [a11y-debugging](https://omgskills.com/skills/chromedevtools/chrome-devtools-mcp/a11y-debugging/index.md) — Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines.
   - [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md) · 54k stars
- [chrome-devtools-cli](https://omgskills.com/skills/chromedevtools/chrome-devtools-mcp/chrome-devtools-cli/index.md) — Used to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via...
   - [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md) · 54k stars
- [debug-optimize-lcp](https://omgskills.com/skills/chromedevtools/chrome-devtools-mcp/debug-optimize-lcp/index.md) — Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools.
   - [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md) · 54k stars