What's New in DevTools 130

microsoft-edge/devtools-guide-chromium/device-mode/index.md

@@ -25,8 +25,14 @@ ms.date: 11/20/2023
 
 Use the **Device Emulation** tool, sometimes called _Device Mode_, to approximate how your page looks and behaves on a mobile device.
 
+**Device Emulation** is a [first-order approximation](https://wikipedia.org/wiki/Order_of_approximation#First-order) of the look and feel of your page on a mobile device.  **Device Emulation** doesn't actually run your code on a mobile device.  Instead, you simulate the mobile user experience from your laptop or desktop.
+
+Some aspects of mobile devices aren't emulated in DevTools.  For example, the architecture of mobile CPUs is different than the architecture of laptop or desktop CPUs.  For the most robust testing, run your page on a mobile device.
+
+Use [Remote Debugging](../remote-debugging/index.md) to interact with the code of a page from your machine while your page actually runs on a mobile device.  You can view, change, debug, profile, or all four while you interact with the code.  Your machine can be a notebook or desktop computer.
+
+
 **Detailed contents:**<!--July 27, 2023. compare page toc at https://developer.chrome.com/docs/devtools/device-mode/-->
-* [Limitations](#limitations)
 * [Simulate a mobile viewport](#simulate-a-mobile-viewport)
    * [Responsive Viewport Mode](#responsive-viewport-mode)
       * [Show media queries](#show-media-queries)
@@ -47,16 +53,6 @@ Use the **Device Emulation** tool, sometimes called _Device Mode_, to approximat
 * [Set user-agent client hints](#set-user-agent-client-hints)
 
 
-<!-- ====================================================================== -->
-## Limitations
-
-**Device Emulation** is a [first-order approximation](https://wikipedia.org/wiki/Order_of_approximation#First-order) of the look and feel of your page on a mobile device.  **Device Emulation** doesn't actually run your code on a mobile device.  Instead, you simulate the mobile user experience from your laptop or desktop.
-
-Some aspects of mobile devices aren't emulated in DevTools.  For example, the architecture of mobile CPUs is different than the architecture of laptop or desktop CPUs.  For the most robust testing, run your page on a mobile device.
-
-Use [Remote Debugging](../remote-debugging/index.md) to interact with the code of a page from your machine while your page actually runs on a mobile device.  You can view, change, debug, profile, or all four while you interact with the code.  Your machine can be a notebook or desktop computer.
-
-
 <!-- ====================================================================== -->
 ## Simulate a mobile viewport
 

microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130.md

@@ -0,0 +1,159 @@
+---
+title: What's New in DevTools (Microsoft Edge 130)
+description: "New Detached elements profile in Memory tool. Improved names of plain JavaScript objects in heap snapshots. Create a collection or environment in Network Console. Bug fixes for icons. Fixed icon alignment in vertical Activity Bar. Removed circle shadow on hover. Performance tool icon shows warning when throttled. Warning message icon and expand button meets luminosity ratio. And more."
+author: MSEdgeTeam
+ms.author: msedgedevrel
+ms.topic: conceptual
+ms.service: microsoft-edge
+ms.subservice: devtools
+ms.date: 10/17/2024
+---
+# What's New in DevTools (Microsoft Edge 130)
+
+[!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)]
+
+
+<!-- ====================================================================== -->
+## New Detached elements profile in the Memory tool
+
+<!-- Subtitle: Detached elements helps you fix memory leaks due to detached DOM elements.-->
+
+The **Memory** tool has a new profile type called **Detached elements**, which shows detached objects that are retained by a JavaScript reference:
+
+![Detached elements profile type](./devtools-130-images/detached-elements-profile-type.png)
+
+This shows a view of the detached nodes to help you identify memory leaks on your webpage.
+
+![Detached elements view](./devtools-130-images/detached-nodes.png)
+
+See also:
+* [Debug DOM memory leaks with the Detached Elements feature](../../../memory-problems/dom-leaks.md)
+
+
+<!-- ====================================================================== -->
+## Improved names of plain JavaScript objects in heap snapshots
+
+<!-- Plain JavaScript objects are named, categorized, and searchable based on the properties they contain.-->
+
+To help differentiate plain JavaScript objects in the **Object** category, they are now named and categorized based on the properties they contain.  These names are also searchable if you press **Ctrl+F**.
+
+See also:
+* [Record heap snapshots using the Memory tool](../../../memory-problems/heap-snapshots.md)
+
+
+<!-- ====================================================================== -->
+## Create a collection or environment in Network Console is working again
+
+<!-- Subtitle: Use collections and environments to manage API requests and its values and variables. -->
+
+Previously, in the **Network Console** tool, when you tried to create a new collection or environment, it was unresponsive and wouldn't save after pressing **Enter**.  This bug is fixed and functionality has been restored.
+
+![Network Console collection and environment](./devtools-130-images/create-collection-environment.png)
+
+See also:
+* [Compose and send web API requests using the Network Console tool](../../../network-console/network-console-tool.md)
+
+
+<!-- ====================================================================== -->
+## Bug fixes for icons
+
+<!-- Subtitle: todo -->
+
+
+<!-- ------------------------------ -->
+#### Fixed icon alignment in the vertical Activity Bar
+
+When the **Activity Bar** was vertical, the icons were left-aligned:
+
+![Broken activity bar icons](./devtools-130-images/misaligned-icons.png)
+
+This has been fixed:
+
+![Fixed activity bar icons](./devtools-130-images/aligned-icons.png)
+
+See also:
+* [Overview of the user interface](../../../overview.md#overview-of-the-user-interface) in _Overview of DevTools_.
+
+
+<!-- ------------------------------ -->
+#### Fixed double shadows that appeared on hover
+
+Many icons in the **Activity Bar** and other toolbars showed an overlapping circle and square shadow when you hovered over them:
+
+![Double shadow on icon](./devtools-130-images/double-shadow-icon.png)
+
+The double shadow has been removed, and the icon only shows the square shadow when you hover over it:
+
+![Single shadow on icon](./devtools-130-images/single-shadow-icon.png)
+
+See also:
+* [Overview of the user interface](../../../overview.md#overview-of-the-user-interface) in _Overview of DevTools_.
+
+
+<!-- ------------------------------ -->
+#### Performance tool icon now shows a warning when throttling is enabled
+
+When throttling is enabled in **Device Emulation**, a warning icon is displayed in the **Performance** tab of the toolbar to help you know that performance is impacted by throttling:
+
+![Performance tab warning icon](./devtools-130-images/performance-warning-icon.png)
+
+See also:
+* [Throttle the network and CPU](../../../device-mode/index.md#throttle-the-network-and-cpu) in _Emulate mobile devices (Device Emulation)_.
+
+
+<!-- ====================================================================== -->
+## Accessibility bug fix: Warning message icon and expand button meets standard luminosity ratio 
+
+<!-- Subtitle: The warning icon and expand button on warning messages in the Console now meet the standard luminosity ratio of 3:1.-->
+
+In the **Console** tool, the Warning count expander button on warning messages in the **Console** previously didn't meet the standard luminosity ratio of 3:1:
+
+![Low luminosity ratio for the Warning count expander button](./devtools-130-images/console-icon-luminosity-ratio-before.png)
+
+This has now been fixed; the Warning count expander button has a higher luminosity ratio:
+
+![High luminosity ratio for the Warning count expander button](./devtools-130-images/console-icon-luminosity-ratio-after.png)
+
+
+See also:
+* [Inspect and filter information on the current webpage](../../../console/index.md#inspect-and-filter-information-on-the-current-webpage) in _Console overview_.
+
+
+<!-- ====================================================================== -->
+## Announcements from the Chromium project
+
+Microsoft Edge 130 also includes the following updates from the Chromium project:
+
+* [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)
+   * [Bare declarations after nested rules don't "shift up"](https://developer.chrome.com/blog/new-in-devtools-130#css-nesting)
+* [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 higlhlights](https://developer.chrome.com/blog/new-in-devtools-130#misc)
+<!-- todo: maybe remove some links -->
+
+
+<!-- ====================================================================== -->
+<!-- uncomment if content is copied from developer.chrome.com to this page -->
+
+<!-- > [!NOTE]
+> Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0).
+> The original page for announcements from the Chromium project is [What's New in DevTools (Chrome 130)](https://developer.chrome.com/blog/new-in-devtools-130) and is authored by [Sofia Emelianova](https://developers.google.com/web/resources/contributors) (Senior Technical Writer working on Chrome DevTools at Google). -->
+
+
+<!-- ====================================================================== -->
+<!-- uncomment if content is copied from developer.chrome.com to this page -->
+
+<!-- [![Creative Commons License](../../../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0)
+This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). -->

microsoft-edge/toc.yml

@@ -31,6 +31,10 @@
 
 # What's New pages ------------------------------------------------------------
             # move eleventh oldest into Archive bucket
+            - name: Microsoft Edge 130
+              href: devtools-guide-chromium/whats-new/2024/10/devtools-130.md
+              displayName: What's New in DevTools (Microsoft Edge 130)  # top-of-page title
+
             - name: Microsoft Edge 129
               href: devtools-guide-chromium/whats-new/2024/09/devtools-129.md
               displayName: What's New in DevTools (Microsoft Edge 129)  # top-of-page title
@@ -67,16 +71,16 @@
               href: devtools-guide-chromium/whats-new/2024/01/devtools-121.md
               displayName: What's New in DevTools (Microsoft Edge 121)  # top-of-page title
 
-            - name: Microsoft Edge 120
-              href: devtools-guide-chromium/whats-new/2023/12/devtools-120.md
-              displayName: What's New in DevTools (Microsoft Edge 120)  # top-of-page title
-
             # keep 10 items above
             - name: Archive
               items:
                 - name: What's New in DevTools archive
                   href: devtools-guide-chromium/whats-new/whats-new-archive.md
 
+                - name: Microsoft Edge 120
+                  href: devtools-guide-chromium/whats-new/2023/12/devtools-120.md
+                  displayName: What's New in DevTools (Microsoft Edge 120)  # top-of-page title
+
                 - name: Microsoft Edge 119
                   href: devtools-guide-chromium/whats-new/2023/11/devtools-119.md
                   displayName: What's New in DevTools (Microsoft Edge 119)  # top-of-page title