The first stable release that bridges AI coding agents with live browser debugging — 40+ MCP tools, WebMCP testing, and Chrome 149 updates. Here's everything you need to know.
AI coding tools are incredibly powerful at writing code, but they've always been disconnected from its execution. An agent can generate a React component, but it can't see that the component renders a blank white page. It can suggest a Lighthouse fix, but it can't audit the actual runtime performance.
Chrome DevTools for Agents solves this by giving AI agents direct access to:
On May 19, 2026, the Chrome DevTools team shipped the 1.0 stable release. Combined with the Chrome 149 DevTools updates on June 2, this ecosystem now gives AI agents the same debugging superpowers that human developers have had in DevTools for years.
Chrome DevTools for Agents ships as three complementary interfaces:
1. MCP Server — Connects LLMs to DevTools debugging capabilities via the open-source Model Context Protocol. This is the primary interface: your agent calls MCP tools like take_screenshot, list_network_requests, or lighthouse_audit against a live Chrome tab.
2. Chrome DevTools CLI — A token-efficient alternative that lets agents batch actions into scripts. Instead of one MCP tool call per action, the CLI accepts a sequence of instructions in a single request.
3. Agent Skills — Expert instructions that teach agents how and when to use specific tools. Currently available skills cover accessibility auditing, performance debugging, and WebMCP testing.
The GitHub repository ChromeDevTools/chrome-devtools-mcp has 42.7k stars, 910 commits, and is at v1.1.1 as of June 2026.
Chrome 149 brought important upgrades to the DevTools for Agents ecosystem:
Pages can now define custom debugging tools via JavaScript that are discoverable and callable by AI agents. This opens the door for framework-specific debugging — imagine a React DevTools for agents that can inspect component trees, or an Apollo GraphQL tool that can replay queries.
The ability to list and execute WebMCP tools directly from DevTools is now available behind flags. This is critical for developers building WebMCP-enabled websites. More on this in the step-by-step section below.
The AI Assistance panel (powered by Gemini 3) now renders interactive widgets — Core Web Vitals, LCP element highlights, thread activity — and includes a "Copy to coding agent" button that exports the conversation as a summarized prompt.
Agents can now set custom authentication tokens, custom User-Agent strings, or API keys for testing authenticated endpoints.
The fastest way to get Chrome DevTools for Agents running with your AI coding assistant:
Add this to your agent's MCP configuration:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}Gemini CLI:
gemini extensions install --auto-update \
https://github.com/ChromeDevTools/chrome-devtools-mcpClaude Code:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-pluginsCopilot Codex:
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latestFor automated testing pipelines:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--headless"]
}
}
}To share your browser context — cookies, logged-in sessions, authenticated state — with the agent:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest", "--autoConnect"]
}
}
}Then navigate to chrome://inspect/#remote-debugging and click "Allow".
One of the most practical features for debugging is the ability to record a session and replay it. The DevTools for agents MCP server exposes screencast tools (screencast_start, screencast_stop) that let agents record browser interactions as video (requires ffmpeg).
More importantly, agents can follow this workflow:
performance_start_trace captures every paint, layout, and script executionperformance_stop_trace exports the trace for analysisperformance_analyze_insight queries Lighthouse-style diagnosticsExample prompt: "Start a performance trace on localhost:8080, wait 5 seconds, then stop it. Analyze the trace and tell me which scripts are blocking the main thread."
The network inspection tools give agents full visibility into every HTTP request and response:
This is invaluable for diagnosing:
Example prompt: "Navigate to localhost:8080/login, fill in the form with test credentials, submit it, and list all network requests. Which one has the auth token? Show me its response headers."
WebMCP (Web Model Context Protocol) lets websites expose structured, callable tools directly to visiting AI agents. With Chrome DevTools for Agents and Chrome 149, you can now debug WebMCP integrations end-to-end. Here's the workflow:
Chrome 149+ required. Navigate to chrome://flags and enable:
#devtools-webmcp-support#enable-webmcp-testingnpx chrome-devtools-mcp@latest --categoryExperimentalWebmcpAsk your agent to discover and test the WebMCP tools on your page:
Navigate to http://localhost:8080. List all WebMCP tools
exposed by this page. For each tool, show me its schema
(parameters and return type). Then invoke the 'search'
tool with a test query and verify the response matches
the expected schema.
The agent will call navigate_page to open your page, list_webmcp_tools to discover registered tools, return the schemas for inspection, then call execute_webmcp_tool with sample parameters and return the execution result.
Chrome 149 added a WebMCP sidebar in the Application panel:
# In your CI script:
npx chrome-devtools-mcp@latest --headless --categoryExperimentalWebmcp
# Then in your test agent:
# "List WebMCP tools on the staging deployment, invoke each one
# with valid test data, and verify all return valid responses."While testing, you can track active/pending tool invocations, execution status (success/failure/timeout), and return payloads — the same debugging experience as monitoring XHR requests in the Network panel, but for AI agent to website interactions.
The v1.1.1 release ships 40+ MCP tools across 9 categories:
| Category | Tools | Best For |
|---|---|---|
| Input Automation (10) | click, fill, fill_form, type_text, hover, press_key, drag, upload_file, click_at, handle_dialog | Form testing, UI interaction automation |
| Navigation (6) | navigate_page, new_page, close_page, list_pages, select_page, wait_for | Multi-page workflows, tab management |
| Emulation (2) | emulate, resize_page | Responsive design, geolocation testing |
| Performance (3) | performance_start_trace, performance_stop_trace, performance_analyze_insight | Load time debugging, Core Web Vitals |
| Network (2) | list_network_requests, get_network_request | API debugging, CORS issues |
| Debugging (8) | take_screenshot, take_snapshot, evaluate_script, lighthouse_audit, list_console_messages, get_console_message, screencast_start, screencast_stop | Visual inspection, runtime diagnostics |
| Memory (5) | take_heapsnapshot, get_heapsnapshot_summary, get_heapsnapshot_class_nodes, get_heapsnapshot_retainers, get_heapsnapshot_details | Memory leak detection |
| Extensions (5) | list_extensions, install_extension, reload_extension, trigger_extension_action, uninstall_extension | Extension debugging and testing |
| WebMCP (2, exp.) | list_webmcp_tools, execute_webmcp_tool | WebMCP integration testing |
| Third-Party (2, exp.) | list_3p_developer_tools, execute_3p_developer_tool | Framework-specific debugging |
Performance audit:
Check the performance of https://developers.chrome.com.
Run a Lighthouse audit and suggest fixes. Also capture
a performance trace and identify which resources take
the longest to load.Mobile emulation + navigation:
Go to developer.chrome.com on a Pixel 7 in portrait mode,
click the hamburger menu, and list the top-level
navigation items.Memory leak detection:
Navigate through the SPA on localhost:8080 — go to the
dashboard, then settings, then back to dashboard. Take a
heap snapshot and identify any detached DOM nodes.Network diagnostics:
A few images on localhost:8080 are not loading. Navigate
there, list all network requests, and tell me which ones
failed and why.WebMCP testing:
List the WebMCP tools on this page, invoke the search
tool with 'test query', and verify the return payload
matches the expected schema.Giving an AI agent access to your browser is powerful — and requires caution:
| Concern | Mitigation |
|---|---|
| Browser exposure | Agent can read, inspect, debug, and modify any data in the browser. Only connect in isolated sessions. |
| Authenticated sessions | Auto-connect inherits cookies and logged-in accounts. Use a separate browser profile for agent sessions. |
| Remote debugging port | Any app on the machine can connect when the debugging port is open. Close after use. |
| Sensitive headers | Use --redactNetworkHeaders to prevent agents from reading auth tokens and API keys. |
| Isolated mode | Use --isolated flag for headless sessions — creates a temp user data directory cleaned on exit. |
The Chrome DevTools for Agents ecosystem is evolving fast. The GitHub repository has 42.7k stars and is at v1.1.1 as of June 2026. Chrome 149 updates arrived just two days ago, and Google I/O 2026 signaled heavy investment in agentic development workflows.
For developers building WebMCP-enabled websites, the combination of DevTools for Agents 1.0 and Chrome 149 debugging tools is the missing piece — you can now develop, test, and debug your WebMCP integration end-to-end, entirely through AI agent interactions.
For a deeper dive into WebMCP itself — how to make your website agent-ready, the navigator.modelContext API, and integration patterns — see my WebMCP Guide: Making Websites Agent-Ready for AI.
I provide AI-assisted web development services
--headless flag runs Chrome without a visible window, perfect for automated testing. The --slim mode provides basic browsing with a smaller resource footprint.WebMCPTesting and DevToolsWebMCPSupport flags, then either: (a) start the MCP server with --categoryExperimentalWebmcp and use agent prompts to test tools, or (b) open DevTools → Application panel → WebMCP sidebar for visual inspection and manual invocation.navigator.modelContext for visiting AI agents. Regular MCP is a server-to-LLM protocol for connecting AI applications to external tools and data sources. They complement each other. See the WebMCP guide for details.--redactNetworkHeaders to mask sensitive HTTP headers. Use --isolated in headless mode for a disposable session. Never connect an agent to a browser with sensitive authenticated sessions unless you explicitly intend the agent to work with them.Chrome DevTools for Agents 1.0 represents a major milestone in AI-assisted development. The ability to give AI coding agents full browser debugging capabilities — from Lighthouse to memory profiling and WebMCP testing — transforms agents from "code generators" into genuine development partners.
I'm a full-stack developer with deep experience in browser technologies, AI integration, and modern web APIs. If you're exploring AI-driven development workflows or planning to make your website agent-ready with WebMCP, let's talk — I provide free initial consultations.
Working with AI agents and browser debugging? I can help you set up DevTools for Agents, implement WebMCP, and build for the agentic web.