What's new in DevTools, Chrome 133

Sofia Emelianova
Sofia Emelianova
GitHub

Persistent AI chat history

The AI assistance panel now locally persists your chat history across sessions, so you can view your previous conversations with Gemini even after reloading DevTools or Chrome.

Performance panel improvements

This version brings a number of improvements to the Performance panel.

Image delivery insight

The Performance > Insights tab can now highlight images whose file size you can optimize. Click an image in the insight to see it highlighted in the Network track.

The Performance panel with the image delivery insight highlighted.

To learn more about how to optimize image delivery, see Efficiently encode images.

Classic and modern keyboard navigation

The Performance panel now lets you choose your preferred style of keyboard navigation, with the following main differences:

  • Classic: Zoom with mouse wheel (touchpad up or down) and vertical scroll with Shift + mouse wheel.
  • Modern: Vertical scroll with mouse wheel, horizontal scroll with Shift + mouse wheel, and zoom with Command/Control + mouse wheel.

To choose your preferred style, in the top-right corner of the panel, click Show shortcuts and select Classic or Modern. The shortcuts dialog also provides you with a cheatsheet of the available shortcuts.

The shortcuts dialog with the available shortcuts for the Performance panel.

Ignore irrelevant scripts in the flame chart

To better focus on your code, you can now add irrelevant scripts to ignore list right in the Performance panel. The panel will automatically collapse excessive nesting.

To add scripts to ignore list, click Show ignore list settings dialog in the top action bar and type a regular expression in the input field. The flame chart will apply the new rule as you type.

DevTools saves the ignore list rules you add in Settings > Ignore list and you can turn them on and off in the dialog at will.

Timeline marker and range highlighting on hover

To help you better understand the performance trace, the Performance panel now does the following:

  • Shows you a vertical marker that spans the entire performance trace when you hover over the Timeline.
  • Highlights a range in the Timeline when you hover over items in the Main track.

Recommended throttling settings

The Performance panel now recommends throttling settings both in live metrics and in the relevant Capture settings drop-down menus.

The before and after adding throttling recommendations to the setting menus.

The recommended CPU throttling is (for now) the most frequently used 4x slowdown and the network recommendation is based on Chrome UX Report data, if it's turned on in live metrics.

Additionally, the Performance panel now reminds you the throttling settings you used next to each trace in the Recent sessions drop-down menu in the action bar.

Timings markers in an overlay

Timings markers moved from the Timings track to the bottom of the trace and are now overlaid on top of all tracks and are visible even if the Timings track is hidden.

Before and after moving markers to the bottom of the trace.

The Timings track retains your custom mark() and measure() calls.

Stack traces of JavaScript calls in Summary

The Performance > Summary tab now shows you stack traces of JavaScript calls, including async ones.

Before and after adding stack traces to the Summary tab.

Badge settings moved to menu in Elements

Badge settings in the Elements panel moved from a hidden by default action bar to the corresponding right-click menu.

Before and after moving badge settings to the menu.

New 'What's new' panel

The What's new panel gets a new look that more closely follows Chrome's design.

The old and new look of the 'What's new' panel.

Chromium issue: 325441858.

Lighthouse 12.3.0

The Lighthouse panel now runs Lighthouse 12.3.0.

This update adds, among other things, new audits that check for proper origin isolation with COOP and strong HSTS policy. See the full list of changes.

To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed.

Chromium issue: 40543651.

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

  • Sources: When paused, the Debugger now doesn't unexpectedly switch to service worker context if it's created after the pause (373893057).
  • Performance:
    • Upon hovering over scripts, tooltips in the flame chart now show URLs, if any (368541957).
    • Summary: Pie chart is replaced with a bar representation.
    • The Extension data checkbox in Capture settings is renamed into Show custom tracks.
    • The Insights tab now has a Passed insights (N) section, collapsed by default.
  • Application > Storage: You can create storage entries with empty keys because they are technically valid (373703285).
  • Device mode is now disabled for chrome:// pages (40186276).
  • Network:
    • With the corresponding setting turned on, clicking Export HAR once now opens a menu with two options (sanitized and with sensitive data). Previously, the menu opened with a long-click (378076279).
    • Copy as cURL now uses the -b attribute to bypass cookies and be more readable, instead of -H 'cookie:...' (40791742).
  • Accessibility: You can now move tabs inside panels left or right with a context menu (383164782).
  • Network request blocking: This command menu setting is now in sync with the corresponding checkbox (378058733).

Download the preview channels

Consider using the Chrome Canary, Dev, or Beta as your default development browser. These preview channels give you access to the latest DevTools features, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.