Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion microsoft-edge/devtools/performance/reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ To view the statistics of your CSS rule selectors during long-running **Recalcul

1. Click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button. See [Show recording settings](#show-recording-settings), above.

1. Select the **Enable CSS selector stats** checkbox.
1. Select the **Enable CSS selector stats (slow)** checkbox.

For details, see [Analyze CSS selector performance during Recalculate Style events](./selector-stats.md).

Expand Down
10 changes: 5 additions & 5 deletions microsoft-edge/devtools/performance/selector-stats.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ CSS styles need to be recalculated whenever the applicability of CSS rules may h
<!-- ====================================================================== -->
## Record a performance trace with Selector Stats enabled

To view the statistics of your CSS rule selectors during long-running **Recalculate Style** events, first record a performance trace with the Selector Stats feature enabled. You enable the Selector Stats feature by selecting the **Enable CSS selector stats** checkbox, which displays the **Selector Stats** tab.
To view the statistics of your CSS rule selectors during long-running **Recalculate Style** events, first record a performance trace with the Selector Stats feature enabled. You enable the Selector Stats feature by selecting the **Enable CSS selector stats (slow)** checkbox, which displays the **Selector stats** tab.

The Selector Stats feature isn't always enabled, because it adds more overhead to your performance recordings. You should only leave it turned on when you need to investigate the performance of **Recalculate Style** events and other rendering information.

Expand All @@ -44,7 +44,7 @@ To record a performance trace with selector statistics:

1. In the **Performance** tool, click the **Capture settings** (![Capture settings icon](./selector-stats-images/capture-settings-icon.png)) button.

1. Select the **Enable CSS selector stats** checkbox:
1. Select the **Enable CSS selector stats (slow)** checkbox:

![The "Enable CSS selector stats" checkbox in the Performance tool](./selector-stats-images/enable-feature.png)

Expand Down Expand Up @@ -83,7 +83,7 @@ The **Selector Stats** tab in the **Performance** tool contains a table of CSS s
| **Selector** | The CSS selector that was matched. |
| **Style Sheet** | The CSS style sheet that contains the CSS selector. |

When finished, in the **Performance** tool, click the **Capture settings** (![Capture settings icon](./selector-stats-images/capture-settings-icon.png)) button, and then clear the **Enable CSS selector stats** checkbox.
When finished, in the **Performance** tool, click the **Capture settings** (![Capture settings icon](./selector-stats-images/capture-settings-icon.png)) button, and then clear the **Enable CSS selector stats (slow)** checkbox.


<!-- ====================================================================== -->
Expand All @@ -105,7 +105,7 @@ To view aggregate statistics of the CSS rule selectors that are involved in mult

1. Repeat the previous steps with the other **Recalculate Style** events you're interested in.

When finished, in the **Performance** tool, click the **Capture settings** (![Capture settings icon](./selector-stats-images/capture-settings-icon.png)) button, and then clear the **Enable CSS selector stats** checkbox.
When finished, in the **Performance** tool, click the **Capture settings** (![Capture settings icon](./selector-stats-images/capture-settings-icon.png)) button, and then clear the **Enable CSS selector stats (slow)** checkbox.


<!-- ====================================================================== -->
Expand All @@ -123,7 +123,7 @@ To view aggregate statistics of the CSS rule selectors that are involved in the

![The Selector Stats table for the full recording](./selector-stats-images/full-recording.png)

When finished, in the **Performance** tool, click the **Capture settings** (![Capture settings icon](./selector-stats-images/capture-settings-icon.png)) button, and then clear the **Enable CSS selector stats** checkbox.
When finished, in the **Performance** tool, click the **Capture settings** (![Capture settings icon](./selector-stats-images/capture-settings-icon.png)) button, and then clear the **Enable CSS selector stats (slow)** checkbox.


<!-- ====================================================================== -->
Expand Down
2 changes: 1 addition & 1 deletion microsoft-edge/devtools/whats-new/2024/05/devtools-125.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ todo video

<!-- Subtitle: Use the "Enable CSS selector stats" setting instead of the "Enable advanced rendering instrumentation (slow)" to capture CSS selector statistics for Recalculate Style events-->

In the **Performance** tool, the **Enable advanced rendering instrumentation (slow)** checkbox has been replaced by the **Enable CSS selector stats** checkbox. This checkbox controls the CSS selector statistics feature.
In the **Performance** tool, the **Enable advanced rendering instrumentation (slow)** checkbox has been replaced by the **Enable CSS selector stats** checkbox. (Update: As of Edge 140, the checkbox label is **Enable CSS selector stats (slow)**, and the checkboxes are on the right.) This checkbox controls the CSS selector statistics feature.

![Selector stats tab](./devtools-125-images/selector-stats.png)

Expand Down
2 changes: 1 addition & 1 deletion microsoft-edge/devtools/whats-new/2025/05/devtools-136.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: What's New in DevTools (Microsoft Edge 136)
description: "DOM tree in Elements tool highlights semantic errors. And more."
description: DOM tree in Elements tool highlights semantic errors. And more. # key words before col 158
author: MSEdgeTeam
ms.author: msedgedevrel
ms.topic: conceptual
Expand Down
2 changes: 1 addition & 1 deletion microsoft-edge/devtools/whats-new/2025/06/devtools-137.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: What's New in DevTools (Microsoft Edge 137)
description: "The Enable settings sync checkbox lets you sync your DevTools settings across devices. And more."
description: The Enable settings sync checkbox lets you sync your DevTools settings across devices. And more. # key words before col 158
author: MSEdgeTeam
ms.author: msedgedevrel
ms.topic: conceptual
Expand Down
2 changes: 1 addition & 1 deletion microsoft-edge/devtools/whats-new/2025/08/devtools-139.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: What's New in DevTools (Microsoft Edge 139)
description: Added request headers to the table in the Network tool. And more.
description: Added request headers to the table in the Network tool. And more. # key words before col 158
author: MSEdgeTeam
ms.author: msedgedevrel
ms.topic: conceptual
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 46 additions & 0 deletions microsoft-edge/devtools/whats-new/2025/09/devtools-140.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
---
title: What's New in DevTools (Microsoft Edge 140)
description: Invalidation count in CSS selector stats, in the Performance tool. Emulate the 'Save-Data' header in Network conditions. And more. # key words before col 158
author: MSEdgeTeam
ms.author: msedgedevrel
ms.topic: conceptual
ms.service: microsoft-edge
ms.subservice: devtools
ms.date: 09/04/2025
---
# What's New in DevTools (Microsoft Edge 140)

These are the latest features in the Stable release of Microsoft Edge DevTools.


<!-- ====================================================================== -->
## Invalidation count in CSS selector stats

<!-- Subtitle: Identify expensive selectors with the new column in CSS selector stats (Performance tool) to reduce costly style recalculations. -->

In the **Performance** tool, the CSS **Selector stats** tab's table has a new column: **Invalidation count**. The **Invalidation count** column shows an aggregated count of DOM nodes that are matched by a CSS selector that were invalidated and had their style recalculated. A DOM node can be invalidated multiple times, by multiple CSS selectors.

During a recalculate style event, the browser may invalidate many DOM nodes, based on a given CSS selector. Inefficient CSS selectors can impact your webpage's performance. If you have high style-recalculation costs, that might be caused by over-invalidation. You can use this new insight to identify CSS selectors that have a high invalidation count, and reduce over-invalidation by refining your CSS style rules.

![Invalidation count column in CSS Selector stats tab's table](./devtools-140-images/selector-stats-invalidations.png)

See also:
* [Analyze CSS selector performance during Recalculate Style events](../../../performance/selector-stats.md)


<!-- ====================================================================== -->
## Announcements from the Chromium project
<!-- https://developer.chrome.com/blog/new-in-devtools-140 -->

Microsoft Edge 140 also includes the following updates from the Chromium project:

* [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)


<!-- ====================================================================== -->
## See also

* [What's New in Microsoft Edge DevTools](../../whats-new.md)
* [Release notes for Microsoft Edge web platform](../../../../web-platform/release-notes/index.md)
12 changes: 8 additions & 4 deletions microsoft-edge/toc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,10 @@
href: ./devtools/whats-new/whats-new.md
displayName: release notes, announcements
# latest 10 What's New
- name: Microsoft Edge 140
href: ./devtools/whats-new/2025/09/devtools-140.md
displayName: What's New in DevTools (Microsoft Edge 140) # page title

- name: Microsoft Edge 139
href: ./devtools/whats-new/2025/08/devtools-139.md
displayName: What's New in DevTools (Microsoft Edge 139) # page title
Expand Down Expand Up @@ -141,16 +145,16 @@
href: ./devtools/whats-new/2024/11/devtools-131.md
displayName: What's New in DevTools (Microsoft Edge 131) # page title

- name: Microsoft Edge 130
href: ./devtools/whats-new/2024/10/devtools-130.md
displayName: What's New in DevTools (Microsoft Edge 130) # page title

# keep 10 items above
- name: Archive
items:
- name: What's New in DevTools archive
href: ./devtools/whats-new/whats-new-archive.md

- name: Microsoft Edge 130
href: ./devtools/whats-new/2024/10/devtools-130.md
displayName: What's New in DevTools (Microsoft Edge 130) # page title

- name: Microsoft Edge 129
href: ./devtools/whats-new/2024/09/devtools-129.md
displayName: What's New in DevTools (Microsoft Edge 129) # page title
Expand Down
8 changes: 1 addition & 7 deletions microsoft-edge/web-platform/release-notes/140.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,19 +53,13 @@ To stay up-to-date and get the latest web platform features, download a preview
<!-- ====================================================================== -->
## Edge DevTools

See [What's New in Microsoft Edge DevTools](../../devtools/whats-new/whats-new.md).
<!-- todo: when it exists in Sep 2025, use instead:
See [What's New in DevTools (Microsoft Edge 140)](../../devtools/whats-new/2025/09/devtools-140.md).
-->


<!-- ====================================================================== -->
## WebView2

See [Release Notes for the WebView2 SDK](../../webview2/release-notes/index.md).
<!-- todo: when exists in Sep 2025, use instead:
See [1.0.n.n](../../webview2/release-notes/index.md#10nnnnnn) in _Release Notes for the WebView2 SDK_ (Sep 2025).
-->
See [1.0.3485.44](../../webview2/release-notes/index.md#10348544) in _Release Notes for the WebView2 SDK_ (Sep. 2025).


<!-- ====================================================================== -->
Expand Down