What’s new in DevTools 139-141

Key Concepts

• HTTP Save-Data header
• Network client hints
• Baseline (web platform support)
• View transitions
• AI assistance in DevTools (Gemini)
• Automatic Dark Mode

HTTP Save-Data Header Emulation

• Main Topic: Emulating the HTTP Save-Data header in DevTools.
• Key Points:
  • The HTTP Save-Data header indicates a client's preference for reduced data usage.
  • Sites can deliver alternative content (smaller images/videos, different markup/styling, disabled lazy loading) when the header is set to "on."
  • DevTools now allows emulation of this header.
• Step-by-Step Process:
  1. Go to the Network panel.
  2. Click the Network conditions icon in the top bar.
  3. In the Network conditions panel, open the Save-Data dropdown.
  4. Toggle between "default," "force on," and "force off."
• Network Panel Improvement: Ability to show request headers in the request table, in addition to response headers.

Baseline Support in DevTools

• Main Topic: Integration of Baseline information into DevTools.
• Key Points:
  • Baseline indicates the level of support for web platform features across different browsers.
  • When hovering over a CSS property in the Styles panel, the tooltip now includes Baseline information.
  • Baseline information indicates if a feature has "limited availability," is "newly available," or is "widely available."
• Example: Hovering over a CSS property will show a tooltip indicating its Baseline status.
• Resource: web.dev/baseline for more information on Baseline.

View Transition Debugging Improvements

• Main Topic: Enhanced debugging support for view transitions in DevTools.
• Key Points:
  • View transitions allow for smooth animations between DOM states with minimal code.
  • DevTools improvements ensure that view-transition-group-children pseudo-elements are visible in the Elements panel.
  • Animation styles are also visible in the Styles panel.
• Example: Bramus' I/O session is recommended for those getting started with view transitions.

AI Assistance Enhancements

• Main Topic: Updates to AI assistance (powered by Gemini) in DevTools.
• Key Points:
  • AI assistance can be accessed via the three-dot menu in the top right of DevTools.
  • Users can chat with Gemini about styling, performance, network, and sources.
• Styling: Users can now upload their own images as references for styling chats, instead of only using screenshots.
• Performance: AI assistance is now available for "duplicate JS," "legacy JS," and "modern HTTP" insights in the Performance Insights sidebar.
  • This provides tailored advice for website optimization.

Bonus Tip: Automatic Dark Mode

• Main Topic: Easier testing of dark mode CSS with DevTools.
• Step-by-Step Process:
  1. Click the brush icon in the Styles panel.
  2. Toggle "Automatic Dark Mode" to force the dark mode layer to show.
  3. Use the Rendering panel to toggle other media queries for debugging layout variants.

Synthesis/Conclusion

The video highlights several new features and improvements in Chrome DevTools (versions 139-141). These updates focus on enhancing developer workflows by providing better insights into network behavior (Save-Data header emulation), web platform support (Baseline integration), animation debugging (view transitions), and AI-powered assistance (Gemini enhancements). The addition of Automatic Dark Mode provides a quick way to test dark mode implementations. The overall goal is to streamline the debugging and development process, making it easier for developers to build performant and accessible web applications.