Merge pull request #3290 from MicrosoftDocs/user/leahtu/whats-new-130

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,152 @@
+---
+title: What's New in DevTools (Microsoft Edge 130)
+description: "Detached Elements profile in Memory tool. Improved names of JavaScript objects in heap snapshots. Create collection or environment in Network Console.  Fixed icon bugs. Performance tab icon when throttled. High-contrast Warning count. 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)]
+
+
+<!-- ====================================================================== -->
+## Detached Elements profiling type in Memory tool
+
+<!-- Subtitle: Detached elements helps you fix memory leaks due to detached DOM elements.-->
+
+The **Memory** tool has a new profiling type called **Detached elements**, which shows detached objects that are retained by a JavaScript reference:
+
+![Detached elements profiling type](./devtools-130-images/detached-elements-profile-type.png)
+
+The **Detached elements** profiling type 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 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
+
+<!-- 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)
+
+
+<!-- ====================================================================== -->
+## Fixed icon alignment in vertical Activity Bar
+
+<!-- Subtitle: Icons in the Activity Bar are properly aligned horizontally. -->
+
+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_.
+
+
+<!-- ====================================================================== -->
+## Removed circle shadow when hover over toolbar icons
+
+<!-- Subtitle: Icons in toolbars show only a square shadow when hovered over, instead of a circular shadow as well. -->
+
+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 tab warning icon when throttling
+
+<!-- Subtitle: The Performance tab icon gets a warning icon 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)_.
+
+
+<!-- ====================================================================== -->
+## Console's Warnings count button has increased contrast
+
+<!-- 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)
+* [Turn off dynamic theming](https://developer.chrome.com/blog/new-in-devtools-130#dynamic-theming)
+
+
+<!-- ====================================================================== -->
+<!-- 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