What’s new in DevTools 136-138

Key Concepts

• Workspaces (automatic and manual setup)
• CSS corner-shape property (squirle corners)
• Debugging calc and var statements
• AI assistance for styling (persisting changes to workspaces, screenshots in prompts)
• AI assistance for performance (chatting about performance insights, auto-labeling trace annotations)
• DOM issues highlighting in Elements panel

Workspaces Setup

Manual Workspace Setup

1. Open the Sources panel in Chrome DevTools.
2. Click "select folder" in the center of the panel or switch to "workspace" in the top left and click "add folder".
3. Use the file browser to select the source code directory for the inspected site.
4. Confirm that DevTools can edit files in the directory.

Automatic Workspace Discovery (Chrome 137+)

1. DevTools looks for a well-known JSON file served by the development server.
2. The JSON file must include a unique ID and the absolute file path to the local repository.
3. DevTools displays the folder name with a "connect" button.
4. Click the "connect" button to connect the workspace to DevTools.

CSS Updates

Squirle Corners (Chrome 136-138)

• The corner-shape property allows creating squirle corners (part circle, part square).
• Values include squirle, bevel, round, and more.
• The browser handles the underlying math.

Debugging calc and var Statements (Chrome 137+)

• DevTools provides tools to debug complex calc and var statements.
• Hover over var or calc usage to see the underlying values explained.
• Hover over nested statements to see their values.

AI Assistance for Styling (Chrome 137+)

Persisting Changes to Workspaces

1. Apply a fix using AI assistance.
2. Changes are collected in the "unsaved changes" panel.
3. Expand the panel to see all changes.
4. Click "apply to workspace" to transfer fixes to files in the connected workspace.
5. Gemini AI matches CSS selectors from the inspected page to the source code, even unraveling changes made by build tools (e.g., hashed class names).
6. Review the matches by looking at the file paths.
7. Click "save all" to save fixes or "discard" if there are mismatches.
8. Alternatively, copy fixes to the clipboard using the copy icon.

Screenshots in Prompts

• Append screenshots to prompts for better visual understanding.
• Click the camera icon next to the prompt input to take a screenshot of the current viewport.
• Ensure the element in question is visible in the screenshot.

AI Assistance for Performance (Chrome 137+)

Chatting About Performance Insights

1. Record a trace in the Performance panel.
2. Toggle the sidebar in the top left.
3. Expand any insight by clicking on it.
4. Click "ask AI" on insights (e.g., LCP, render-blocking requests) to open the AI assistance panel.
5. Use pre-suggested prompts or ask custom questions.
6. Chrome 136 and 137 introduced more insights, such as "use efficient cache timelines" and "legacy JavaScript."

Auto-Labeling Trace Annotations (Chrome 138+)

1. Go to Settings > AI Innovations and enable the "auto annotations" toggle.
2. In the main thread activities of a recorded performance trace, right-click any entry.
3. Select "label entry" from the context menu.
4. Click the floating pencil icon to generate a label.

DOM Issues Highlighting (Chrome 138+)

• DevTools highlights issues with DOM elements in the Elements panel DOM tree using squiggly lines.
• Examples include invalid descendants or mismatching aria labels.
• Hover over an underlined element to see a tooltip with more information.

Conclusion

Chrome DevTools has been updated with several new features in versions 136-138. These updates include improvements to workspace setup, new CSS capabilities like squirle corners, enhanced debugging tools for calc and var statements, and AI assistance for both styling and performance analysis. The AI assistance features allow for more efficient styling workflows and deeper insights into performance bottlenecks. Additionally, the DOM issues highlighting feature helps developers identify and fix common DOM-related problems.