Google has recently released major updates to Chrome v137 Developer Tools (Chrome DevTools), integrating the Gemini AI assistant, which brings unprecedented performance analysis and debugging experiences for developers. From intelligent annotation of performance tracking to saving CSS modifications, the new features in Chrome v137 significantly improve development efficiency. AIbase has compiled the latest information to provide a detailed explanation of the highlights and application prospects of this update.
Gemini Intelligent Annotation: More Intuitive Performance Analysis
The new version of Chrome DevTools introduces the Gemini intelligent annotation function. Developers can double-click events on the main track (Main Track) in the performance tracking and click the "Generate Label" button to let Gemini automatically generate event labels based on stack traces and context. This greatly simplifies the performance analysis process, helping developers quickly understand the meaning of complex performance data. In addition, developers can add labels, link events, and even share annotation results in the "Annotations" tab, enhancing team collaboration efficiency.
AI-Driven CSS Debugging: One-Click Modification and Save
The new version of DevTools allows developers to directly modify and fix CSS via the Gemini AI assistant. Simply click "Ask AI" in the "Elements" panel, enter the CSS modification requirements, and Gemini will generate the code and support real-time preview. Combined with the experimental auto workspace feature, developers can save modified CSS, JavaScript, or HTML files directly to local source files, greatly improving debugging efficiency. AIbase believes that this feature will significantly shorten the workflow of front-end development.
New Insights in Performance Panel: Discover Hidden Problems
Chrome v137's performance panel adds two key insights: duplicate JavaScript and traditional JavaScript. These insights help developers identify redundant and outdated parts in their code, optimizing website loading speed and runtime performance. Additionally, developers can start a one-click conversation with Gemini to deeply analyze performance bottlenecks and receive targeted optimization suggestions.
Visual Assistance and Screenshots: Debugging with More Context
To enhance the intuitiveness of debugging, Chrome v137 adds screenshot functionality to the AI-assisted panel. Developers can capture page screenshots by clicking the "Take Photo" button and submit them as context to Gemini for analyzing page layout or style issues, such as checking if button spacing is consistent. This feature provides richer contextual support for visual debugging.
Gemini Empowers the Developer Ecosystem
The update of Chrome v137 DevTools marks the deep integration of AI into developer tools. Gemini not only simplifies complex tasks through intelligent annotations and CSS modifications but also provides comprehensive debugging support through performance insights and screenshot functions. AIbase believes that with the further integration of local AI models like Gemini Nano, Chrome DevTools has the potential to become a "super assistant" for front-end developers, pushing web development efficiency to new heights.
Conclusion
The update of Chrome v137 developer tools, centered around Gemini AI, brings a series of innovative features such as intelligent annotation, automatic CSS modification, and performance optimization insights, providing developers with more efficient and intuitive debugging experiences.