Best Claude Apps

Chrome DevTools Claude plugin

Control and inspect a live Chrome browser from your coding agent. Record performance traces, analyze network requests...

Add Chrome DevTools to Claude

In Claude Code run /plugin, open Discover and search for Chrome DevTools.

Step-by-step setup below All setup steps

What Chrome DevTools does in Claude

Control and inspect a live Chrome browser directly from your coding agent. Chrome DevTools MCP provides 29 tools spanning browser automation, performance profiling, network analysis, and debugging — giving Claude full DevTools capabilities through Puppeteer and the Chrome DevTools Protocol. Automate browser interactions with tools for clicking, typing, filling forms, uploading files, navigating pages, and handling dialogs. Emulate mobile devices and custom viewports to test responsive designs. Record performance traces and memory snapshots to diagnose bottlenecks, run Lighthouse audits, and get actionable performance insights including CrUX field data. Inspect network requests, read console messages with source-mapped stack traces, capture screenshots, take DOM snapshots, and execute JavaScript in the page context. A slim mode is available for lighter, basic browser tasks. How to use: Ask Claude to interact with your running application in Chrome. Example prompts: "Open my app at localhost:3000 and click the login button", "Record a performance trace while I scroll the page and tell me what's slow", "Take a screenshot of the homepage on a mobile viewport", "Check the console for errors after submitting the form", "Run a Lighthouse audit on this page and summarize the results", "List all network requests made when the dashboard loads".

Works in Claude Code Cowork

Included skills (7)

  • a11y-debugging
  • chrome-devtools
  • chrome-devtools-cli
  • cookie-debugging
  • debug-optimize-lcp
  • memory-leak-debugging
  • troubleshooting

How to add Chrome DevTools to Claude

  1. 1 In Claude Code, run /plugin and open the Discover tab.
  2. 2 Search for Chrome DevTools and choose Install. In Cowork, add it from the plugin directory.

Reviews

No reviews yet. Used Chrome DevTools with Claude? Tell others how it went.

Honest reviews only. We never pay for or edit ratings.

    Questions people ask

    What does the Chrome DevTools plugin do in Claude?

    Control and inspect a live Chrome browser directly from your coding agent. Chrome DevTools MCP provides 29 tools spanning browser automation, performance profiling, network analysis, and debugging — giving Claude full DevTools capabilities through Puppeteer and the Chrome DevTools Protocol. Automate browser interactions with tools for clicking, typing, filling forms, uploading files, navigating pages, and handling dialogs. Emulate mobile devices and custom viewports to test responsive designs. Record performance traces and memory snapshots to diagnose bottlenecks, run Lighthouse audits, and get actionable performance insights including CrUX field data. Inspect network requests, read console messages with source-mapped stack traces, capture screenshots, take DOM snapshots, and execute JavaScript in the page context. A slim mode is available for lighter, basic browser tasks. How to use: Ask Claude to interact with your running application in Chrome. Example prompts: "Open my app at localhost:3000 and click the login button", "Record a performance trace while I scroll the page and tell me what's slow", "Take a screenshot of the homepage on a mobile viewport", "Check the console for errors after submitting the form", "Run a Lighthouse audit on this page and summarize the results", "List all network requests made when the dashboard loads".

    Is the Chrome DevTools plugin official?

    It is made by Google. This site is independent and lists it from the official directory.

    Alternatives to Chrome DevTools

    Other plugins ranked by how closely their descriptions and tools match Chrome DevTools.

    Loading…

    Browse all connectors →