diff --git a/microsoft-edge/devtools/performance/reference.md b/microsoft-edge/devtools/performance/reference.md index 9bcee40300..b7d7bd87a1 100644 --- a/microsoft-edge/devtools/performance/reference.md +++ b/microsoft-edge/devtools/performance/reference.md @@ -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). diff --git a/microsoft-edge/devtools/performance/selector-stats.md b/microsoft-edge/devtools/performance/selector-stats.md index 277e973b69..53d9e37877 100644 --- a/microsoft-edge/devtools/performance/selector-stats.md +++ b/microsoft-edge/devtools/performance/selector-stats.md @@ -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. @@ -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) @@ -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. @@ -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. @@ -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. diff --git a/microsoft-edge/devtools/whats-new/2024/05/devtools-125.md b/microsoft-edge/devtools/whats-new/2024/05/devtools-125.md index e080e42c57..9b07d705a2 100644 --- a/microsoft-edge/devtools/whats-new/2024/05/devtools-125.md +++ b/microsoft-edge/devtools/whats-new/2024/05/devtools-125.md @@ -26,7 +26,7 @@ todo video -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) diff --git a/microsoft-edge/devtools/whats-new/2025/05/devtools-136.md b/microsoft-edge/devtools/whats-new/2025/05/devtools-136.md index 7e11e57e23..5bec3e5659 100644 --- a/microsoft-edge/devtools/whats-new/2025/05/devtools-136.md +++ b/microsoft-edge/devtools/whats-new/2025/05/devtools-136.md @@ -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 diff --git a/microsoft-edge/devtools/whats-new/2025/06/devtools-137.md b/microsoft-edge/devtools/whats-new/2025/06/devtools-137.md index eb7a2b2618..9f9044e6f2 100644 --- a/microsoft-edge/devtools/whats-new/2025/06/devtools-137.md +++ b/microsoft-edge/devtools/whats-new/2025/06/devtools-137.md @@ -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 diff --git a/microsoft-edge/devtools/whats-new/2025/08/devtools-139.md b/microsoft-edge/devtools/whats-new/2025/08/devtools-139.md index f6397912e1..5127818254 100644 --- a/microsoft-edge/devtools/whats-new/2025/08/devtools-139.md +++ b/microsoft-edge/devtools/whats-new/2025/08/devtools-139.md @@ -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 diff --git a/microsoft-edge/devtools/whats-new/2025/09/devtools-140-images/selector-stats-invalidations.png b/microsoft-edge/devtools/whats-new/2025/09/devtools-140-images/selector-stats-invalidations.png new file mode 100644 index 0000000000..35b0719d45 Binary files /dev/null and b/microsoft-edge/devtools/whats-new/2025/09/devtools-140-images/selector-stats-invalidations.png differ diff --git a/microsoft-edge/devtools/whats-new/2025/09/devtools-140.md b/microsoft-edge/devtools/whats-new/2025/09/devtools-140.md new file mode 100644 index 0000000000..31c8708c2b --- /dev/null +++ b/microsoft-edge/devtools/whats-new/2025/09/devtools-140.md @@ -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 + + + +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 + + +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) diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 9be15c025f..1096ad0b3c 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -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 @@ -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 diff --git a/microsoft-edge/web-platform/release-notes/140.md b/microsoft-edge/web-platform/release-notes/140.md index 2378149ab8..858b1c74e1 100644 --- a/microsoft-edge/web-platform/release-notes/140.md +++ b/microsoft-edge/web-platform/release-notes/140.md @@ -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). - ## WebView2 -See [Release Notes for the WebView2 SDK](../../webview2/release-notes/index.md). - +See [1.0.3485.44](../../webview2/release-notes/index.md#10348544) in _Release Notes for the WebView2 SDK_ (Sep. 2025).