Codepit The toolbox

Let Claude drive and debug Chrome

Claude gets a live Chrome browser it can open, click through and inspect with DevTools: network requests, console messages, screenshots and performance traces.

Scan in Codepit View source

Scan checks all of ChromeDevTools/chrome-devtools-mcp on your computer, before anything installs.

Codepit runs on your computer. Open this page there to scan it before installing.

A plug going into a small server

What Claude gets

  • navigate_pageGo to a URL, or back, forward or reload.
  • take_snapshotRead the page as a text snapshot of its elements, so Claude can pick what to click or fill.
  • clickClick an element. fill_form fills several inputs in one call.
  • take_screenshotScreenshot the page or one element.
  • list_console_messagesList console messages since the last navigation.
  • list_network_requestsList the page's recent network requests.
  • performance_start_traceRecord a performance trace to find load problems and Core Web Vitals issues.
  • lighthouse_auditGet Lighthouse scores and failing audits for accessibility, SEO and best practices.
  • take_heapsnapshotCapture a heap snapshot to look for memory leaks.

Before you start

  • Node.js (LTS) and npm.
  • Google Chrome, current stable version or newer. Other Chromium browsers may work but aren't supported.

Try saying

>Check the performance of https://developers.chrome.com

Claude opens Chrome and records a performance trace of the page.

Worth knowing

The browser's content is open to Claude: it can inspect, debug and change any data in that browser. Google advises not sharing sensitive or personal information you don't want the MCP client to see.

Google collects usage statistics (tool success rates, latency, environment info) by default. Turn it off with the --no-usage-statistics flag or the CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS environment variable.

Performance tools may send trace URLs to Google's CrUX API to add real-user data. Turn it off with --no-performance-crux.

The server checks the npm registry for updates now and then. Set CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS to stop it.

Comes with seven skills

The plugin install adds these next to the tools. The terminal command adds the tools only.

  • chrome-devtools
  • chrome-devtools-cli
  • a11y-debugging
  • cookie-debugging
  • debug-optimize-lcp
  • memory-leak-debugging
  • troubleshooting
Read the author's README README.md