What’s new in DevTools 142 - 144

Key Concepts

• Model Context Protocol (MCP): A new protocol enabling AI agents to utilize DevTools functionalities via a dedicated API.
• DevTools MCP Server: Chrome DevTools’ implementation supporting the MCP, facilitating AI agent integration.
• Performance Trace Chat: Direct AI-assisted analysis of full performance traces within the Performance panel.
• Trace Sharing with Source Data: Exporting performance traces including HTML, CSS, JavaScript, and source maps for collaborative debugging.
• Request Conditions: Refined network request control allowing throttling instead of complete blocking.
• VIP Consoling: Gemini-powered code suggestions within the Console and Sources panels.
• DevTools Draw: Customizable layout feature for arranging DevTools panels.

Model Context Protocol & AI Integration

Chrome DevTools versions 142-144 introduce support for the Model Context Protocol (MCP), a new protocol designed to allow AI agents to interact with DevTools in the same way a developer does. This is achieved through the DevTools MCP Server, a dedicated server that implements the protocol. The benefit of adopting a widely accepted protocol like MCP is that it enables compatibility with various AI agents, including Gemini CLI, Gemini with Cursor, Clojure, VS Code with Copilot, and others, regardless of the underlying AI model. Once configured, these agents can control a real, local Chrome browser, performing actions like page navigation, form filling, screenshot capture, and utilizing DevTools features such as inspecting HTML and CSS, examining console logs, and analyzing network requests. Installation instructions for over 15 clients are available via a provided link.

Performance Trace Analysis Enhancements

Starting with Chrome 142, users can now directly chat with AI assistance about a complete performance trace without needing to pre-select any specific context. This functionality is accessible within the Performance panel; after recording a trace, users can initiate a chat session. The system allows for refining the context during the chat by selecting specific performance insights or activities directly from the trace.

Chrome 143 and later versions improve collaboration by enhancing trace sharing. When exporting a trace from the Performance panel, users can now optionally include all associated HTML, CSS, JavaScript files, and source maps. This inclusion allows collaborators to view original function names and source files, significantly aiding debugging efforts. Documentation clarifies when sharing this additional data is most beneficial.

Network Request Control: Request Conditions

The Network panel’s request blocking functionality has been renamed to Request Conditions. This reflects an expanded capability: while still allowing complete request blocking based on defined patterns, it now also enables throttling of requests. Throttling simulates slower loading times for resources like images, fonts, styles, and scripts, allowing developers to observe the impact of performance bottlenecks without completely preventing resource loading.

Gemini-Powered Code Suggestions: "VIP Consoling"

A new feature, playfully termed “VIP Consoling,” introduces Gemini-powered code suggestions within the Console and Sources panels. This functionality, enabled through AI innovation settings, provides type-ahead suggestions as the user types. The speaker clarifies this is a suggestion feature, not code generation; users must still type a portion of the code to provide Gemini with sufficient context for relevant completions. The feature is activated by typing and then pressing the “Tab” key to accept the suggestion.

DevTools Layout Customization: DevTools Draw

A new feature called DevTools Draw allows users to customize the layout of DevTools panels with a single click. This enables flexible arrangement of panels, such as placing the Elements panel next to the Sources panel or the Performance panel next to the Network panel. The speaker emphasizes the extensive possibilities for personalized layouts, allowing users to display only the information they need in a preferred configuration.

Notable Quote

“Isn’t it great? Things just work. Plug and play. It’s such a smooth and seamless experience. Just like integrating the new DevTools MCP server with your favorite AI agent.” – Matias, highlighting the ease of integration of new features.

Technical Terms

• Performance Trace: A detailed record of browser activity during a specific period, used for performance analysis.
• Source Maps: Files that map compiled code (e.g., minified JavaScript) back to its original, human-readable source code.
• Throttling: Intentionally slowing down network requests to simulate slower connection speeds or resource loading times.
• AI Agent: Software that can perform tasks autonomously, often leveraging machine learning models.

Logical Connections

The video progresses logically from introducing the overarching theme of seamless integration (MCP) to detailing specific improvements in performance analysis, network debugging, code assistance, and user interface customization. Each section builds upon the idea of enhancing developer workflows and leveraging AI to improve efficiency. The introduction of MCP sets the stage for the AI-powered features, while the enhancements to trace sharing and request conditions address practical debugging needs. Finally, DevTools Draw provides a user-centric improvement to the overall development experience.

Conclusion

Chrome DevTools versions 142-144 deliver significant enhancements focused on AI integration, performance debugging, and developer experience. The introduction of the Model Context Protocol opens up new possibilities for AI-assisted development, while improvements to performance trace analysis and network request control provide developers with more powerful tools for identifying and resolving issues. The addition of Gemini-powered code suggestions and the customizable DevTools Draw feature further streamline the development workflow. The overall theme is one of seamless integration and increased developer productivity.