Claude Code に Chrome DevTools for Agents（chrome-devtools-mcp）を繋ぐ実践ガイド A hands-on guide to connecting Claude Code to Chrome's DevTools via the chrome-devtools-mc…

Chrome DevTools for Agents, distributed as the chrome-devtools-mcp package, has reached its v1 release and gives agentic coding tools like Claude Code direct access to a real Chrome instance through the Model Context Protocol (MCP). For developers who already rely on Claude Code for editing and refactoring, this integration matters because it closes a long-standing gap: the assistant can observe how a page actually behaves in a browser rather than reasoning only about static source code.

At a high level, MCP is an open protocol introduced by Anthropic that standardizes how language-model clients talk to external tools and data sources. An MCP server exposes a set of callable tools, and a client such as Claude Code discovers those tools and lets the model invoke them. The chrome-devtools-mcp server fills that role, translating model requests into commands for the Chrome DevTools Protocol (CDP), the same low-level interface that powers the DevTools panel and automation libraries such as Puppeteer and Playwright.

Once connected, the agent gains a set of browser-grade capabilities. It can run Lighthouse audits to measure performance, accessibility, SEO, and best-practice scores, then use the structured results to suggest concrete fixes. It can apply device emulation to reproduce mobile viewports and throttled network conditions, which is useful for diagnosing layout or loading issues that only appear on constrained devices. It can also capture heap snapshots and performance traces, supporting workflows such as memory-leak detection where the agent compares allocations over time. Other typical tools include navigating to URLs, reading console output, inspecting network requests, evaluating JavaScript, and taking screenshots.

Setup follows the standard MCP pattern. Because the server is published to npm, it is commonly launched with npx, so a working Node.js installation is the main prerequisite alongside a local Chrome or Chromium binary. In practice you register the server with Claude Code, either through the claude mcp add command or by editing the client's JSON configuration, pointing it at the chrome-devtools-mcp executable. After Claude Code restarts and discovers the tools, you can prompt it in natural language, for example asking it to audit a running development server or to profile a page that feels slow. The server can drive an existing browser session or start its own, and depending on configuration it may run headless or with a visible window.

The practical workflow tends to be iterative. A developer might ask Claude Code to load a local build, run an audit, and report the largest performance regressions. The agent then reads the results, proposes edits to the codebase, applies them, and re-runs the audit to confirm the change. This loop of observe, change, and verify is where browser-connected agents appear to add the most value, because the model can ground its recommendations in measured data instead of assumptions.

It helps to place this release in a broader context. Browser automation for AI is a crowded and fast-moving area: Playwright ships its own MCP server, and projects such as browser-use and various computer-use agents pursue similar goals of letting models drive a browser. Chrome DevTools for Agents is notable mainly because it surfaces DevTools-specific diagnostics such as Lighthouse, tracing, and heap profiling, rather than focusing only on clicking and typing. That positioning makes it complementary to end-to-end testing tools rather than a direct replacement.

A few caveats are worth keeping in mind. Granting an agent control of a browser means it can navigate to arbitrary pages and execute scripts, so it is prudent to run it against trusted local environments and to review actions before pointing it at sensitive sites or authenticated sessions. Audit results and traces can be large, which may consume significant context tokens if returned verbatim, so well-designed tools typically summarize or paginate output. As with most MCP servers in this period, the project is evolving quickly, so exact tool names, flags, and defaults are likely to shift between versions, and consulting the project's current documentation remains the safest approach.

For teams already standardized on Claude Code, the integration offers a low-friction way to bring real browser feedback into an existing agentic workflow, turning front-end performance and quality checks into something the assistant can run, interpret, and act on directly.