Chrome DevTools MCP + Claude Code: Browser Debugging Without Leaving Your Terminal (2026)
The `browser-cdp` skill (4,823 installs, 2,096 stars) gives Claude Code direct access to the Chrome DevTools Protocol-network inspection, DOM queries, performance profiling, and screenshot capture. Stack it with `debug-optimize-lcp` (1,169 installs, 43,118 stars) for Core Web Vitals work and `full-page-screenshot` (1,147 installs) for visual regression.
By Skillselion, an Ellelion LLC publication · Updated July 5, 2026 · 3 min read · Stats verified against the live catalog
Debugging a live browser without leaving Claude Code is now possible through the Chrome DevTools Protocol (CDP)-a WebSocket API that Chrome exposes for external tooling. MCP servers wrap CDP as tool calls, letting Claude Code inspect, screenshot, and profile a real browser session in the same conversation as the code it's debugging. Browse MCP skills for the full browser tooling catalog.
Key takeaways
browser-cdp(4,823 installs, 2,096 stars, skills.sh registry) gives Claude Code access to the Chrome DevTools Protocol: network logs, DOM queries, screenshots, and performance traces.debug-optimize-lcp(1,169 installs, 43,118 stars) is the highest-star browser debugging skill in the catalog-it covers Core Web Vitals (LCP, INP, CLS) diagnosis and the exact fixes:fetchpriority,preload,loading=lazy.full-page-screenshot(1,147 installs, 61,378 stars) enables automated visual regression-Claude Code captures before/after screenshots during a refactor to catch unintended layout shifts.- Chrome DevTools MCP is complementary to Playwright testing (best testing skills)-CDP for interactive debugging, Playwright for CI assertions.
- The MCP server build guide explains how to extend browser MCP tools with custom CDP domains if the built-in skills don't cover your use case.
What is Chrome DevTools MCP and how does it work?
browser-cdp (4,823 installs, 2,096 stars, skills.sh registry) is the entry point. It teaches Claude Code the Chrome DevTools Protocol domains: Network for HTTP inspection, DOM for live element queries, Page for navigation and screenshots, Performance for trace collection, and Accessibility for a11y tree inspection. Claude Code launches Chrome with --remote-debugging-port=9222 and communicates via CDP WebSocket from that port.
claude skill install browser-cdp
How do you inspect network requests with Claude Code?
With browser-cdp installed, Claude Code issues Network.enable to start recording, navigates to a URL, then calls Network.getAllCookies and Network.getResponseBody for any request. This surfaces full request/response pairs-headers, bodies, timing-in the Claude Code conversation context. It's faster than the Network tab for debugging a specific endpoint during a coding session because the data arrives in the same window as the code.
How do you optimize Core Web Vitals with Claude Code?
debug-optimize-lcp (1,169 installs, 43,118 stars) teaches Claude Code to: identify the LCP element via the PerformanceObserver API, find render-blocking resources in the Network waterfall, and apply the three standard fixes-<link rel=preload> for critical assets, fetchpriority="high" on the LCP image, and loading="lazy" on below-fold images. The 43,118 GitHub stars come from the upstream Chrome tooling repo that backs this skill. See Next.js 15 performance patterns for framework-specific optimizations.
How does full-page screenshot work in Claude Code?
full-page-screenshot (1,147 installs, 61,378 stars) calls Page.captureScreenshot with clip coordinates derived from Page.getLayoutMetrics-it captures the complete scrollable document, not just the viewport. Claude Code uses this for visual regression: screenshot before a refactor, apply changes, screenshot after, diff the two to catch unintended layout shifts. This is particularly useful alongside accessibility audits where visual confirmation matters.
How does Chrome DevTools MCP compare to Playwright?
browser-cdp (4,823 installs) uses raw CDP for interactive, in-context debugging-query the live DOM, inspect a specific network call, run a quick performance trace. Playwright wraps CDP in a test-optimised API with built-in retries, assertions, and parallel execution-better for CI test suites. Use both: CDP skills for debugging during development, Playwright skills for automated testing in CI. They complement rather than replace each other.
A complete starter stack
browser-cdp- CDP domains for network, DOM, page, performance, accessibilitydebug-optimize-lcp- Core Web Vitals diagnosis and fix patternsfull-page-screenshot- automated visual regression via Page.captureScreenshotbrowser-bridge(566 installs) - alternative CDP bridge for custom MCP server setups
Common pitfalls
- Launching Chrome without
--remote-debugging-port=9222-browser-cdprequires the debugging port to be open at Chrome startup, not just when the skill runs. - Using
DOM.querySelectoron a dynamically-rendered SPA beforePage.loadEventFired-the DOM isn't complete until the load event;browser-cdptemplates include the correct wait pattern. - Forgetting to call
Network.disableafter inspection-leaving the Network domain enabled adds overhead to every request in the tab for the session duration.
Learn how to build your own browser MCP tool in the MCP server build guide and explore the complete browser + MCP toolkit.
Common questions
What is Chrome DevTools MCP and how does it work with Claude Code?
Chrome DevTools MCP exposes the Chrome DevTools Protocol (CDP) as MCP tool calls, letting Claude Code inspect network requests, query the live DOM, take screenshots, and run performance traces-all without switching tools. The `browser-cdp` skill (4,823 installs, 2,096 stars, skills.sh registry) is the entry point.
What skill gives Claude Code browser debugging access?
`browser-cdp` (4,823 installs, 2,096 stars) is the top pick-it teaches Claude Code CDP domains: `Network.getResponseBody`, `DOM.querySelector`, `Page.captureScreenshot`, and `Performance.getMetrics`. See all [MCP skills](/guide/best-mcp-server-skills-for-claude-code).
How do I use Claude Code to debug network requests in Chrome?
With `browser-cdp` installed, Claude Code issues `Network.enable` and `Network.responseReceived` listeners in a single prompt, then formats the captured request/response pairs as readable JSON. This is faster than switching to the browser Network tab for in-context debugging.
How does browser-cdp compare to Playwright for testing?
`browser-cdp` (4,823 installs) uses the raw CDP protocol for interactive debugging-ideal for one-off inspection. Playwright wraps CDP in a test-optimised API with retries and assertions-better for CI suites. See [best testing skills](/guide/best-testing-skills-for-claude-code) for the Playwright path.
What is the best MCP skill for LCP optimization?
`debug-optimize-lcp` (1,169 installs, 43,118 stars) is purpose-built for Largest Contentful Paint work-it teaches Claude Code to identify LCP candidates, measure render-blocking resources, and apply `fetchpriority`, `preload`, and lazy-loading fixes. The 43,118 stars reflect the underlying Google Chrome tooling repo.
Ranked by Skillselion - an independent directory of AI-coding tools, not affiliated with Anthropic, OpenAI or Cursor. Tool rankings reflect real adoption (installs, then GitHub stars) from the skills.sh registry and GitHub, last updated July 5, 2026.