New article: "What's New in DevTools (Microsoft Edge 140)" (#3568)

leahmsft · mikehoffms · web-flow · commit 587e8ef3c46c · 2025-09-10T14:59:27.000-07:00
* first draft

* nit

* toc

* trim links

* update desc

* add screenshot

* png

* Delete invalidation-count-col.png

* not we

* see also

* (slow) label

* gearbox

* group paragraphs

* CSS selectors

* that are

* ,

* DOM nodes

* update screenshot

* replace png

---------

Co-authored-by: Michael Hoffman &lt;45407486+mikehoffms@users.noreply.github.com&gt;
diff --git 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
@@ -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
@@ -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)
 
diff --git 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
@@ -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
@@ -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
diff --git a/microsoft-edge/devtools/whats-new/2025/09/devtools-140.md 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
+
+<!-- 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)
diff --git 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
@@ -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).
 
 
 <!-- ====================================================================== -->
