diff --git a/microsoft-edge/devtools-guide-chromium/device-mode/index.md b/microsoft-edge/devtools-guide-chromium/device-mode/index.md index b07e440973..864c430865 100644 --- a/microsoft-edge/devtools-guide-chromium/device-mode/index.md +++ b/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:** -* [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 diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/aligned-icons.png b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/aligned-icons.png new file mode 100644 index 0000000000..570195e857 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/aligned-icons.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/console-icon-luminosity-ratio-after.png b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/console-icon-luminosity-ratio-after.png new file mode 100644 index 0000000000..2e7e9455f8 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/console-icon-luminosity-ratio-after.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/console-icon-luminosity-ratio-before.png b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/console-icon-luminosity-ratio-before.png new file mode 100644 index 0000000000..7a80734513 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/console-icon-luminosity-ratio-before.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/create-collection-environment.png b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/create-collection-environment.png new file mode 100644 index 0000000000..d8218117c0 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/create-collection-environment.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/detached-elements-profile-type.png b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/detached-elements-profile-type.png new file mode 100644 index 0000000000..19b188505a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/detached-elements-profile-type.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/detached-nodes.png b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/detached-nodes.png new file mode 100644 index 0000000000..2192a0ea96 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/detached-nodes.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/double-shadow-icon.png b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/double-shadow-icon.png new file mode 100644 index 0000000000..dc9161bf17 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/double-shadow-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/misaligned-icons.png b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/misaligned-icons.png new file mode 100644 index 0000000000..dffa3ee54c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/misaligned-icons.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/performance-warning-icon.png b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/performance-warning-icon.png new file mode 100644 index 0000000000..81c02a7a09 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/performance-warning-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/single-shadow-icon.png b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/single-shadow-icon.png new file mode 100644 index 0000000000..7747f8cf1e Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130-images/single-shadow-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130.md b/microsoft-edge/devtools-guide-chromium/whats-new/2024/10/devtools-130.md new file mode 100644 index 0000000000..48632cb19f --- /dev/null +++ b/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 + + + +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 + + + +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 + + + +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 + + + +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 + + + +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 + + + +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 + + + +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) + + + + + + + + + + + + diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 568c74425c..318b53d017 100644 --- a/microsoft-edge/toc.yml +++ b/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