Agentic Coding and WebMCP Integration

Chrome DevTools for Agents has reached version 1.0, enabling coding agents to interact directly with live browsers. This eliminates guesswork by providing agents with a real-time feedback loop. Key capabilities include:

  • Lighthouse Integration: Agents can now run full Lighthouse audits to identify regressions in accessibility, SEO, and performance.
  • Extension Debugging: Agents can inspect extension-specific pages and runtime scripts.
  • Custom Tooling: Frameworks can expose custom JavaScript-based tools at runtime, which agents can consume to debug complex page behaviors.
  • WebMCP Debugging: A new section in the Application panel allows developers to list, track, and manually trigger WebMCP tools, enabling safer verification of how websites expose specialized functionality to AI agents.

Upgraded AI Assistance and CSS Productivity

The AI assistance panel, now powered by Gemini, has shifted from plain text to a widget-based interface. This allows for:

  • Actionable Insights: Specialized widgets for Core Web Vitals and LCP breakdowns allow users to click directly into the raw data source within DevTools.
  • Seamless Handoff: A new "copy to coding agent" button allows developers to transfer investigation results or condensed summary prompts directly to their local codebase.
  • CSS Suggestions: The Styles tab now features Gemini-powered code suggestions, simplifying the creation of complex CSS values like gradients and shadows (enabled via Settings > AI Innovations).

Quality-of-Life and Accessibility Improvements

  • APCA Contrast: The Advanced Perceptual Contrast Algorithm (APCA) has graduated from experimental status, offering a modern alternative to legacy AA/AAA guidelines. It can be set as the default in Settings > Preferences > Elements.
  • Network Panel: A new request number column tracks the absolute chronological order of network requests, supporting easier sorting and debugging.
  • Speculative Loads: The Application panel now supports filtering speculation rules by URL or status.
  • Accessibility: The accessibility tree toggle has been relocated to a dedicated toggle within the Elements panel's accessibility sidebar for better discoverability.