![Jecelyn Yeen](https://web.dev/images/authors/jecelynyeen.jpg) Jecelyn Yeen [X](https://twitter.com/jecfish) [GitHub](https://github.com/jecfish) [Bluesky](https://bsky.app/profile/jec.fish) [Homepage](https://jec.fish/)

<br />

> [!NOTE]
> **Note:** Interested in helping improve DevTools? Sign up to participate in [Google User Research here](https://google.qualtrics.com/jfe/form/SV_9YbKj35IGoGsDBj?reserved=1&utm_source=Website+feature&Q_Language=en&utm_medium=own_web&utm_campaign=Q4&productTag=chrm&campaignDate=November2020&referral_code=UXFm430458).

[Video](https://www.youtube.com/watch?v=u9GRAliBrM8)

## Import and export recorded user flows as a JSON file

The [Recorder](https://developer.chrome.com/docs/devtools/recorder) panel now supports importing and exporting user flow recordings as a JSON file. This addition makes it easier to share user flows and can be useful for bug reporting.

For example, download this [JSON file](https://developer.chrome.com/static/blog/new-in-devtools-101/recorder.json). You can import it with the import button and [replay the user flow](https://developer.chrome.com/docs/devtools/recorder#replay).

Apart from that, you can export the recording as well. After [recording a user flow](https://developer.chrome.com/docs/devtools/recorder#record), click on the export button. There are 3 export options:

- **Export as a JSON file**. Download the recording as a JSON file.
- **Export as a @puppeteer/replay script** . Download the recording as a [Puppeteer Replay](https://github.com/puppeteer/replay) script.
- **Export as a Puppeteer script** . Download the recording as [Puppeteer](https://pptr.dev/) script.

Consult [the documentation](https://developer.chrome.com/docs/devtools/recorder#export-flows) to learn more about the differences between these options.

![Export options in the Recorder panel](https://developer.chrome.com/static/blog/new-in-devtools-101/image/export-options-the-recor-957c17d99f555.png)

Chromium issue: [1257499](https://crbug.com/1257499)

## View cascade layers in the Styles pane

[Cascade layers](https://developer.chrome.com/blog/cascade-layers) enable more explicit control of your CSS files to prevent style-specificity conflicts. This is particularly useful for large codebases, design systems, and when managing third party styles in applications.

In this [example](https://jec.fish/demo/cascade-layer), there are 3 cascade layers defined: `page`, `component` and `base`. In the **Styles** pane, you can view each layer and its styles.

Click on the layer name to view the layer order. The `page` layer has the highest specificity, therefore the `box` background is green.

![View cascade layers in the Styles pane](https://developer.chrome.com/static/blog/new-in-devtools-101/image/view-cascade-layers-the-f9d7ec8600f4b.png)

Chromium issue: [1240596](https://crbug.com/1240596)

## Support for the hwb() color function

You can now view and edit [HWB color format](https://drafts.csswg.org/css-color/#the-hwb-notation) in DevTools.

In the **Styles** pane, hold the **Shift** key and click on any color preview to change the color format. The HWB color format is added.

Alternatively, you can change the color format to HWB in the [color picker](https://developer.chrome.com/docs/devtools/css/reference#color-picker).

![hwb() color function](https://developer.chrome.com/static/blog/new-in-devtools-101/image/hwb-color-function-db77f309a49fc.png)

## Improved the display of private properties

DevTools now properly evaluates and displays private accessors. Previously, you couldn't expand classes with private accessors in the **Console** and the **Sources** panel.

![private properties in the Console](https://developer.chrome.com/static/blog/new-in-devtools-101/image/private-properties-the-c-2d39697e1298c.png)

Chromium issues: [1296855](https://crbug.com/1296855), [https://crbug.com/1303407](https://developer.chrome.com/1303407)

## Miscellaneous highlights

These are some noteworthy fixes in this release:

- The [Back/forward cache](https://developer.chrome.com/blog/new-in-devtools-98#bfcache) now displays the extension ID which blocked [bfcache](https://web.dev/articles/bfcache) when present.( [1284548](https://crbug.com/1284548))
- Fixed autocompletion support for array-like objects, CSS class names, `map.get` and HTML tags. ([1297101](https://crbug.com/1297101), [1297491](https://crbug.com/1297491), [1293807](https://crbug.com/1293807), [1296983](https://crbug.com/1296983))
- Fixed incorrect highlights when double-clicking on words and undoing autocomplete. ([1298437](https://crbug.com/1298437), [1298667](https://crbug.com/1298667))
- Fixed comment keyboard shortcut in the **Sources** panel. ([1296535](https://crbug.com/1296535))
- Re-enable support for using **Alt** (Options) key for multi selection in the **Sources** panel. ([1304070](https://crbug.com/1304070))

## \[Experimental\] New timespan and snapshot mode in the Lighthouse panel

> [!NOTE]
> **Note:** To enable the experiment, enable the **Use Lighthouse panel with timespan and snapshot modes** checkbox under **Settings** \> **Experiments**.

Apart from the existing **navigation** mode, the **Lighthouse** panel now support two more modes on measuring user flows - **timespan** and **snapshot**.

For example, you can use the **timespan** reports to analyze user interactions. Open this [demo](https://coffee-cart.netlify.app/) page. Select the **Timespan** mode and click on **Start timespan** . On the page, click on a coffee and end the timespan. Read the report to find out the [Total Blocking Time](https://web.dev/articles/tbt) and [Cumulative Layout Shift](https://web.dev/articles/cls) that were caused by the interaction.

Each mode has its own unique use cases, benefits, and limitations. Please refer to the [Lighthouse documentation](https://github.com/GoogleChrome/lighthouse/blob/master/docs/user-flows.md) for more information.

![Timespan and snapshot mode in the Lighthouse panelhouse](https://developer.chrome.com/static/blog/new-in-devtools-101/image/timespan-snapshot-mode-0bcb0f5041602.png)

Chromium issue: [772558](https://crbug.com/772558)

## Download the preview channels

Consider using the Chrome [Canary](https://www.google.com/chrome/canary/), [Dev](https://www.google.com/chrome/dev/), or [Beta](https://www.google.com/chrome/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.

- Submit feedback and feature requests to us at [crbug.com](https://crbug.com).
- Report a DevTools issue using the **More options** \> **Help** \> **Report a DevTools issue** in DevTools.
- Tweet at [@ChromeDevTools](https://twitter.com/intent/tweet?text=@ChromeDevTools).
- Leave comments on [What's new in DevTools YouTube videos](https://goo.gle/devtools-youtube) or [DevTools Tips YouTube videos](https://goo.gle/devtools-tips).

## What's new in DevTools

A list of everything that has been covered in the [What's new in DevTools](https://developer.chrome.com/docs/devtools/news) series.

### Chrome 143

- [DevTools MCP server updates](https://developer.chrome.com/blog/new-in-devtools-143#mcp)
- [Improved trace sharing](https://developer.chrome.com/blog/new-in-devtools-143#trace-sharing)
- [Support for @starting-style](https://developer.chrome.com/blog/new-in-devtools-143#starting-style)
- [Editor widget for display: masonry](https://developer.chrome.com/blog/new-in-devtools-143#masonry)
- [Lighthouse 13](https://developer.chrome.com/blog/new-in-devtools-143#lighthouse)

### Chrome 142

- [Code suggestions from Gemini](https://developer.chrome.com/blog/new-in-devtools-142#code-suggestions)
- [Enhancements for the DevTools MCP server](https://developer.chrome.com/blog/new-in-devtools-142#mcp)
- [Quicker access to AI assistance](https://developer.chrome.com/blog/new-in-devtools-142#ai-assistance)
- [Debug the full performance trace with Gemini](https://developer.chrome.com/blog/new-in-devtools-142#performance)
- [Toggle drawer orientation](https://developer.chrome.com/blog/new-in-devtools-142#drawer-orientation)
- [Google Developer Program](https://developer.chrome.com/blog/new-in-devtools-142#google-developer-program)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-142#misc)

### Chrome 141

- [Chrome DevTools (MCP) for your AI agent](https://developer.chrome.com/blog/new-in-devtools-141#mcp)
- [Debug the network dependency tree with Gemini](https://developer.chrome.com/blog/new-in-devtools-141#ai-insight)
- [Export your chats with Gemini](https://developer.chrome.com/blog/new-in-devtools-141#ai-chat-export)
- [Persisted track configuration in the Performance panel](https://developer.chrome.com/blog/new-in-devtools-141#persisted-track-config)
- [Filter IP protected network requests](https://developer.chrome.com/blog/new-in-devtools-141#ipp)
- [Elements \> Layout tab adds masonry layout support](https://developer.chrome.com/blog/new-in-devtools-141#masonry)
- [Lighthouse 12.8.2](https://developer.chrome.com/blog/new-in-devtools-141#lighthouse)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-141#misc)

### Chrome 140

- [Debug more insights with Gemini](https://developer.chrome.com/blog/new-in-devtools-140#ai-insights)
- [Emulate the 'Save-Data' header in 'Network conditions'](https://developer.chrome.com/blog/new-in-devtools-140#save-data)
- [See the Baseline status in a CSS property tooltip](https://developer.chrome.com/blog/new-in-devtools-140#baseline-tooltip)
- [Override form factors in user agent client hints](https://developer.chrome.com/blog/new-in-devtools-140#form-factors)
- [Lighthouse 12.8.0](https://developer.chrome.com/blog/new-in-devtools-140#lighthouse)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-140#misc)

### Chrome 139

- [A more reliable and productive Chrome DevTools](https://developer.chrome.com/blog/new-in-devtools-139#reliable-devtools)
- [Upload images in AI assistance for styling](https://developer.chrome.com/blog/new-in-devtools-139#multimodal-input)
- [Add request headers to the table in Network](https://developer.chrome.com/blog/new-in-devtools-139#request-headers)
- [Check out the highlights from Google I/O 2025](https://developer.chrome.com/blog/new-in-devtools-139#io)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-139#misc)

### Chrome 138

- [Performance panel improvements](https://developer.chrome.com/blog/new-in-devtools-138#perf)
- [Preconnected origins in 'Network dependency tree' insight](https://developer.chrome.com/blog/new-in-devtools-138#preconnect)
- [Server response and redirection times in 'Document request latency' insight](https://developer.chrome.com/blog/new-in-devtools-138#doc-req-latency-times)
- [Redirects in Summary of network requests](https://developer.chrome.com/blog/new-in-devtools-138#redirects)
- [Reduced noise in the performance trace](https://developer.chrome.com/blog/new-in-devtools-138#perf-compile-disabled)
- [Deprecated 'Disable JavaScript samples'](https://developer.chrome.com/blog/new-in-devtools-138#disable-js-samples)
- [Geolocation accuracy parameter in Sensors](https://developer.chrome.com/blog/new-in-devtools-138#geo-accuracy)
- [Elements panel improvements](https://developer.chrome.com/blog/new-in-devtools-138#elements)
- [Debug complex CSS values easier](https://developer.chrome.com/blog/new-in-devtools-138#debug-css-values)
- [@function support in Elements \> Styles](https://developer.chrome.com/blog/new-in-devtools-138#at-function)
- [Network panel improvements](https://developer.chrome.com/blog/new-in-devtools-138#network)
- [has-request-header filter](https://developer.chrome.com/blog/new-in-devtools-138#has-request-header)
- [Direct Sockets in Isolated Web Apps](https://developer.chrome.com/blog/new-in-devtools-138#direct-sockets)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-138#misc)
- [Accessibility](https://developer.chrome.com/blog/new-in-devtools-138#accessibility)

### Chrome 137

- [Google I/O 2025 edition](https://developer.chrome.com/blog/new-in-devtools-137#io-edition)
- [Modify and save CSS changes to your workspace with Gemini](https://developer.chrome.com/blog/new-in-devtools-137#ai-styling)
- [Connect a workspace folder and save changes back to your source files](https://developer.chrome.com/blog/new-in-devtools-137#workspace)
- [Ask Gemini about performance insights](https://developer.chrome.com/blog/new-in-devtools-137#ai-insights)
- [Annotate performance findings with Gemini](https://developer.chrome.com/blog/new-in-devtools-137#ai-annotations)
- [Add screenshots to your chats with Gemini](https://developer.chrome.com/blog/new-in-devtools-137#ai-screenshot)
- [New insights in the Performance panel](https://developer.chrome.com/blog/new-in-devtools-137#new-perf-insights)
- [Duplicated JavaScript](https://developer.chrome.com/blog/new-in-devtools-137#duplicated-js)
- [Legacy JavaScript](https://developer.chrome.com/blog/new-in-devtools-137#legacy-js)
- [Speculations now support rule tags](https://developer.chrome.com/blog/new-in-devtools-137#speculation-rule-tags)
- [Lighthouse 12.6.0](https://developer.chrome.com/blog/new-in-devtools-137#lighthouse)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-137#misc)
- [Accessibility](https://developer.chrome.com/blog/new-in-devtools-137#accessibility)

### Chrome 136

- [Performance panel improvements](https://developer.chrome.com/blog/new-in-devtools-136#perf)
- [New performance insights](https://developer.chrome.com/blog/new-in-devtools-136#perf-insights)
- [Click to highlight](https://developer.chrome.com/blog/new-in-devtools-136#click-to-highlight)
- [Server timings in Summary of network requests](https://developer.chrome.com/blog/new-in-devtools-136#server-timings)
- [Filter cookies in 'Privacy and security'](https://developer.chrome.com/blog/new-in-devtools-136#cookies-filter)
- [Sizes in kB units in tables across panels](https://developer.chrome.com/blog/new-in-devtools-136#kb-units)
- [Autocomplete supports corner-shape and corner-\*-shape in Elements \> Styles](https://developer.chrome.com/blog/new-in-devtools-136#corner-shape-autocomplete)
- [Experimental: Highlighting issues with elements and attributes in DOM](https://developer.chrome.com/blog/new-in-devtools-136#issues-in-dom)
- [Lighthouse 12.5.0](https://developer.chrome.com/blog/new-in-devtools-136#lighthouse)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-136#misc)

### Chrome 135

- [Performance panel improvements](https://developer.chrome.com/blog/new-in-devtools-135#perf)
- [Origin and script links for profile and function calls in Performance](https://developer.chrome.com/blog/new-in-devtools-135#perf-script-origin)
- [LCP by phase field data support](https://developer.chrome.com/blog/new-in-devtools-135#lcp-field)
- [Network dependency tree insight](https://developer.chrome.com/blog/new-in-devtools-135#network-deps-tree)
- [Duration instead of total and self time in Summary](https://developer.chrome.com/blog/new-in-devtools-135#duration)
- [Heaviest stack highlighting](https://developer.chrome.com/blog/new-in-devtools-135#heaviest-stack)
- [Improved empty states for various panels](https://developer.chrome.com/blog/new-in-devtools-135#empty-panels)
- [Accessibility tree view in Elements](https://developer.chrome.com/blog/new-in-devtools-135#accessibility-tree)
- [Lighthouse 12.4.0](https://developer.chrome.com/blog/new-in-devtools-135#lighthouse)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-135#misc)

### Chrome 134

- [Privacy and security panel](https://developer.chrome.com/blog/new-in-devtools-134#privacy-and-securitys)
- [Performance panel improvements](https://developer.chrome.com/blog/new-in-devtools-134#perf)
- [Calibrated CPU throttling presets](https://developer.chrome.com/blog/new-in-devtools-134#calibrated-cpu-throttling)
- [Select different performance events in the same AI chat](https://developer.chrome.com/blog/new-in-devtools-134#perf-select)
- [First- and third-party highlighting in Performance](https://developer.chrome.com/blog/new-in-devtools-134#perf-third-party)
- [Field data in marker tooltips and insights](https://developer.chrome.com/blog/new-in-devtools-134#field-data)
- [Forced reflow insight](https://developer.chrome.com/blog/new-in-devtools-134#forced-reflow)
- ['Optimize DOM size' insight](https://developer.chrome.com/blog/new-in-devtools-134#dom-size)
- [Extend the performance trace with console.timeStamp](https://developer.chrome.com/blog/new-in-devtools-134#console-timestamp)
- [Elements panel improvements](https://developer.chrome.com/blog/new-in-devtools-134#elements)
- [Real-time values of animated styles](https://developer.chrome.com/blog/new-in-devtools-134#real-time-animation)
- [Support for :open pseudo-class and various pseudo-elements](https://developer.chrome.com/blog/new-in-devtools-134#pseudo)
- [Copy all console messages](https://developer.chrome.com/blog/new-in-devtools-134#copy-console)
- [Byte units in the Memory panel](https://developer.chrome.com/blog/new-in-devtools-134#byte-units)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-134#misc)

### Chrome 133

- [Persistent AI chat history](https://developer.chrome.com/blog/new-in-devtools-133#persistent-chat-history)
- [Performance panel improvements](https://developer.chrome.com/blog/new-in-devtools-133#perf)
- [Image delivery insight](https://developer.chrome.com/blog/new-in-devtools-133#perf-image-delivery)
- [Classic and modern keyboard navigation](https://developer.chrome.com/blog/new-in-devtools-133#perf-nav)
- [Ignore irrelevant scripts in the flame chart](https://developer.chrome.com/blog/new-in-devtools-133#ignore-list)
- [Timeline marker and range highlighting on hover](https://developer.chrome.com/blog/new-in-devtools-133#hover-highlight)
- [Recommended throttling settings](https://developer.chrome.com/blog/new-in-devtools-133#throttling)
- [Timings markers in an overlay](https://developer.chrome.com/blog/new-in-devtools-133#markers)
- [Stack traces of JS calls in Summary](https://developer.chrome.com/blog/new-in-devtools-133#perf-stack-traces)
- [Badge settings moved to menu in Elements](https://developer.chrome.com/blog/new-in-devtools-133#badge-settings)
- [New 'What's new' panel](https://developer.chrome.com/blog/new-in-devtools-133#whats-new)
- [Lighthouse 12.3.0](https://developer.chrome.com/blog/new-in-devtools-133#lighthouse)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-133#misc)

### Chrome 132

- [Debug network requests, source files, and performance traces with Gemini](https://developer.chrome.com/blog/new-in-devtools-132#ai-assistance)
- [View AI chat history](https://developer.chrome.com/blog/new-in-devtools-132#chat-history)
- [Manage extension storage in Application \> Storage](https://developer.chrome.com/blog/new-in-devtools-132#extension-storage)
- [Performance improvements](https://developer.chrome.com/blog/new-in-devtools-132#perf)
- [Interaction phases in live metrics](https://developer.chrome.com/blog/new-in-devtools-132#interaction-phases)
- [Render-blocking information in the Summary tab](https://developer.chrome.com/blog/new-in-devtools-132#render-blocking)
- [Support for scheduler.postTask events and their initiator arrows](https://developer.chrome.com/blog/new-in-devtools-132#initiators)
- [Animations panel and Elements \> Styles tab improvements](https://developer.chrome.com/blog/new-in-devtools-132#animations)
- [Jump from Elements \> Styles to Animations](https://developer.chrome.com/blog/new-in-devtools-132#animations-link)
- [Real-time updates in Computed tab](https://developer.chrome.com/blog/new-in-devtools-132#computed)
- [Compute pressure emulation in Sensors](https://developer.chrome.com/blog/new-in-devtools-132#compute-pressure)
- [JS objects with the same name grouped by source in the Memory panel](https://developer.chrome.com/blog/new-in-devtools-132#memory)
- [A new look for settings](https://developer.chrome.com/blog/new-in-devtools-132#settings)
- [Performance insights panel is deprecated and removed from DevTools](https://developer.chrome.com/blog/new-in-devtools-132#perf-insights)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-132#misc)

### Chrome 131

- [Debug CSS with Gemini](https://developer.chrome.com/blog/new-in-devtools-131#ai-assistance)
- [Control AI features in a dedicated settings tab](https://developer.chrome.com/blog/new-in-devtools-131#ai-innovations)
- [Performance panel improvements](https://developer.chrome.com/blog/new-in-devtools-131#perf)
- [Annotate and share performance findings](https://developer.chrome.com/blog/new-in-devtools-131#annotations)
- [Get performance insights right in the Performance panel](https://developer.chrome.com/blog/new-in-devtools-131#insights)
- [Spot excessive layout shifts easier](https://developer.chrome.com/blog/new-in-devtools-131#cls)
- [Spot the non-composited animations](https://developer.chrome.com/blog/new-in-devtools-131#animations)
- [Hardware concurrency moves to Sensors](https://developer.chrome.com/blog/new-in-devtools-131#hardware-concurrency)
- [Ignore anonymous scripts and focus on your code in stack traces](https://developer.chrome.com/blog/new-in-devtools-131#ignore-list)
- [Elements \> Styles: Support for sideways-\* writing modes for grid overlays and CSS-wide keywords](https://developer.chrome.com/blog/new-in-devtools-131#styles)
- [Lighthouse audits for non-HTTP pages in timespan and snapshot modes](https://developer.chrome.com/blog/new-in-devtools-131#lighthouse)
- [Accessibility improvements](https://developer.chrome.com/blog/new-in-devtools-131#accessibility)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-131#misc)

### Chrome 130

- [Network panel improvements](https://developer.chrome.com/blog/new-in-devtools-130#network)
- [Network filters reimagined](https://developer.chrome.com/blog/new-in-devtools-130#network-filters)
- [HAR exports now exclude sensitive data by default](https://developer.chrome.com/blog/new-in-devtools-130#har)
- [Elements panel improvements](https://developer.chrome.com/blog/new-in-devtools-130#elements)
- [Autocomplete values for text-emphasis-\* properties](https://developer.chrome.com/blog/new-in-devtools-130#autocomplete)
- [Scroll overflows marked with a badge](https://developer.chrome.com/blog/new-in-devtools-130#scroll-badge)
- [Performance panel improvements](https://developer.chrome.com/blog/new-in-devtools-130#perf)
- [Recommendations in live metrics](https://developer.chrome.com/blog/new-in-devtools-130#live-metrics-recommendations)
- [Navigate breadcrumbs](https://developer.chrome.com/blog/new-in-devtools-130#breadcrumbs)
- [Memory panel improvements](https://developer.chrome.com/blog/new-in-devtools-130#memory)
- [New 'Detached elements' profile](https://developer.chrome.com/blog/new-in-devtools-130#detached-elements)
- [Improved naming of plain JS objects](https://developer.chrome.com/blog/new-in-devtools-130#object-names)
- [Turn off dynamic theming](https://developer.chrome.com/blog/new-in-devtools-130#dynamic-theming)
- [Chrome Experiment: Process sharing](https://developer.chrome.com/blog/new-in-devtools-130#process-sharing)
- [Lighthouse 12.2.1](https://developer.chrome.com/blog/new-in-devtools-130#lighthouse)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-130#misc)

### Chrome 129

- [Recorder supports export to Puppeteer for Firefox](https://developer.chrome.com/blog/new-in-devtools-129#puppeteer-export)
- [Performance panel improvements](https://developer.chrome.com/blog/new-in-devtools-129#perf)
- [Live metrics observations](https://developer.chrome.com/blog/new-in-devtools-129#observations)
- [Search requests in the Network track](https://developer.chrome.com/blog/new-in-devtools-129#perf-network-search)
- [See stack traces of performance.mark and performance.measure calls](https://developer.chrome.com/blog/new-in-devtools-129#extension-stack-traces)
- [Use test address data in the Autofill panel](https://developer.chrome.com/blog/new-in-devtools-129#autofill-addresses)
- [Elements panel improvements](https://developer.chrome.com/blog/new-in-devtools-129#elements)
- [Force more states for specific elements](https://developer.chrome.com/blog/new-in-devtools-129#specific-element-states)
- [Elements \> Styles now autocompletes more grid properties](https://developer.chrome.com/blog/new-in-devtools-129#grid-autocomplete)
- [Lighthouse 12.2.0](https://developer.chrome.com/blog/new-in-devtools-129#lighthouse)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-129#misc)

### Chrome 128

- [Console insights by Gemini are going live in most European countries](https://developer.chrome.com/blog/new-in-devtools-128#console-insights)
- [Performance panel updates](https://developer.chrome.com/blog/new-in-devtools-128#perf)
- [Enhanced Network track](https://developer.chrome.com/blog/new-in-devtools-128#perf-network)
- [Customize performance data with extensibility API](https://developer.chrome.com/blog/new-in-devtools-128#perf-extension)
- [Details in the Timings track](https://developer.chrome.com/blog/new-in-devtools-128#timings-details)
- [Copy all listed requests in the Network panel](https://developer.chrome.com/blog/new-in-devtools-128#copy-all-listed)
- [Faster heap snapshots with named HTML tags and less clutter](https://developer.chrome.com/blog/new-in-devtools-128#heap-snapshots)
- [Open Animations panel to capture animations and edit @keyframes live](https://developer.chrome.com/blog/new-in-devtools-128#animations)
- [Lighthouse 12.1.0](https://developer.chrome.com/blog/new-in-devtools-128#lighthouse)
- [Accessibility improvements](https://developer.chrome.com/blog/new-in-devtools-128#accessibility)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-128#misc)

### Chrome 127

- [Inspect CSS anchor positioning in the Elements panel](https://developer.chrome.com/blog/new-in-devtools-127#elements-links)
- [Sources panel improvements](https://developer.chrome.com/blog/new-in-devtools-127#sources)
- [Enhanced 'Never Pause Here'](https://developer.chrome.com/blog/new-in-devtools-127#never-pause-here)
- [New scroll snap event listeners](https://developer.chrome.com/blog/new-in-devtools-127#snap-event-listeners)
- [Network panel improvements](https://developer.chrome.com/blog/new-in-devtools-127#network)
- [Updated network throttling presets](https://developer.chrome.com/blog/new-in-devtools-127#network-throttling-presets)
- [Service worker information in custom fields of the HAR format](https://developer.chrome.com/blog/new-in-devtools-127#har)
- [Send and receive WebSocket events in the Performance panel](https://developer.chrome.com/blog/new-in-devtools-127#perf-websocket)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-127#misc)

### Chrome 126

- [Performance panel improvements](https://developer.chrome.com/blog/new-in-devtools-126#perf)
- [Move and hide tracks with updated track configuration mode](https://developer.chrome.com/blog/new-in-devtools-126#track-config)
- [Ignore scripts in the flame chart](https://developer.chrome.com/blog/new-in-devtools-126#perf-ignore)
- [Throttle down the CPU by 20 times](https://developer.chrome.com/blog/new-in-devtools-126#throttle-20x)
- [Performance insights panel will be deprecated](https://developer.chrome.com/blog/new-in-devtools-126#perf-insights)
- [Find excessive memory usage with new filters in heap snapshots](https://developer.chrome.com/blog/new-in-devtools-126#heap-filters)
- [Inspect storage buckets in Application \> Storage](https://developer.chrome.com/blog/new-in-devtools-126#storage-buckets)
- [Disable self-XSS warnings with a command-line flag](https://developer.chrome.com/blog/new-in-devtools-126#self-xss-flag)
- [Lighthouse 12.0.0](https://developer.chrome.com/blog/new-in-devtools-126#lighthouse)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-126#misc)

### Chrome 125

- [Understand errors and warnings in the Console better with Gemini](https://developer.chrome.com/blog/new-in-devtools-125#understand-messages)
- [@position-try rules support in Elements \> Styles](https://developer.chrome.com/blog/new-in-devtools-125#position-try)
- [Sources panel improvements](https://developer.chrome.com/blog/new-in-devtools-125#sources)
- [Configure automatic pretty-printing and bracket closing](https://developer.chrome.com/blog/new-in-devtools-125#settings)
- [Handled rejected promises are recognized as caught](https://developer.chrome.com/blog/new-in-devtools-125#caught-rejection)
- [Error causes in the Console](https://developer.chrome.com/blog/new-in-devtools-125#error-cause)
- [Network panel improvements](https://developer.chrome.com/blog/new-in-devtools-125#network)
- [Inspect Early Hints headers](https://developer.chrome.com/blog/new-in-devtools-125#early-hints)
- [Hide the Waterfall column](https://developer.chrome.com/blog/new-in-devtools-125#waterfall)
- [Performance panel improvements](https://developer.chrome.com/blog/new-in-devtools-125#perf)
- [Capture CSS selector statistics](https://developer.chrome.com/blog/new-in-devtools-125#selector-stats)
- [Change order and hide tracks](https://developer.chrome.com/blog/new-in-devtools-125#track-config)
- [Ignore retainers in the Memory panel](https://developer.chrome.com/blog/new-in-devtools-125#ignore-retainer)
- [Lighthouse 11.7.1](https://developer.chrome.com/blog/new-in-devtools-125#lighthouse)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-125#misc)

### Chrome 124

- [New Autofill panel](https://developer.chrome.com/blog/new-in-devtools-124#autofill)
- [Enhanced network throttling for WebRTC](https://developer.chrome.com/blog/new-in-devtools-124#throttling)
- [Scroll-driven animations support in the Animations panel](https://developer.chrome.com/blog/new-in-devtools-124#animations)
- [Improved CSS nesting support in Elements \> Styles](https://developer.chrome.com/blog/new-in-devtools-124#nested-css)
- [Enhanced Performance panel](https://developer.chrome.com/blog/new-in-devtools-124#perf)
- [Hide functions and their children in the flame chart](https://developer.chrome.com/blog/new-in-devtools-124#hide-func)
- [Arrows from selected initiators to events they initiated](https://developer.chrome.com/blog/new-in-devtools-124#event-initiators)
- [Lighthouse 11.6.0](https://developer.chrome.com/blog/new-in-devtools-124#lighthouse)
- [Tooltips for special categories in Memory \> Heap snapshots](https://developer.chrome.com/blog/new-in-devtools-124#heap)
- [Application \> Storage updates](https://developer.chrome.com/blog/new-in-devtools-124#storage)
- [Bytes used for shared storage](https://developer.chrome.com/blog/new-in-devtools-124#shared-storage-bytes)
- [Web SQL is fully deprecated](https://developer.chrome.com/blog/new-in-devtools-124#web-sql)
- [Coverage panel improvements](https://developer.chrome.com/blog/new-in-devtools-124#coverage)
- [The Layers panel might be deprecated](https://developer.chrome.com/blog/new-in-devtools-124#layers)
- [JavaScript Profiler deprecation: Phase four, final](https://developer.chrome.com/blog/new-in-devtools-124#js-profiler)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-124#misc)

### Chrome 123

- [Find the Easter egg](https://developer.chrome.com/blog/new-in-devtools-123#easter-egg)
- [Elements panel updates](https://developer.chrome.com/blog/new-in-devtools-123#elements)
- [Emulate a focused page in Elements \> Styles](https://developer.chrome.com/blog/new-in-devtools-123#focused-page)
- [Color Picker, Angle Clock, and Easing Editor in `var()` fallbacks](https://developer.chrome.com/blog/new-in-devtools-123#var-fallbacks)
- [CSS length tool is deprecated](https://developer.chrome.com/blog/new-in-devtools-123#css-length)
- [Popover for the selected search result in the Performance \> Main track](https://developer.chrome.com/blog/new-in-devtools-123#perf-popover)
- [Network panel updates](https://developer.chrome.com/blog/new-in-devtools-123#network)
- [Clear button and search filter in the Network \> EventStream tab](https://developer.chrome.com/blog/new-in-devtools-123#event-stream)
- [Tooltips with exemption reasons for third-party cookies in Network \> Cookies](https://developer.chrome.com/blog/new-in-devtools-123#3pc-exemption)
- [Enable and disable all breakpoints in Sources](https://developer.chrome.com/blog/new-in-devtools-123#breakpoints)
- [View loaded scripts in DevTools for Node.js](https://developer.chrome.com/blog/new-in-devtools-123#node-nav-tree)
- [Lighthouse 11.5.0](https://developer.chrome.com/blog/new-in-devtools-123#lighthouse)
- [Accessibility improvements](https://developer.chrome.com/blog/new-in-devtools-123#accessibility)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-123#misc)

### Chrome 122

- [The official collection of Recorder extensions is live](https://developer.chrome.com/blog/new-in-devtools-122#recorder-extensions)
- [Network improvements](https://developer.chrome.com/blog/new-in-devtools-122#network)
- [Failure reason in the Status column](https://developer.chrome.com/blog/new-in-devtools-122#failure-status)
- [Improved Copy submenu](https://developer.chrome.com/blog/new-in-devtools-122#copy-submenu)
- [Performance improvements](https://developer.chrome.com/blog/new-in-devtools-122#perf-improvements)
- [Breadcrumbs in the Timeline](https://developer.chrome.com/blog/new-in-devtools-122#perf-breadcrumbs)
- [Event initiators in the Main track](https://developer.chrome.com/blog/new-in-devtools-122#event-initiators)
- [JavaScript VM instance selector menu for Node.js DevTools](https://developer.chrome.com/blog/new-in-devtools-122#js-vm-menu)
- [New shortcut and command in Sources](https://developer.chrome.com/blog/new-in-devtools-122#sources)
- [Elements improvements](https://developer.chrome.com/blog/new-in-devtools-122#elements-improvements)
- [The ::view-transition pseudo-element is now editable in Styles](https://developer.chrome.com/blog/new-in-devtools-122#view-transition)
- [The align-content property support for block containers](https://developer.chrome.com/blog/new-in-devtools-122#align-content-in-blocks)
- [Posture support for emulated foldable devices](https://developer.chrome.com/blog/new-in-devtools-122#device-posture)
- [Dynamic theming](https://developer.chrome.com/blog/new-in-devtools-122#dynamic-theming)
- [Third-party cookies phaseout warnings in the Network and Application panels](https://developer.chrome.com/blog/new-in-devtools-122#3pc)
- [Lighthouse 11.4.0](https://developer.chrome.com/blog/new-in-devtools-122#lighthouse)
- [Accessibility improvements](https://developer.chrome.com/blog/new-in-devtools-122#accessibility)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-122#misc)

### Chrome 121

- [Elements improvements](https://developer.chrome.com/blog/new-in-devtools-121#elements)
- [Streamlined filter bar in the Network panel](https://developer.chrome.com/blog/new-in-devtools-121#network-filters)
- [`@font-palette-values` support](https://developer.chrome.com/blog/new-in-devtools-121#font-palette)
- [Supported case: Custom property as a fallback of another custom property](https://developer.chrome.com/blog/new-in-devtools-121#custom-fallback)
- [Improved source map support](https://developer.chrome.com/blog/new-in-devtools-121#variables)
- [Performance panel improvements](https://developer.chrome.com/blog/new-in-devtools-121#perf)
- [Enhanced Interactions track](https://developer.chrome.com/blog/new-in-devtools-121#interactions)
- [Advanced filtering in Bottom-Up, Call Tree, and Event Log tabs](https://developer.chrome.com/blog/new-in-devtools-121#filters)
- [Indentation markers in the Sources panel](https://developer.chrome.com/blog/new-in-devtools-121#sources)
- [Helpful tooltips for overridden headers and content in the Network panel](https://developer.chrome.com/blog/new-in-devtools-121#overrides)
- [New Command Menu options for adding and removing request blocking patterns](https://developer.chrome.com/blog/new-in-devtools-121#command-menu)
- [The CSP violations experiment is removed](https://developer.chrome.com/blog/new-in-devtools-121#csp-violations)
- [Lighthouse 11.3.0](https://developer.chrome.com/blog/new-in-devtools-121#lighthouse)
- [Accessibility improvements](https://developer.chrome.com/blog/new-in-devtools-121#accessibility)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-121#misc)

### Chrome 120

- [Third-party cookie phaseout](https://developer.chrome.com/blog/new-in-devtools-120#3pc)
- [Analyze your website's cookies with the Privacy Sandbox Analysis Tool](https://developer.chrome.com/blog/new-in-devtools-120#ps-analysis-tool)
- [Enhanced ignore listing](https://developer.chrome.com/blog/new-in-devtools-120#ignore-listing)
- [Default exclusion pattern for node_modules](https://developer.chrome.com/blog/new-in-devtools-120#default-regex)
- [Caught exceptions now stop execution if caught or passing through non-ignored code](https://developer.chrome.com/blog/new-in-devtools-120#exceptions)
- [`x_google_ignoreList` renamed to `ignoreList` in source maps](https://developer.chrome.com/blog/new-in-devtools-120#ignore-list-spec)
- [New input mode toggle during remote debugging](https://developer.chrome.com/blog/new-in-devtools-120#remote-input-mode)
- [The Elements panel now shows URLs for #document nodes](https://developer.chrome.com/blog/new-in-devtools-120#document-urls)
- [Effective Content Security Policy in the Application panel](https://developer.chrome.com/blog/new-in-devtools-120#csp)
- [Improved animation debugging](https://developer.chrome.com/blog/new-in-devtools-120#animations)
- ['Do you trust this code?' dialog in Sources and self-XSS warning in Console](https://developer.chrome.com/blog/new-in-devtools-120#self-xss)
- [Event listener breakpoints in web workers and worklets](https://developer.chrome.com/blog/new-in-devtools-120#worker-breakpoints)
- [The new media badge for `<audio>` and `<video>`](https://developer.chrome.com/blog/new-in-devtools-120#media)
- [Preloading renamed to Speculative loading](https://developer.chrome.com/blog/new-in-devtools-120#speculative-loading)
- [Lighthouse 11.2.0](https://developer.chrome.com/blog/new-in-devtools-120#lighthouse)
- [Accessibility improvements](https://developer.chrome.com/blog/new-in-devtools-120#accessibility)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-120#misc)

### Chrome 119

- [Improved @property section in Elements \> Styles](https://developer.chrome.com/blog/new-in-devtools-119#css)
- [Editable @property rule](https://developer.chrome.com/blog/new-in-devtools-119#edit-property)
- [Issues with invalid @property rules are reported](https://developer.chrome.com/blog/new-in-devtools-119#property-issues)
- [Updated list of devices to emulate](https://developer.chrome.com/blog/new-in-devtools-119#devices)
- [Pretty-print inline JSON in script tags in Sources](https://developer.chrome.com/blog/new-in-devtools-119#sources)
- [Autocomplete private fields in Console](https://developer.chrome.com/blog/new-in-devtools-119#autocomplete-console)
- [Lighthouse 11.1.0](https://developer.chrome.com/blog/new-in-devtools-119#lighthouse)
- [Accessibility improvements](https://developer.chrome.com/blog/new-in-devtools-119#accessibility)
- [Web SQL deprecation](https://developer.chrome.com/blog/new-in-devtools-119#web-sql)
- [Screenshot aspect ratio validation in Application \> Manifest](https://developer.chrome.com/blog/new-in-devtools-119#manifest-aspect-ratio)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-119#misc)

### Chrome 118

- [New section for custom properties in Elements \> Styles](https://developer.chrome.com/blog/new-in-devtools-118#css)
- [More local overrides improvements](https://developer.chrome.com/blog/new-in-devtools-118#overrides)
- [Enhanced search](https://developer.chrome.com/blog/new-in-devtools-118#search)
- [Improved Sources panel](https://developer.chrome.com/blog/new-in-devtools-118#sources)
- [Streamlined workspace in the Sources panel](https://developer.chrome.com/blog/new-in-devtools-118#workspace)
- [Reorder panes in Sources](https://developer.chrome.com/blog/new-in-devtools-118#reorder-panes)
- [Syntax highlighting and pretty-printing for more script types](https://developer.chrome.com/blog/new-in-devtools-118#syntax)
- [Emulate prefers-reduced-transparency media feature](https://developer.chrome.com/blog/new-in-devtools-118#reduced-transparency)
- [Lighthouse 11](https://developer.chrome.com/blog/new-in-devtools-118#lighthouse)
- [Accessibility improvements](https://developer.chrome.com/blog/new-in-devtools-118#accessibility)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-118#misc)

### Chrome 117

- [Network panel improvements](https://developer.chrome.com/blog/new-in-devtools-117#network)
- [Override web content locally even faster](https://developer.chrome.com/blog/new-in-devtools-117#overrides)
- [Override the content of XHR and fetch requests](https://developer.chrome.com/blog/new-in-devtools-117#xhr-fetch)
- [Hide Chrome extension requests](https://developer.chrome.com/blog/new-in-devtools-117#hide-extension-requests)
- [Human-readable HTTP status codes](https://developer.chrome.com/blog/new-in-devtools-117#status-codes)
- [Pretty-print responses for JSON subtypes](https://developer.chrome.com/blog/new-in-devtools-117#pretty-json-response)

- [Performance: See the changes in fetch priority for network events](https://developer.chrome.com/blog/new-in-devtools-117#performance)

- [Sources settings enabled by default: Code folding and automatic file reveal](https://developer.chrome.com/blog/new-in-devtools-117#sources)
- [Improved debugging of third-party cookie issues](https://developer.chrome.com/blog/new-in-devtools-117#third-party-cookies)
- [New colors](https://developer.chrome.com/blog/new-in-devtools-117#colors)
- [Lighthouse 10.4.0](https://developer.chrome.com/blog/new-in-devtools-117#lighthouse)
- [Debug preloading in the Application panel](https://developer.chrome.com/blog/new-in-devtools-117#preloading)
- [The C/C++ WebAssembly debugging extension for DevTools is now open source](https://developer.chrome.com/blog/new-in-devtools-117#debug-cpp)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-117#misc)
- [(Experimental) New rendering emulation: prefers-reduced-transparency](https://developer.chrome.com/blog/new-in-devtools-117#reduced-transparency)
- [(Experimental) Enhanced Protocol monitor](https://developer.chrome.com/blog/new-in-devtools-117#protocol-monitor)

### Chrome 116

- [Improved debugging of missing stylesheets](https://developer.chrome.com/blog/new-in-devtools-116#stylesheets)
- [Linear timing support in Elements \> Styles \> Easing Editor](https://developer.chrome.com/blog/new-in-devtools-116#linear)
- [Storage buckets support and metadata view](https://developer.chrome.com/blog/new-in-devtools-116#storage)
- [Lighthouse 10.3.0](https://developer.chrome.com/blog/new-in-devtools-116#lighthouse)
- [Accessibility: Keyboard commands and improved screen reading](https://developer.chrome.com/blog/new-in-devtools-116#accessibility)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-116#misc)

### Chrome 115

- [Elements improvements](https://developer.chrome.com/blog/new-in-devtools-115#elements)
- [New CSS subgrid badge](https://developer.chrome.com/blog/new-in-devtools-115#subgrid)
- [Selector specificity in tooltips](https://developer.chrome.com/blog/new-in-devtools-115#specificity)
- [Values of custom CSS properties in tooltips](https://developer.chrome.com/blog/new-in-devtools-115#css-variable-values)
- [Sources improvements](https://developer.chrome.com/blog/new-in-devtools-115#sources)
- [CSS syntax highlighting](https://developer.chrome.com/blog/new-in-devtools-115#css)
- [Shortcut to set conditional breakpoints](https://developer.chrome.com/blog/new-in-devtools-115#breakpoint)
- [Application \> Bounce Tracking Mitigations](https://developer.chrome.com/blog/new-in-devtools-115#bounce-tracking)
- [Lighthouse 10.2.0](https://developer.chrome.com/blog/new-in-devtools-115#lighthouse)
- [Ignore content scripts by default](https://developer.chrome.com/blog/new-in-devtools-115#content-script)
- [Network \> Response improvements](https://developer.chrome.com/blog/new-in-devtools-115#network)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-115#misc)

### Chrome 114

- [WebAssembly debugging support](https://developer.chrome.com/blog/new-in-devtools-114#wasm)
- [Improved stepping behavior in Wasm apps](https://developer.chrome.com/blog/new-in-devtools-114#wasm-step)
- [Debug Autofill using the Elements panel and Issues tab](https://developer.chrome.com/blog/new-in-devtools-114#autofill)
- [Assertions in Recorder](https://developer.chrome.com/blog/new-in-devtools-114#recorder)
- [Lighthouse 10.1.1](https://developer.chrome.com/blog/new-in-devtools-114#lighthouse)
- [Performance enhancements](https://developer.chrome.com/blog/new-in-devtools-114#performance)
- [performance.mark() shows timing on hover in Performance \> Timings](https://developer.chrome.com/blog/new-in-devtools-114#mark)
- [profile() command populates Performance \> Main](https://developer.chrome.com/blog/new-in-devtools-114#profile)
- [Warning for slow user interactions](https://developer.chrome.com/blog/new-in-devtools-114#slow-interaction-warning)
- [Web Vitals updates](https://developer.chrome.com/blog/new-in-devtools-114#web-vitals)
- [JavaScript Profiler deprecation: Phase three](https://developer.chrome.com/blog/new-in-devtools-114#js-profiler)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-114#misc)

### Chrome 113

- [Override network response headers](https://developer.chrome.com/blog/new-in-devtools-113#network)
- [Nuxt, Vite, and Rollup debugging improvements](https://developer.chrome.com/blog/new-in-devtools-113#debug)
- [CSS improvements in Elements \> Styles](https://developer.chrome.com/blog/new-in-devtools-113#css)
- [Invalid CSS properties and values](https://developer.chrome.com/blog/new-in-devtools-113#invalid-css)
- [Links to key frames in the animation shorthand property](https://developer.chrome.com/blog/new-in-devtools-113#animation-key-frames)
- [New Console setting: Autocomplete on Enter](https://developer.chrome.com/blog/new-in-devtools-113#console)
- [Command Menu emphasizes authored files](https://developer.chrome.com/blog/new-in-devtools-113#command-menu)
- [JavaScript Profiler deprecation: Stage two](https://developer.chrome.com/blog/new-in-devtools-113#js-profiler)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-113#misc)

### Chrome 112

- [Recorder updates](https://developer.chrome.com/blog/new-in-devtools-112#recorder)
- [Recorder replay extensions](https://developer.chrome.com/blog/new-in-devtools-112#replay-extensions)
- [Record with pierce selectors](https://developer.chrome.com/blog/new-in-devtools-112#pierce-selectors)
- [Export recordings as Puppeteer scripts with Lighthouse analysis](https://developer.chrome.com/blog/new-in-devtools-112#puppeteer-lighthouse)
- [Get extensions for Recorder](https://developer.chrome.com/blog/new-in-devtools-112#get-extensions)
- [Elements \> Styles updates](https://developer.chrome.com/blog/new-in-devtools-112#elements-styles)
- [CSS documentation in the Styles pane](https://developer.chrome.com/blog/new-in-devtools-112#css)
- [CSS nesting support](https://developer.chrome.com/blog/new-in-devtools-112#nesting)
- [Marking logpoints and conditional breakpoints in the Console](https://developer.chrome.com/blog/new-in-devtools-112#logpoint)
- [Ignore irrelevant scripts during debugging](https://developer.chrome.com/blog/new-in-devtools-112#ignore-list)
- [JavaScript Profiler deprecation started](https://developer.chrome.com/blog/new-in-devtools-112#js-profiler-deprecation)
- [Emulate reduced contrast](https://developer.chrome.com/blog/new-in-devtools-112#reduced-contrast)
- [Lighthouse 10](https://developer.chrome.com/blog/new-in-devtools-112#lighthouse)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-112#misc)

### Chrome 111

- [Debugging HD color with the Styles pane](https://developer.chrome.com/blog/new-in-devtools-111#color)
- [Enhanced breakpoint UX](https://developer.chrome.com/blog/new-in-devtools-111#breakpoint-redesign)
- [Customizable Recorder shortcuts](https://developer.chrome.com/blog/new-in-devtools-111#recorder)
- [Better syntax highlight for Angular](https://developer.chrome.com/blog/new-in-devtools-111#syntax)
- [Reorganize caches in the Application panel](https://developer.chrome.com/blog/new-in-devtools-111#cache)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-111#misc)

### Chrome 110

- [Clearing Performance Panel on reload](https://developer.chrome.com/blog/new-in-devtools-110#perf)
- [Recorder updates](https://developer.chrome.com/blog/new-in-devtools-110#recorder)
- [View and highlight the code of your user flow in the Recorder](https://developer.chrome.com/blog/new-in-devtools-110#recorder-code)
- [Customize selector types of a recording](https://developer.chrome.com/blog/new-in-devtools-110#recorder-selector)
- [Edit user flow while recording](https://developer.chrome.com/blog/new-in-devtools-110#recorder-edit)
- [Automatic in-place pretty print](https://developer.chrome.com/blog/new-in-devtools-110#pretty-print)
- [Better syntax highlight and inline preview for Vue, SCSS and more](https://developer.chrome.com/blog/new-in-devtools-110#highlight)
- [Ergonomic and consistent Autocomplete in the Console](https://developer.chrome.com/blog/new-in-devtools-110#console)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-110#misc)

### Chrome 109

- [Recorder: Copy as options for steps, in-page replay, step's context menu](https://developer.chrome.com/blog/new-in-devtools-109#recorder)
- [Show actual function names in performance's recordings](https://developer.chrome.com/blog/new-in-devtools-109#performance)
- [New keyboard shortcuts in the Console \& Sources panel](https://developer.chrome.com/blog/new-in-devtools-109#keyboard-shortcuts)
- [Improved JavaScript debugging](https://developer.chrome.com/blog/new-in-devtools-109#debugging)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-109#misc)
- [\[Experimental\] Enhanced UX in managing breakpoints](https://developer.chrome.com/blog/new-in-devtools-109#breakpoint-redesign)
- [\[Experimental\] Automatic in-place pretty print](https://developer.chrome.com/blog/new-in-devtools-109#pretty-print)

### Chrome 108

- [Hints for inactive CSS properties](https://developer.chrome.com/blog/new-in-devtools-108#css-hint)
- [Auto-detect XPath and text selectors in the Recorder panel](https://developer.chrome.com/blog/new-in-devtools-108#recorder)
- [Step through comma-separated expressions](https://developer.chrome.com/blog/new-in-devtools-108#debugging)
- [Improved Ignore list setting](https://developer.chrome.com/blog/new-in-devtools-108#ignore-list)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-108#misc)

### Chrome 107

- [Customize keyboard shortcuts in DevTools](https://developer.chrome.com/blog/new-in-devtools-107#shortcuts)
- [Toggle light and dark themes with keyboard shortcut](https://developer.chrome.com/blog/new-in-devtools-107#toggle-themes)
- [Highlight C/C++ objects in the Memory Inspector](https://developer.chrome.com/blog/new-in-devtools-107#memory)
- [Support full initiator information for HAR import](https://developer.chrome.com/blog/new-in-devtools-107#har)
- [Start DOM search after pressing `Enter`](https://developer.chrome.com/blog/new-in-devtools-107#search-type)
- [Display `start` and `end` icons for `align-content` CSS flexbox properties](https://developer.chrome.com/blog/new-in-devtools-107#flexbox)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-107#misc)

### Chrome 106

- [Group files by Authored / Deployed in the Sources panel](https://developer.chrome.com/blog/new-in-devtools-106#authored)
- [Linked stack traces for asynchronous operations](https://developer.chrome.com/blog/new-in-devtools-106#async)
- [Automatically ignore known third-party scripts](https://developer.chrome.com/blog/new-in-devtools-106#auto-ignore)
- [Improved call stack during debugging](https://developer.chrome.com/blog/new-in-devtools-106#call-stack)
- [Hiding ignore-listed sources in the Sources panel](https://developer.chrome.com/blog/new-in-devtools-106#ignore-nav)
- [Hiding ignore-listed files in the Command Menu](https://developer.chrome.com/blog/new-in-devtools-106#ignore-search)
- [New Interactions track in the Performance panel](https://developer.chrome.com/blog/new-in-devtools-106#performance)
- [LCP timings breakdown in the Performance Insights panel](https://developer.chrome.com/blog/new-in-devtools-106#insights)
- [Auto-generate default name for recordings in the Recorder panel](https://developer.chrome.com/blog/new-in-devtools-106#recorder)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-106#misc)

### Chrome 105

- [Step-by-step replay in the Recorder](https://developer.chrome.com/blog/new-in-devtools-105#recorder)
- [Support mouse over event in the Recorder panel](https://developer.chrome.com/blog/new-in-devtools-105#recorder-hover)
- [Largest Contentful Paint (LCP) in the Performance insights panel](https://developer.chrome.com/blog/new-in-devtools-105#lcp)
- [Identify flashes of text (FOIT, FOUT) as potential root causes for layout shifts](https://developer.chrome.com/blog/new-in-devtools-105#foit-fout)
- [Protocol handlers in the Manifest pane](https://developer.chrome.com/blog/new-in-devtools-105#manifest)
- [Top layer badge in the Elements panel](https://developer.chrome.com/blog/new-in-devtools-105#top-layer)
- [Attach Wasm debugging information at runtime](https://developer.chrome.com/blog/new-in-devtools-105#wasm)
- [Support live edit during debugging](https://developer.chrome.com/blog/new-in-devtools-105#live-edit)
- [View and edit @scope at rules in the Styles pane](https://developer.chrome.com/blog/new-in-devtools-105#scope)
- [Source map improvements](https://developer.chrome.com/blog/new-in-devtools-105#sourcemaps)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-105#misc)

### Chrome 104

- [Restart frame during debugging](https://developer.chrome.com/blog/new-in-devtools-104#restart-frame)
- [Slow replay options in the Recorder panel](https://developer.chrome.com/blog/new-in-devtools-104#recorder)
- [Build an extension for the Recorder panel](https://developer.chrome.com/blog/new-in-devtools-104#recorder-extension)
- [Group files by Authored / Deployed in the Sources panel](https://developer.chrome.com/blog/new-in-devtools-104#authored-deployed)
- [New User Timings track in the Performance insights panel](https://developer.chrome.com/blog/new-in-devtools-104#performance)
- [Reveal assigned slot of an element](https://developer.chrome.com/blog/new-in-devtools-104#slot)
- [Simulate hardware concurrency for Performance recordings](https://developer.chrome.com/blog/new-in-devtools-104#simulate)
- [Preview non-color value when autocompleting CSS variables](https://developer.chrome.com/blog/new-in-devtools-104#css-var)
- [Identify blocking frames in the Back/forward cache pane](https://developer.chrome.com/blog/new-in-devtools-104#bfcache)
- [Improved autocomplete suggestions for JavaScript objects](https://developer.chrome.com/blog/new-in-devtools-104#autocomplete)
- [Source maps improvements](https://developer.chrome.com/blog/new-in-devtools-104#sourcemaps)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-104#misc)

### Chrome 103

- [Capture double-click and right-click events in the Recorder panel](https://developer.chrome.com/blog/new-in-devtools-103#recorder)
- [New timespan and snapshot mode in the Lighthouse panel](https://developer.chrome.com/blog/new-in-devtools-103#lighthouse)
- [Improved zoom control in the Performance Insights panel](https://developer.chrome.com/blog/new-in-devtools-103#zoom)
- [Confirm to delete a performance recording](https://developer.chrome.com/blog/new-in-devtools-103#delete)
- [Reorder panes in the Elements panel](https://developer.chrome.com/blog/new-in-devtools-103#reorder-pane)
- [Picking a color outside of the browser](https://developer.chrome.com/blog/new-in-devtools-103#color)
- [Improved inline value preview during debugging](https://developer.chrome.com/blog/new-in-devtools-103#inline-preview)
- [Support large blobs for virtual authenticators](https://developer.chrome.com/blog/new-in-devtools-103#webauthn)
- [New keyboard shortcuts in the Sources panel](https://developer.chrome.com/blog/new-in-devtools-103#shortcuts)
- [Source maps improvements](https://developer.chrome.com/blog/new-in-devtools-103#sourcemaps)

### Chrome 102

- [Preview feature: New Performance insights panel](https://developer.chrome.com/blog/new-in-devtools-102#perf)
- [New shortcuts to emulate light and dark themes](https://developer.chrome.com/blog/new-in-devtools-102#emulation)
- [Improved security on the Network Preview tab](https://developer.chrome.com/blog/new-in-devtools-102#network-preview)
- [Improved reloading at breakpoint](https://developer.chrome.com/blog/new-in-devtools-102#debugger)
- [Console updates](https://developer.chrome.com/blog/new-in-devtools-102#console)
- [Cancel user flow recording at the start](https://developer.chrome.com/blog/new-in-devtools-102#recorder)
- [Display inherited highlight pseudo-elements in the Styles pane](https://developer.chrome.com/blog/new-in-devtools-102#pseudo)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-102#misc)
- [\[Experimental\] Copy CSS changes](https://developer.chrome.com/blog/new-in-devtools-102#copy)
- [\[Experimental\] Picking color outside of browser](https://developer.chrome.com/blog/new-in-devtools-102#color-picker)

### Chrome 101

- [Import and export recorded user flows as a JSON file](https://developer.chrome.com/blog/new-in-devtools-101#recorder)
- [View cascade layers in the Styles pane](https://developer.chrome.com/blog/new-in-devtools-101#layer)
- [Support for the `hwb()` color function](https://developer.chrome.com/blog/new-in-devtools-101#hwb)
- [Improved the display of private properties](https://developer.chrome.com/blog/new-in-devtools-101#private-props)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-101#misc)
- [\[Experimental\] New timespan and snapshot mode in the Lighthouse panel](https://developer.chrome.com/blog/new-in-devtools-101#lighthouse)

### Chrome 100

- [View and edit @supports at rules in the Styles pane](https://developer.chrome.com/blog/new-in-devtools-100#supports)
- [Support common selectors by default](https://developer.chrome.com/blog/new-in-devtools-100#selector)
- [Customize the recording's selector](https://developer.chrome.com/blog/new-in-devtools-100#customize-selector)
- [Rename a recording](https://developer.chrome.com/blog/new-in-devtools-100#recorder-rename)
- [Preview class/function properties on hover](https://developer.chrome.com/blog/new-in-devtools-100#properties)
- [Partially presented frames in the Performance panel](https://developer.chrome.com/blog/new-in-devtools-100#perf)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-100#misc)

### Chrome 99

- [Throttling WebSocket requests](https://developer.chrome.com/blog/new-in-devtools-99#websocket)
- [New Reporting API pane in the Application panel](https://developer.chrome.com/blog/new-in-devtools-99#reporting-api)
- [Support wait until element is visible/clickable in the Recorder panel](https://developer.chrome.com/blog/new-in-devtools-99#recorder)
- [Better console styling, formatting and filtering](https://developer.chrome.com/blog/new-in-devtools-99#console)
- [Debug Chrome extension with source map files](https://developer.chrome.com/blog/new-in-devtools-99#extension)
- [Improved source folder tree in the Sources panel](https://developer.chrome.com/blog/new-in-devtools-99#source-tree)
- [Display worker source files in the Sources panel](https://developer.chrome.com/blog/new-in-devtools-99#worker-sourcemap)
- [Chrome's Auto Dark Theme updates](https://developer.chrome.com/blog/new-in-devtools-99#auto-dark-mode)
- [Touch-friendly color-picker and split pane](https://developer.chrome.com/blog/new-in-devtools-99#touch-friendly)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-99#misc)

### Chrome 98

- [Preview feature: Full-page accessibility tree](https://developer.chrome.com/blog/new-in-devtools-98#a11y-tree)
- [More precise changes in the Changes tab](https://developer.chrome.com/blog/new-in-devtools-98#changes)
- [Set longer timeout for user flow recording](https://developer.chrome.com/blog/new-in-devtools-98#recorder-timeout)
- [Ensure your pages are cacheable with the Back/forward cache tab](https://developer.chrome.com/blog/new-in-devtools-98#bfcache)
- [New Properties pane filter](https://developer.chrome.com/blog/new-in-devtools-98#properties)
- [Emulate the CSS forced-colors media feature](https://developer.chrome.com/blog/new-in-devtools-98#forced-colors)
- [Show rulers on hover command](https://developer.chrome.com/blog/new-in-devtools-98#show-rulers)
- [Support `row-reverse` and `column-reverse` in the Flexbox editor](https://developer.chrome.com/blog/new-in-devtools-98#flexbox-editor)
- [New keyboard shortcuts to replay XHR and expand all search results](https://developer.chrome.com/blog/new-in-devtools-98#shortcuts)
- [Lighthouse 9 in the Lighthouse panel](https://developer.chrome.com/blog/new-in-devtools-98#lighthouse)
- [Improved Sources panel](https://developer.chrome.com/blog/new-in-devtools-98#sources)
- [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-98#misc)
- [\[Experimental\] Endpoints in the Reporting API pane](https://developer.chrome.com/blog/new-in-devtools-98#reporting-api)

### Chrome 97

- [Preview feature: New Recorder panel](https://developer.chrome.com/blog/new-in-devtools-97#recorder)
- [Refresh device list in Device Mode](https://developer.chrome.com/blog/new-in-devtools-97#device)
- [Autocomplete with Edit as HTML](https://developer.chrome.com/blog/new-in-devtools-97#code-completion)
- [Improved code debugging experience](https://developer.chrome.com/blog/new-in-devtools-97#debugging)
- [Syncing DevTools settings across devices](https://developer.chrome.com/blog/new-in-devtools-97#sync)

### Chrome 96

- [Preview feature: New CSS Overview panel](https://developer.chrome.com/blog/new-in-devtools-96#css-overview)
- [Restored and improved CSS length edit and copy experince](https://developer.chrome.com/blog/new-in-devtools-96#length)
- [Emulate the CSS prefers-contrast media feature](https://developer.chrome.com/blog/new-in-devtools-96#prefers-contrast)
- [Emulate the Chrome's Auto Dark Theme feature](https://developer.chrome.com/blog/new-in-devtools-96#auto-dark-mode)
- [Copy declarations as JavaScript in the Styles pane](https://developer.chrome.com/blog/new-in-devtools-96#copy-as-js)
- [New Payload tab in the Network panel](https://developer.chrome.com/blog/new-in-devtools-96#payload)
- [Improved the display of properties in the Properties pane](https://developer.chrome.com/blog/new-in-devtools-96#properties)
- [Option to hide CORS errors in the Console](https://developer.chrome.com/blog/new-in-devtools-96#hide-cors-errors)
- [Proper `Intl` objects preview and evaluation in the Console](https://developer.chrome.com/blog/new-in-devtools-96#intl)
- [Consistent async stack traces](https://developer.chrome.com/blog/new-in-devtools-96#async)
- [Retain the Console sidebar](https://developer.chrome.com/blog/new-in-devtools-96#console-sidebar)
- [Deprecated Application cache pane in the Application panel](https://developer.chrome.com/blog/new-in-devtools-96#app-cache)
- [\[Experimental\] New Reporting API pane in the Application panel](https://developer.chrome.com/blog/new-in-devtools-96#reporting-api)

### Chrome 95

- [New CSS length authoring tools](https://developer.chrome.com/blog/new-in-devtools-95#length)
- [Hide issues in the Issues tab](https://developer.chrome.com/blog/new-in-devtools-95#hide-issues)
- [Improved the display of properties](https://developer.chrome.com/blog/new-in-devtools-95#properties)
- [Lighthouse 8.4 in the Lighthouse panel](https://developer.chrome.com/blog/new-in-devtools-95#lighthouse)
- [Sort snippets in the Sources panel](https://developer.chrome.com/blog/new-in-devtools-95#snippets)
- [New links to translated release notes and report a translation bug](https://developer.chrome.com/blog/new-in-devtools-95#localized)
- [Improved UI for DevTools command menu](https://developer.chrome.com/blog/new-in-devtools-95#command-menu)

### Chrome 94

- [Use DevTools in your preferred language](https://developer.chrome.com/blog/new-in-devtools-94#localized)
- [New Nest Hub devices in the Device list](https://developer.chrome.com/blog/new-in-devtools-94#nest-hub)
- [Origin trials in the Frame details view](https://developer.chrome.com/blog/new-in-devtools-94#origin-trials)
- [New CSS container queries badge](https://developer.chrome.com/blog/new-in-devtools-94#container-queries)
- [New checkbox to invert the network filters](https://developer.chrome.com/blog/new-in-devtools-94#nvert-network-filter)
- [Upcoming deprecation of the Console sidebar](https://developer.chrome.com/blog/new-in-devtools-94#deprecated)
- [Display raw `Set-Cookies` headers in the Issues tab and Network panel](https://developer.chrome.com/blog/new-in-devtools-94#raw-cookies)
- [Consistent display native accessors as own properties in the Console](https://developer.chrome.com/blog/new-in-devtools-94#native-accessors)
- [Proper error stack traces for inline scripts with #sourceURL](https://developer.chrome.com/blog/new-in-devtools-94#inline-script)
- [Change color format in the Computed pane](https://developer.chrome.com/blog/new-in-devtools-94#color-unit)
- [Replace custom tooltips with native HTML tooltips](https://developer.chrome.com/blog/new-in-devtools-94#tooltip)
- [\[Experimental\] Hide issues in the Issues tab](https://developer.chrome.com/blog/new-in-devtools-94#hide-issues)

### Chrome 93

- [Editable CSS container queries in the Styles pane](https://developer.chrome.com/blog/new-in-devtools-93#container-queries)
- [Web bundle preview in the Network panel](https://developer.chrome.com/blog/new-in-devtools-93#web-bundle)
- [Attribution Reporting API debugging](https://developer.chrome.com/blog/new-in-devtools-93#attribution-reporting)
- [Better string handling in the Console](https://developer.chrome.com/blog/new-in-devtools-93#string)
- [Improved CORS debugging](https://developer.chrome.com/blog/new-in-devtools-93#cors)
- [Lighthouse 8.1](https://developer.chrome.com/blog/new-in-devtools-93#lighthouse)
- [New note URL in the Manifest pane](https://developer.chrome.com/blog/new-in-devtools-93#new-note-url)
- [Fixed CSS matching selectors](https://developer.chrome.com/blog/new-in-devtools-93#matching-selectors)
- [Pretty-printing JSON responses in the Network panel](https://developer.chrome.com/blog/new-in-devtools-93#pretty-print-json)

### Chrome 92

- [CSS grid editor](https://developer.chrome.com/blog/new-in-devtools-92#grid-editor)
- [Support for `const` redeclarations in the Console](https://developer.chrome.com/blog/new-in-devtools-92#const-redeclaration)
- [Source order viewer](https://developer.chrome.com/blog/new-in-devtools-92#source-order)
- [New shortcut to view frame details](https://developer.chrome.com/blog/new-in-devtools-92#frame-details)
- [Enhanced CORS debugging support](https://developer.chrome.com/blog/new-in-devtools-92#cors)
- [Rename XHR label to Fetch/XHR](https://developer.chrome.com/blog/new-in-devtools-92#fetch-xhr)
- [Filter Wasm resource type in the Network panel](https://developer.chrome.com/blog/new-in-devtools-92#wasm)
- [User-Agent Client Hints for devices in the Network conditions tab](https://developer.chrome.com/blog/new-in-devtools-92#sec-ua-ch)
- [Report Quirks mode issues in the Issues tab](https://developer.chrome.com/blog/new-in-devtools-92#quirks-mode)
- [Include Compute Intersections in the Performance panel](https://developer.chrome.com/blog/new-in-devtools-92#computed-intersections)
- [Lighthouse 7.5 in the Lighthouse panel](https://developer.chrome.com/blog/new-in-devtools-92#lighthouse)
- [Deprecated "Restart frame" context menu in the call stack](https://developer.chrome.com/blog/new-in-devtools-92#restart-frame)
- [\[Experimental\] Protocol monitor](https://developer.chrome.com/blog/new-in-devtools-92#protocol-monitor)
- [\[Experimental\] Puppeteer Recorder](https://developer.chrome.com/blog/new-in-devtools-92#puppeteer-recorder)

### Chrome 91

- [Web Vitals information pop up](https://developer.chrome.com/blog/new-in-devtools-91#web-vitals)
- [New Memory inspector](https://developer.chrome.com/blog/new-in-devtools-91#memory-inspector)
- [Visualize CSS scroll-snap](https://developer.chrome.com/blog/new-in-devtools-91#css-croll-snap)
- [New badge settings pane](https://developer.chrome.com/blog/new-in-devtools-91#badge-settings)
- [Enhanced image preview with aspect ratio information](https://developer.chrome.com/blog/new-in-devtools-91#image-preview)
- [New network conditions button with options to configure `Content-Encoding`s](https://developer.chrome.com/blog/new-in-devtools-91#network-panel)
- [shortcut to view computed value](https://developer.chrome.com/blog/new-in-devtools-91#computed-value)
- [`accent-color` keyword](https://developer.chrome.com/blog/new-in-devtools-91#accent-color)
- [Categorize issue types with colors and icons](https://developer.chrome.com/blog/new-in-devtools-91#issue-category)
- [Delete Trust tokens](https://developer.chrome.com/blog/new-in-devtools-91#trust-tokens)
- [Blocked features in the Frame details view](https://developer.chrome.com/blog/new-in-devtools-91#permissions-policy)
- [Filter experiments in the Experiments setting](https://developer.chrome.com/blog/new-in-devtools-91#filter-experiment)
- [New `Vary Header` column in the Cache storage pane](https://developer.chrome.com/blog/new-in-devtools-91#vary-header)
- [Support JavaScript private brand check](https://developer.chrome.com/blog/new-in-devtools-91#javascript)
- [Enhanced support for breakpoints debugging](https://developer.chrome.com/blog/new-in-devtools-91#breakpoint)
- [Support hover preview with `[]` notation](https://developer.chrome.com/blog/new-in-devtools-91#expression-preview)
- [Improved outline of HTML files](https://developer.chrome.com/blog/new-in-devtools-91#html-outline)
- [Proper error stack traces for Wasm debugging](https://developer.chrome.com/blog/new-in-devtools-91#error-stack-traces)

### Chrome 90

- [New CSS flexbox debugging tools](https://developer.chrome.com/blog/new-in-devtools-90#flexbox)
- [New Core Web Vitals overlay](https://developer.chrome.com/blog/new-in-devtools-90#cwv)
- [Moved issue count to the Console status bar](https://developer.chrome.com/blog/new-in-devtools-90#issue-count)
- [Report Trusted Web Activity issues](https://developer.chrome.com/blog/new-in-devtools-90#twa)
- [Format strings as (valid) JavaScript string literals in the Console](https://developer.chrome.com/blog/new-in-devtools-90#double-quotes)
- [New Trust Tokens pane in the Application panel](https://developer.chrome.com/blog/new-in-devtools-90#trust-token-pane)
- [Emulate the CSS color-gamut media feature](https://developer.chrome.com/blog/new-in-devtools-90#css-gamut)
- [Improved Progressive Web Apps tooling](https://developer.chrome.com/blog/new-in-devtools-90#pwa)
- [New `Remote Address Space` column in the Network panel](https://developer.chrome.com/blog/new-in-devtools-90#remote-address-space)
- [Performance improvements](https://developer.chrome.com/blog/new-in-devtools-90#perf)
- [Display allowed/disallowed features in the Frame details view](https://developer.chrome.com/blog/new-in-devtools-90#permission-policy)
- [New `SameParty` column in the Cookies pane](https://developer.chrome.com/blog/new-in-devtools-90)
- [Deprecated non-standard `fn.displayName` support](https://developer.chrome.com/blog/new-in-devtools-90#display-name)
- [Deprecation of `Don't show Chrome Data Saver warning` in the Settings menu](https://developer.chrome.com/blog/new-in-devtools-90#data-saver-warning)
- [\[Experimental\] Automatic low-contrast issue reporting in the Issues tab](https://developer.chrome.com/blog/new-in-devtools-90#low-contrast)
- [\[Experimental\] Full accessibility tree view in the Elements panel](https://developer.chrome.com/blog/new-in-devtools-90#accessibility-tree)

### Chrome 89

- [Debugging support for Trusted Types violations](https://developer.chrome.com/blog/new-in-devtools-89#trusted-types)
- [Capture node screenshot beyond viewport](https://developer.chrome.com/blog/new-in-devtools-89#node-screenshot)
- [New Trust Tokens tab for network requests](https://developer.chrome.com/blog/new-in-devtools-89#trust-token)
- [Lighthouse 7 in the Lighthouse panel](https://developer.chrome.com/blog/new-in-devtools-89#lighthouse)
- [Support forcing the CSS `:target` state](https://developer.chrome.com/blog/new-in-devtools-89#force-target)
- [New shortcut to duplicate element](https://developer.chrome.com/blog/new-in-devtools-89#duplicate-element)
- [Color pickers for custom CSS properties](https://developer.chrome.com/blog/new-in-devtools-89#color-picker)
- [New shortcuts to copy CSS properties](https://developer.chrome.com/blog/new-in-devtools-89#copy-css)
- [New option to show URL-decoded cookies](https://developer.chrome.com/blog/new-in-devtools-89#cookies-decoded)
- [Clear only visible cookies](https://developer.chrome.com/blog/new-in-devtools-89#clear-cookies)
- [New option to clear third-party cookies in the Storage pane](https://developer.chrome.com/blog/new-in-devtools-89#third-party-cookies)
- [Edit User-Agent Client Hints for custom devices](https://developer.chrome.com/blog/new-in-devtools-89#ua-ch)
- [Persist "record network log" setting](https://developer.chrome.com/blog/new-in-devtools-89#network-log)
- [View WebTransport connections in the Network panel](https://developer.chrome.com/blog/new-in-devtools-89#webtransport)
- ["Online" renamed to "No throttling"](https://developer.chrome.com/blog/new-in-devtools-89#no-throttling)
- [New copy options in the Console, Sources panel, and Styles pane](https://developer.chrome.com/blog/new-in-devtools-89#copy-sources-console)
- [New Service Workers information in the Frame details view](https://developer.chrome.com/blog/new-in-devtools-89#sw)
- [Measure Memory information in the Frame details view](https://developer.chrome.com/blog/new-in-devtools-89#measure-memory)
- [Provide feedback from the Issues tab](https://developer.chrome.com/blog/new-in-devtools-89#issues-feedback)
- [Dropped frames in the Performance panel](https://developer.chrome.com/blog/new-in-devtools-89#dropped-frames)
- [Emulate foldable and dual-screen in Device Mode](https://developer.chrome.com/blog/new-in-devtools-89#dual-screen)
- [\[Experimental\] Automate browser testing with Puppeteer Recorder](https://developer.chrome.com/blog/new-in-devtools-89#record)
- [\[Experimental\] Font editor in the Styles pane](https://developer.chrome.com/blog/new-in-devtools-89#font)
- [\[Experimental\] CSS flexbox debugging tools](https://developer.chrome.com/blog/new-in-devtools-89#flexbox)
- [\[Experimental\] New CSP Violations tab](https://developer.chrome.com/blog/new-in-devtools-89#csp)
- [\[Experimental\] New color contrast calculation - Advanced Perceptual Contrast Algorithm (APCA)](https://developer.chrome.com/blog/new-in-devtools-89#apca)

### Chrome 88

- [Faster DevTools startup](https://developer.chrome.com/blog/new-in-devtools-88#fast-startup)
- [New CSS angle visualization tools](https://developer.chrome.com/blog/new-in-devtools-88#css-angle)
- [Emulate unsupported image types](https://developer.chrome.com/blog/new-in-devtools-88#emulate-image)
- [Simulate storage quota size in the Storage pane](https://developer.chrome.com/blog/new-in-devtools-88#simulate-storage)
- [New Web Vitals lane in the Performance panel](https://developer.chrome.com/blog/new-in-devtools-88#web-vitals)
- [Report CORS errors in the Network panel](https://developer.chrome.com/blog/new-in-devtools-88#cors)
- [Cross-origin isolation information in the Frame details view](https://developer.chrome.com/blog/new-in-devtools-88#cross-origin)
- [New Web Workers information in the Frame details view](https://developer.chrome.com/blog/new-in-devtools-88#web-worker)
- [Display opener frame details for opened windows](https://developer.chrome.com/blog/new-in-devtools-88#opener-frame)
- [Open Network panel from the Service Workers pane](https://developer.chrome.com/blog/new-in-devtools-88#sw)
- [Copy property value](https://developer.chrome.com/blog/new-in-devtools-88#copy-value)
- [Copy stacktrace for network initiator](https://developer.chrome.com/blog/new-in-devtools-88#copy-stacktrace)
- [Preview Wasm variable value on mouseover](https://developer.chrome.com/blog/new-in-devtools-88#wasm-mouseover)
- [Evaluate Wasm variable in the Console](https://developer.chrome.com/blog/new-in-devtools-88#wasm-console)
- [Consistent units of measurement for file/memory sizes](https://developer.chrome.com/blog/new-in-devtools-88#onsistent-kb)
- [Highlight pseudo elements in the Elements panel](https://developer.chrome.com/blog/new-in-devtools-88#pseudo)
- [\[Experimental\] CSS Flexbox debugging tools](https://developer.chrome.com/blog/new-in-devtools-88#flexbox)
- [\[Experimental\] Customize chords keyboard shortcuts](https://developer.chrome.com/blog/new-in-devtools-88#keyboard-shortcuts)

### Chrome 87

- [New CSS Grid debugging tools](https://developer.chrome.com/blog/new-in-devtools-87#css-grid)
- [New WebAuthn tab](https://developer.chrome.com/blog/new-in-devtools-87#webauthn)
- [Move tools between top and bottom panel](https://developer.chrome.com/blog/new-in-devtools-87#moveable-tools)
- [New Computed sidebar pane in the Styles pane](https://developer.chrome.com/blog/new-in-devtools-87#computed-sidebar-pane)
- [Grouping CSS properties in the Computed pane](https://developer.chrome.com/blog/new-in-devtools-87#grouping-css-prop)
- [Lighthouse 6.3 in the Lighthouse panel](https://developer.chrome.com/blog/new-in-devtools-87#lighthouse)
- [`performance.mark()` events in the Timings section](https://developer.chrome.com/blog/new-in-devtools-87#perf-mark)
- [New `resource-type` and `url` filters in the Network panel](https://developer.chrome.com/blog/new-in-devtools-87#network-filters)
- [Frame details view updates](https://developer.chrome.com/blog/new-in-devtools-87#rame-details)
- [Deprecation of `Settings` in the More tools menu](https://developer.chrome.com/blog/new-in-devtools-87#deprecate-settings)
- [\[Experimental\] View and fix color contrast issues in the CSS Overview panel](https://developer.chrome.com/blog/new-in-devtools-87#css-overview)
- [\[Experimental\] Customize keyboard shortcuts in DevTools](https://developer.chrome.com/blog/new-in-devtools-87#customized-keyboard-shortcuts)

### Chrome 86

- [New Media panel](https://developer.chrome.com/blog/new-in-devtools-86#media-panel)
- [Capture node screenshots using Elements panel context menu](https://developer.chrome.com/blog/new-in-devtools-86#capture-node-screenshot)
- [Issues tab updates](https://developer.chrome.com/blog/new-in-devtools-86#issues-tab)
- [Emulate missing local fonts](https://developer.chrome.com/blog/new-in-devtools-86#emulate-local-fonts)
- [Emulate inactive users](https://developer.chrome.com/blog/new-in-devtools-86#emulate-inactive-users)
- [Emulate `prefers-reduced-data`](https://developer.chrome.com/blog/new-in-devtools-86#emulate-prefers-reduced-data)
- [Support for new JavaScript features](https://developer.chrome.com/blog/new-in-devtools-86#javascript)
- [Lighthouse 6.2 in the Lighthouse panel](https://developer.chrome.com/blog/new-in-devtools-86#lighthouse)
- [Deprecation of "other origins" listing in the Service Workers pane](https://developer.chrome.com/blog/new-in-devtools-86#deprecate-sw-other-origins)
- [Show coverage summary for filtered items](https://developer.chrome.com/blog/new-in-devtools-86#filter-coverage-summary)
- [New frame details view in Application panel](https://developer.chrome.com/blog/new-in-devtools-86#frame-detailed-view)
- [Accessible color suggestion in the Styles pane](https://developer.chrome.com/blog/new-in-devtools-86#accessible-color)
- [Reinstate **Properties** pane in the Elements panel](https://developer.chrome.com/blog/new-in-devtools-86#properties)
- [Human-readable `X-Client-Data` header values in the Network panel](https://developer.chrome.com/blog/new-in-devtools-86#x-client-data)
- [Auto-complete custom fonts in the Styles pane](https://developer.chrome.com/blog/new-in-devtools-86#auto-complete-custom-fonts)
- [Consistently display resource type in Network panel](https://developer.chrome.com/blog/new-in-devtools-86#redirect-resource-type)
- [Clear buttons in the Elements and Network panels](https://developer.chrome.com/blog/new-in-devtools-86#clear-input-button)

### Chrome 85

- [Style editing for CSS-in-JS frameworks](https://developer.chrome.com/blog/new-in-devtools-85#css-in-js)
- [Lighthouse 6 in the Lighthouse panel](https://developer.chrome.com/blog/new-in-devtools-85#lighthouse)
- [First Meaningful Paint (FMP) deprecation](https://developer.chrome.com/blog/new-in-devtools-85#fmp-deprecation)
- [Support for new JavaScript features](https://developer.chrome.com/blog/new-in-devtools-85#javascript)
- [New app shortcut warnings in the Manifest pane](https://developer.chrome.com/blog/new-in-devtools-85#app-shortcut-warnings)
- [Service worker `respondWith` events in the Timing tab](https://developer.chrome.com/blog/new-in-devtools-85#timing-tab)
- [Consistent display of the Computed pane](https://developer.chrome.com/blog/new-in-devtools-85#compute-pane)
- [Bytecode offsets for WebAssembly files](https://developer.chrome.com/blog/new-in-devtools-85#wasm)
- [Line-wise copy and cut in Sources Panel](https://developer.chrome.com/blog/new-in-devtools-85#sources-panel)
- [Console settings updates](https://developer.chrome.com/blog/new-in-devtools-85#console-settings)
- [Performance panel updates](https://developer.chrome.com/blog/new-in-devtools-85#perf-panel)
- [New icons for breakpoints, conditional breakpoints, and logpoints](https://developer.chrome.com/blog/new-in-devtools-85#breakpoints)

### Chrome 84

- [Fix site issues with the new Issues tab](https://developer.chrome.com/blog/new-in-devtools-84#issues)
- [View accessibility information in the Inspect Mode tooltip](https://developer.chrome.com/blog/new-in-devtools-84#a11y)
- [Performance panel updates](https://developer.chrome.com/blog/new-in-devtools-84#performance)
- [More accurate promise terminology in the Console](https://developer.chrome.com/blog/new-in-devtools-84#promises)
- [Styles pane updates](https://developer.chrome.com/blog/new-in-devtools-84#styles)
- [Deprecation of the **Properties** pane in the Elements panel](https://developer.chrome.com/blog/new-in-devtools-84#properties)
- [App shortcuts support in the Manifest pane](https://developer.chrome.com/blog/new-in-devtools-84#app-shortcuts)

### Chrome 83

- [Emulate vision deficiencies](https://developer.chrome.com/blog/new-in-devtools-83#vision-deficiencies)
- [Emulate locales](https://developer.chrome.com/blog/new-in-devtools-83#locales)
- [Cross-Origin Embedder Policy (COEP) debugging](https://developer.chrome.com/blog/new-in-devtools-83#COEP)
- [New icons for breakpoints, conditional breakpoints, and logpoints](https://developer.chrome.com/blog/new-in-devtools-83#debugging-icons)
- [View network requests that set a specific cookie](https://developer.chrome.com/blog/new-in-devtools-83#cookie-path)
- [Dock to left from the Command Menu](https://developer.chrome.com/blog/new-in-devtools-83#dock-to-left)
- [The Settings option in the Main Menu has moved](https://developer.chrome.com/blog/new-in-devtools-83#settings)
- [The Audits panel is now the Lighthouse panel](https://developer.chrome.com/blog/new-in-devtools-83#lighthouse)
- [Delete all Local Overrides in a folder](https://developer.chrome.com/blog/new-in-devtools-83#overrides)
- [Updated Long Tasks UI](https://developer.chrome.com/blog/new-in-devtools-83#long-tasks)
- [Maskable icon support in the Manifest pane](https://developer.chrome.com/blog/new-in-devtools-83#maskable-icons)

### Chrome 82

- [Chrome 82 was cancelled](https://blog.chromium.org/2020/03/chrome-and-chrome-os-release-updates.html).

### Chrome 81

- [Moto G4 support in Device Mode](https://developer.chrome.com/blog/new-in-devtools-81#motog4)
- [Cookie-related updates](https://developer.chrome.com/blog/new-in-devtools-81#cookies)
- [More accurate web app manifest icons](https://developer.chrome.com/blog/new-in-devtools-81#manifesticons)
- [Hover over CSS `content` properties to see unescaped values](https://developer.chrome.com/blog/new-in-devtools-81#content)
- [Source map errors in the Console](https://developer.chrome.com/blog/new-in-devtools-81#sourcemaperrors)
- [Setting for disabling scrolling past the end of a file](https://developer.chrome.com/blog/new-in-devtools-81#scrolling)

### Chrome 80

- [Support for `let` and `class` redeclarations in the Console](https://developer.chrome.com/blog/new-in-devtools-80#redeclarations)
- [Improved WebAssembly debugging](https://developer.chrome.com/blog/new-in-devtools-80#webassembly)
- [Request Initiator Chains in the Initiator tab](https://developer.chrome.com/blog/new-in-devtools-80#initiators)
- [Highlight the selected network request in the Overview](https://developer.chrome.com/blog/new-in-devtools-80#overview)
- [URL and path columns in the Network panel](https://developer.chrome.com/blog/new-in-devtools-80#columns)
- [Updated User-Agent strings](https://developer.chrome.com/blog/new-in-devtools-80#useragents)
- [New Audits panel configuration UI](https://developer.chrome.com/blog/new-in-devtools-80#config)
- [Per-function or per-block code coverage modes](https://developer.chrome.com/blog/new-in-devtools-80#modes)
- [Code coverage must now be initiated by a page reload](https://developer.chrome.com/blog/new-in-devtools-80#reload)

### Chrome 79

- [Debug why a cookie was blocked](https://developer.chrome.com/blog/new-in-devtools-79#blockedcookies)
- [View cookie values](https://developer.chrome.com/blog/new-in-devtools-79#cookiepreviews)
- [Simulate different prefers-color-scheme and prefers-reduced-motion preferences](https://developer.chrome.com/blog/new-in-devtools-79#userpreferences)
- [Code coverage updates](https://developer.chrome.com/blog/new-in-devtools-79#coverage)
- [Debug why a network resource was requested](https://developer.chrome.com/blog/new-in-devtools-79#initiator)
- [Console and Sources panels respect indentation preferences again](https://developer.chrome.com/blog/new-in-devtools-79#indentation)
- [New shortcuts for cursor navigation](https://developer.chrome.com/blog/new-in-devtools-79#console)

### Chrome 78

- [Multi-client support in the Audits panel](https://developer.chrome.com/blog/new-in-devtools-78#multiclient)
- [Payment Handler debugging](https://developer.chrome.com/blog/new-in-devtools-78#payments)
- [Lighthouse 5.2 in the Audits panel](https://developer.chrome.com/blog/new-in-devtools-78#audits)
- [Largest Contentful Paint in the Performance panel](https://developer.chrome.com/blog/new-in-devtools-78#LCP)
- [File DevTools issues from the Main Menu](https://developer.chrome.com/blog/new-in-devtools-78#issues)

### Chrome 77

- [Copy element styles](https://developer.chrome.com/blog/new-in-devtools-77#copystyles)
- [Visualize layout shifts](https://developer.chrome.com/blog/new-in-devtools-77#layoutshifts)
- [Lighthouse 5.1 in the Audits panel](https://developer.chrome.com/blog/new-in-devtools-77#audits)
- [OS theme syncing](https://developer.chrome.com/blog/new-in-devtools-77#theming)
- [Keyboard shortcut for opening the Breakpoint Editor](https://developer.chrome.com/blog/new-in-devtools-77#breakpointeditor)
- [Prefetch cache in the Network panel](https://developer.chrome.com/blog/new-in-devtools-77#prefetch)
- [Private properties when viewing objects](https://developer.chrome.com/blog/new-in-devtools-77#privateclassfields)
- [Notifications and push messages in the Application panel](https://developer.chrome.com/blog/new-in-devtools-77#backgroundservices)

### Chrome 76

- [Autocomplete with CSS values](https://developer.chrome.com/blog/new-in-devtools-76#values)
- [A new UI for network settings](https://developer.chrome.com/blog/new-in-devtools-76#settings)
- [WebSocket messages in HAR exports](https://developer.chrome.com/blog/new-in-devtools-76#websocket)
- [HAR import and export buttons](https://developer.chrome.com/blog/new-in-devtools-76#HAR)
- [Real-time memory usage](https://developer.chrome.com/blog/new-in-devtools-76#memory)
- [Service worker registration port numbers](https://developer.chrome.com/blog/new-in-devtools-76#ports)
- [Inspect Background Fetch and Background Sync events](https://developer.chrome.com/blog/new-in-devtools-76#background)
- [Puppeteer for Firefox](https://developer.chrome.com/blog/new-in-devtools-76#puppeteer)

### Chrome 75

- [Meaningful presets when autocompleting CSS functions](https://developer.chrome.com/blog/new-in-devtools-75#presets)
- [Clear site data from the Command Menu](https://developer.chrome.com/blog/new-in-devtools-75#clear)
- [View all IndexedDB databases](https://developer.chrome.com/blog/new-in-devtools-75#indexeddb)
- [View a resource's uncompressed size on hover](https://developer.chrome.com/blog/new-in-devtools-75#uncompressed)
- [Inline breakpoints in the Breakpoints pane](https://developer.chrome.com/blog/new-in-devtools-75#inline)
- [IndexedDB and Cache resource counts](https://developer.chrome.com/blog/new-in-devtools-75#counts)
- [Setting for disabling the detailed Inspect tooltip](https://developer.chrome.com/blog/new-in-devtools-75#inspect)
- [Setting for toggling tab indentation in the Editor](https://developer.chrome.com/blog/new-in-devtools-75#tab)

### Chrome 74

- [Highlight all nodes affected by CSS property](https://developer.chrome.com/blog/new-in-devtools-74#highlight)
- [Lighthouse v4 in the Audits panel](https://developer.chrome.com/blog/new-in-devtools-74#lighthouse)
- [WebSocket binary message viewer](https://developer.chrome.com/blog/new-in-devtools-74#binary)
- [Capture area screenshot in the Command Menu](https://developer.chrome.com/blog/new-in-devtools-74#screenshot)
- [Service worker filters in the Network panel](https://developer.chrome.com/blog/new-in-devtools-74#swfilters)
- [Performance panel updates](https://developer.chrome.com/blog/new-in-devtools-74#perf)
- [Long tasks in Performance panel recordings](https://developer.chrome.com/blog/new-in-devtools-74#longtasks)
- [First Paint in the Timing section](https://developer.chrome.com/blog/new-in-devtools-74#FP)
- Bonus tip: [Shortcut for viewing RGB and HSL color codes](https://youtu.be/I14fXc7sXdU?t=221) (video)

### Chrome 73

- [Logpoints](https://developer.chrome.com/blog/new-in-devtools-73#logpoints)
- [Detailed tooltips in Inspect Mode](https://developer.chrome.com/blog/new-in-devtools-73#inspect)
- [Export code coverage data](https://developer.chrome.com/blog/new-in-devtools-73#coverage)
- [Navigate the Console with a keyboard](https://developer.chrome.com/blog/new-in-devtools-73#keyboard)
- [AAA contrast ratio line in the Color Picker](https://developer.chrome.com/blog/new-in-devtools-73#AAA)
- [Save custom geolocation overrides](https://developer.chrome.com/blog/new-in-devtools-73#geolocation)
- [Code folding](https://developer.chrome.com/blog/new-in-devtools-73#folding)
- [Frames tab renamed to Messages tab](https://developer.chrome.com/blog/new-in-devtools-73#messages)
- Bonus tip: [Network panel filtering by property](https://youtu.be/uddZX9ZK6wY?t=338) (video)

### Chrome 72

- [Visualize performance metrics](https://developer.chrome.com/blog/new-in-devtools-72#metrics) in the Performance panel
- [Highlight text nodes](https://developer.chrome.com/blog/new-in-devtools-72#highlight) in the DOM Tree
- [Copy the JS path](https://developer.chrome.com/blog/new-in-devtools-72#copy) to a DOM node
- [Audits panel updates](https://developer.chrome.com/blog/new-in-devtools-72#audits), including a new audit that detects JS libraries and new keywords for accessing the Audits panel from the Command Menu
- Bonus tip: [Use Device Mode to inspect media queries](https://youtu.be/XVJxlEdB230?t=155) (video)

### Chrome 71

- [Hover over a Live Expression result](https://developer.chrome.com/blog/new-in-devtools-71#hover) to highlight a DOM node
- [Store DOM nodes as global variables](https://developer.chrome.com/blog/new-in-devtools-71)
- [Initiator and priority information now in HAR imports and exports](https://developer.chrome.com/blog/new-in-devtools-71)
- [Access the Command Menu from the Main Menu](https://developer.chrome.com/blog/new-in-devtools-71)
- [Picture-in-Picture breakpoints](https://developer.chrome.com/blog/new-in-devtools-71)
- Bonus tip: [Use `monitorEvents()` to log a node's fired events in the
  Console](https://youtu.be/fJxFZO8OEEs?t=154) (video)

### Chrome 70

- [Live Expressions](https://developer.chrome.com/blog/new-in-devtools-70#watch) in the Console
- [Highlight DOM nodes during Eager Evaluation](https://developer.chrome.com/blog/new-in-devtools-70#nodes)
- [Performance panel optimizations](https://developer.chrome.com/blog/new-in-devtools-70#performance)
- [More reliable debugging](https://developer.chrome.com/blog/new-in-devtools-70#debugging)
- [Enable network throttling from the Command Menu](https://developer.chrome.com/blog/new-in-devtools-70#throttling)
- [Autocomplete Conditional Breakpoints](https://developer.chrome.com/blog/new-in-devtools-70#autocomplete)
- [Break on AudioContext events](https://developer.chrome.com/blog/new-in-devtools-70#audiocontext)
- [Debug Node.js apps with ndb](https://developer.chrome.com/blog/new-in-devtools-70#ndb)
- Bonus tip: [Measure real world user interactions with the User Timing API](https://developer.chrome.com/blog/new-in-devtools-70#bonus)

### Chrome 68

- [Eager Evaluation](https://developer.chrome.com/blog/new-in-devtools-68#eagerevaluation)
- [Argument hints](https://developer.chrome.com/blog/new-in-devtools-68#hints)
- [Function autocompletion](https://developer.chrome.com/blog/new-in-devtools-68#autocomplete)
- [ES2017 keywords](https://developer.chrome.com/blog/new-in-devtools-68#keywords)
- [Lighthouse 3.0 in the Audits panel](https://developer.chrome.com/blog/new-in-devtools-68#lh3)
- [BigInt support](https://developer.chrome.com/blog/new-in-devtools-68#bigint)
- [Adding property paths to the Watch pane](https://developer.chrome.com/blog/new-in-devtools-68#watch)
- ["Show timestamps" moved to Settings](https://developer.chrome.com/blog/new-in-devtools-68#timestamps)
- Bonus tip: [Lesser-known Console methods](https://youtu.be/br4JZ5qz_20?t=199) (video)

### Chrome 67

- [Search across all network headers](https://developer.chrome.com/blog/new-in-devtools-67#network-search)
- [CSS variable value previews](https://developer.chrome.com/blog/new-in-devtools-67#vars)
- [Copy as fetch](https://developer.chrome.com/blog/new-in-devtools-67#fetch)
- [New audits, desktop configuration options, and viewing traces](https://developer.chrome.com/blog/new-in-devtools-67#audits)
- [Stop infinite loops](https://developer.chrome.com/blog/new-in-devtools-67#stop)
- [User Timing in the Performance tabs](https://developer.chrome.com/blog/new-in-devtools-67#tabs)
- [JavaScript VM instances clearly listed in the Memory panel](https://developer.chrome.com/blog/new-in-devtools-67#vm)
- [Network tab renamed to Page tab](https://developer.chrome.com/blog/new-in-devtools-67#page)
- [Dark theme updates](https://developer.chrome.com/blog/new-in-devtools-67#dark)
- [Certificate transparency information in the Security panel](https://developer.chrome.com/blog/new-in-devtools-67#security)
- [Site isolation features in the Performance panel](https://developer.chrome.com/blog/new-in-devtools-67#site-isolation)
- Bonus tip: [Layers panel + Animations Inspector](https://youtu.be/4EdPq9Nw6uI?t=184) (video)

### Chrome 66

- [Blackboxing in the Network panel](https://developer.chrome.com/blog/new-in-devtools-66#blackboxing)
- [Auto-adjust zooming in Device Mode](https://developer.chrome.com/blog/new-in-devtools-66#auto-adjust)
- [Pretty-printing in the Preview and Response tabs](https://developer.chrome.com/blog/new-in-devtools-66#pretty-printing)
- [Previewing HTML content in the Preview tab](https://developer.chrome.com/blog/new-in-devtools-66#previews)
- [Local Overrides support for styles inside of HTML](https://developer.chrome.com/blog/new-in-devtools-66#overrides)
- Bonus tip: [Blackbox framework scripts to make Event Listener Breakpoints more useful](https://developer.chrome.com/blog/new-in-devtools-66#tip)

### Chrome 65

- [Local Overrides](https://developer.chrome.com/blog/new-in-devtools-65#overrides)
- [New accessibility tools](https://developer.chrome.com/blog/new-in-devtools-65#a11y)
- [The Changes tab](https://developer.chrome.com/blog/new-in-devtools-65#changes)
- [New SEO and performance audits](https://developer.chrome.com/blog/new-in-devtools-65#audits)
- [Multiple recordings in the Performance panel](https://developer.chrome.com/blog/new-in-devtools-65#recordings)
- [Reliable code stepping with workers in async code](https://developer.chrome.com/blog/new-in-devtools-65#stepping)
- Bonus tip: [Automate DevTools actions with Puppeteer](https://youtu.be/D1pV7ermy6w?t=342) (video)

### Chrome 64

- [Performance Monitor](https://developer.chrome.com/blog/new-in-devtools-64#perf-monitor)
- [Console Sidebar](https://developer.chrome.com/blog/new-in-devtools-64#console-sidebar)
- [Group similar Console messages](https://developer.chrome.com/blog/new-in-devtools-64#group-similar)
- Bonus tip: [Toggle hover pseudo-class](https://youtu.be/90wNAn05Cf4?t=159) (video)

### Chrome 63

- [Multi-client remote debugging support](https://developer.chrome.com/blog/new-in-devtools-63#multi-client)
- [Workspaces 2.0](https://developer.chrome.com/blog/new-in-devtools-63#workspaces)
- [4 new audits](https://developer.chrome.com/blog/new-in-devtools-63#audits)
- [Simulate push notifications with custom data](https://developer.chrome.com/blog/new-in-devtools-63#push)
- [Trigger background sync events with custom tags](https://developer.chrome.com/blog/new-in-devtools-63#sync)
- Bonus tip: [Event listener breakpoints](https://youtu.be/Eyw_mwbABIQ?t=217) (video)

### Chrome 62

- [Top-level await in the Console](https://developer.chrome.com/blog/new-in-devtools-62#await)
- [New screenshot workflows](https://developer.chrome.com/blog/new-in-devtools-62#screenshots)
- [CSS Grid highlighting](https://developer.chrome.com/blog/new-in-devtools-62#css-grid-highlighting)
- [A new Console API for querying objects](https://developer.chrome.com/blog/new-in-devtools-62#query-objects)
- [New Console filters](https://developer.chrome.com/blog/new-in-devtools-62#console-filters)
- [HAR imports in the Network panel](https://developer.chrome.com/blog/new-in-devtools-62#har-imports)
- [Previewable cache resources](https://developer.chrome.com/blog/new-in-devtools-62#cache-previews)
- [More predictable cache debugging](https://developer.chrome.com/blog/new-in-devtools-62#cache-debugging)
- [Block-level code coverage](https://developer.chrome.com/blog/new-in-devtools-62#coverage)

### Chrome 61

- [Mobile device throttling simulation](https://developer.chrome.com/blog/new-in-devtools-61#throttling)
- [View storage usage](https://developer.chrome.com/blog/new-in-devtools-61#storage)
- [View when a service worker cached responses](https://developer.chrome.com/blog/new-in-devtools-61#time-cached)
- [Enable the FPS meter from the Command Menu](https://developer.chrome.com/blog/new-in-devtools-61#fps-meter)
- [Set mousewheel behavior to zoom or scroll](https://developer.chrome.com/blog/new-in-devtools-61#mousewheel)
- [Debugging support for ES6 modules](https://developer.chrome.com/blog/new-in-devtools-61#modules)

### Chrome 60

- [New Audits panel](https://developer.chrome.com/blog/new-in-devtools-60#lighthouse)
- [3rd-Party Badges](https://developer.chrome.com/blog/new-in-devtools-60#badges)
- [A new gesture for Continue To Here](https://developer.chrome.com/blog/new-in-devtools-60#continue)
- [Step into async](https://developer.chrome.com/blog/new-in-devtools-60#step-into-async)
- [More informative object previews in the Console](https://developer.chrome.com/blog/new-in-devtools-60#object-previews)
- [More informative context selection in the Console](https://developer.chrome.com/blog/new-in-devtools-60#context)
- [Real-time updates in the Coverage tab](https://developer.chrome.com/blog/new-in-devtools-60#coverage)
- [Simpler network throttling options](https://developer.chrome.com/blog/new-in-devtools-60#network-throttling)
- [Async stacks on by default](https://developer.chrome.com/blog/new-in-devtools-60#async-stacks)

### Chrome 59

- [CSS and JS code coverage](https://developer.chrome.com/blog/new-in-devtools-59#coverage)
- [Full-page screenshots](https://developer.chrome.com/blog/new-in-devtools-59#screenshots)
- [Block requests](https://developer.chrome.com/blog/new-in-devtools-59#block-requests)
- [Step over async await](https://developer.chrome.com/blog/new-in-devtools-59#async)
- [Unified Command Menu](https://developer.chrome.com/blog/new-in-devtools-59#command-menu)