What's New in DevTools (Microsoft Edge 141) (#3599)

* what's new 141 first draft

* toc

* chrome links

* masonry See Also

---------

Co-authored-by: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com>

Author: leahmsft

microsoft-edge/devtools/whats-new/2025/10/devtools-141-images/masonry-adorner.png

@@ -0,0 +1,55 @@
+---
+title: What's New in DevTools (Microsoft Edge 141)
+description: CSS masonry layout support in the Elements tool. Persisted track configuration in the Performance panel. And more.  # key words before col 158
+author: MSEdgeTeam
+ms.author: msedgedevrel
+ms.topic: conceptual
+ms.service: microsoft-edge
+ms.subservice: devtools
+ms.date: 10/02/2025
+---
+# What's New in DevTools (Microsoft Edge 141)
+
+These are the latest features in the Stable release of Microsoft Edge DevTools.
+
+
+<!-- ====================================================================== -->
+## CSS masonry layout support in the Elements tool
+
+<!-- Subtitle: Inspect masonry layout in the Layout tab and adorners in the DOM tree. -->
+
+CSS masonry layout is supported in the **Layout** tab of the **Elements** tool.  Masonry layout elements are displayed alongside grid layout elements:
+
+![The Grid/Masonry section in the Layout tab](./devtools-141-images/masonry-layout-tab.png)
+
+In the **Overlay display settings** section, you can control whether to display:
+* Line numbers or line names.
+* Track sizes.
+* Area names.
+
+The **masonry** adorner appears next to elements in the DOM tree, similar to the **grid** or **flex** adorners:
+
+![The "masonry" adorner on the body tag in the DOM tree](./devtools-141-images/masonry-adorner.png)
+
+See also:
+* [Inspect CSS Grid](/microsoft-edge/devtools/css/grid)
+* [CSS Masonry demos](https://github.com/MicrosoftEdge/Demos/tree/main/css-masonry)
+* [Brick by brick: Help us build CSS Masonry](https://developer.chrome.com/blog/masonry-update) - Blog post.
+* [Elements > Layout tab adds masonry layout support](https://developer.chrome.com/blog/new-in-devtools-141#masonry) - Chromium What's New.
+
+
+<!-- ====================================================================== -->
+## Announcements from the Chromium project
+
+Microsoft Edge 141 also includes the following updates from the Chromium project:
+
+* [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)
+
+
+<!-- ====================================================================== -->
+## 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)

microsoft-edge/devtools/whats-new/2025/10/devtools-141-images/masonry-layout-tab.png

@@ -109,6 +109,10 @@
               href: ./devtools/whats-new/whats-new.md
               displayName: release notes, announcements
 # latest 10 What's New
+            - name: Microsoft Edge 141
+              href: ./devtools/whats-new/2025/10/devtools-141.md
+              displayName: What's New in DevTools (Microsoft Edge 141)  # page title
+
             - name: Microsoft Edge 140
               href: ./devtools/whats-new/2025/09/devtools-140.md
               displayName: What's New in DevTools (Microsoft Edge 140)  # page title
@@ -145,16 +149,16 @@
               href: ./devtools/whats-new/2025/01/devtools-132.md
               displayName: What's New in DevTools (Microsoft Edge 132)  # page title
 
-            - name: Microsoft Edge 131
-              href: ./devtools/whats-new/2024/11/devtools-131.md
-              displayName: What's New in DevTools (Microsoft Edge 131)  # 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 131
+                  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