Chrome DevTools 149 | Adds AI assistance, WebMCP and CSS tools
Chrome DevTools 149 is rolling out with a strong focus on AI-assisted debugging, agent workflows, CSS editing, accessibility, and more reliable responsive testing. Published on June 2, 2026, the update makes DevTools for agents officially stable, upgrades AI assistance with Lighthouse insights and visual widgets, and introduces experimental WebMCP debugging tools inside the Application panel.
Chrome DevTools 149 improves AI debugging and CSS workflows
Chrome DevTools 149 is a practical release for teams building modern websites, design systems, dashboards, apps, and AI-assisted development workflows. The update is not limited to one panel; it touches agent tooling, performance analysis, CSS authoring, accessibility checks, responsive testing, storage inspection, and live debugging.
The biggest direction is clear: DevTools is becoming more useful for both humans and AI coding agents. Instead of only inspecting pages manually, developers can now connect more debugging context to agent workflows, copy DevTools conversations into coding tools, and experiment with page-exposed tools through WebMCP.
DevTools for agents is now stable
The Chrome team says the MCP server and CLI for Chrome DevTools for agents are now officially stable. This is important because AI coding agents can use browser-level debugging data instead of working only from static files, screenshots, or incomplete assumptions.
Chrome DevTools for agents now includes support for page-exposed third-party tools, WebMCP debugging, and custom HTTP headers emulation. These additions can help agents interact with more realistic development environments, including pages that need authentication tokens, custom user agents, or specialized debugging tools.
Some of the new third-party and WebMCP features are still experimental and are not enabled by default. That means developers can start exploring them, but production workflows should still treat them as early-stage tools that need testing and careful configuration.
AI assistance gets Lighthouse and visual widgets
The AI assistance panel has received a major interface update. Instead of only returning plain text Markdown, AI assistance can now show widgets directly inside the chat experience. These widgets can surface Core Web Vitals, LCP elements, LCP breakdowns, Bottom-up thread activity, and other page insights.
AI assistance also has access to Lighthouse and related insights, allowing it to analyze a page more holistically and provide more targeted recommendations. For frontend teams, this can make performance conversations more connected to actual DevTools data instead of generic optimization advice.
Another useful addition is Copy to coding agent. Conversations can now end with a button that copies either a summarized prompt or the full conversation, so developers can paste that context into their coding agent of choice and continue the work outside DevTools.
WebMCP debugging arrives in the Application panel
Chrome DevTools 149 introduces experimental WebMCP debugging tools in the Application panel sidebar. WebMCP, or Web Model Context Protocol, is a proposed web standard that allows web pages to register tools that visiting LLM agents can use.
The new debugging tools let developers inspect client-side tools and their schemas, manually run tool execution with custom parameters, track active or pending tool invocation events, and inspect return payloads. This gives developers a clearer way to understand how an agent-facing website exposes tools and how those tools behave during execution.
Because WebMCP is still in early preview, developers need to enable the related Chrome flags before experimenting. For teams exploring agent-ready websites, this is an early but important step toward debugging how AI agents may interact with real web interfaces.
CSS code completion and APCA contrast improvements
Chrome DevTools 149 also expands AI-powered code completion to CSS in the Styles tab. With Gemini-based suggestions enabled, developers can get help while writing more complex CSS patterns, including gradients, box shadows, grid layouts, and flexbox combinations.
This can be useful when testing visual ideas directly inside DevTools. Instead of leaving the browser to look up syntax, a designer or developer can experiment faster while still editing the final result manually.
Accessibility also receives an important update: APCA contrast guidelines have moved out of the experimental phase and are now available as a standard preference setting. APCA provides a more modern perceptual contrast model for evaluating text contrast on current displays and rendering environments.
Device Mode and smaller debugging improvements
Responsive Device Mode now uses a dynamic user agent heuristic instead of a hardcoded old Android and Nexus 5 user agent. This matters because modern websites can behave differently when they detect outdated environments, which can make testing less accurate.
The release also includes smaller improvements across the Console, Application, Elements, Network, and Performance panels. These include collapse and expand controls for console groups, better storage bucket navigation, improved Service Worker storage inspection, Server-Sent Events support in HAR exports, and fixes related to Core Web Vitals tracking.
Daisuki's Take: What This Means for Web Designers
We see Chrome DevTools 149 as an important release because it makes browser debugging more connected to real design and development workflows. The strongest value is not just AI assistance, but the way DevTools can now combine performance evidence, Lighthouse insights, CSS editing, accessibility checks, and agent-ready debugging in one place.
For web designers and creative teams, this can improve how templates, landing pages, dashboards, UI components, and responsive layouts are tested before production. AI assistance can help surface performance and CSS issues faster, while WebMCP and DevTools for agents point toward a future where websites may need to be designed for both human users and AI-driven interactions.
The limitation is that AI-powered debugging still needs human judgment. We still need to review visual hierarchy, accessibility, responsive behavior, CSS quality, performance tradeoffs, and whether the recommended fix matches the design system. DevTools can make problems easier to find, but designers and developers still need to decide what makes the final experience clear, stable, and usable.
Sources and Recommended Links
- What's new in DevTools (Chrome 149) | Chrome for Developers (Official)
- Chrome DevTools | Chrome for Developers (Official)
- Chrome DevTools MCP | Chrome for Developers (Official)
