diff --git a/microsoft-edge/devtools-guide-chromium/device-mode/index-images/performance-warning-icon.png b/microsoft-edge/devtools-guide-chromium/device-mode/index-images/performance-warning-icon.png new file mode 100644 index 0000000000..6564eb728c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/device-mode/index-images/performance-warning-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/device-mode/index.md b/microsoft-edge/devtools-guide-chromium/device-mode/index.md index 81b9ac8cf0..9e4f353715 100644 --- a/microsoft-edge/devtools-guide-chromium/device-mode/index.md +++ b/microsoft-edge/devtools-guide-chromium/device-mode/index.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: devtools -ms.date: 11/20/2023 +ms.date: 01/30/2025 --- +**Detailed contents:** * [Simulate a mobile viewport](#simulate-a-mobile-viewport) * [Responsive Viewport Mode](#responsive-viewport-mode) - * [Show media queries](#show-media-queries) - * [Set the device type](#set-the-device-type) + * [Show media queries](#show-media-queries) + * [Set device pixel ratio](#set-device-pixel-ratio) + * [Set the device type](#set-the-device-type) * [Mobile Device Viewport Mode](#mobile-device-viewport-mode) - * [Rotate the viewport to landscape orientation](#rotate-the-viewport-to-landscape-orientation) - * [Show device frame](#show-device-frame) - * [Add a custom mobile device](#add-a-custom-mobile-device) + * [Rotate the viewport to landscape orientation](#rotate-the-viewport-to-landscape-orientation) + * [Show device frame](#show-device-frame) + * [Add a custom mobile device](#add-a-custom-mobile-device) * [Show rulers](#show-rulers) * [Zoom the viewport](#zoom-the-viewport) + * [Capture a screenshot](#capture-a-screenshot) * [Throttle the network and CPU](#throttle-the-network-and-cpu) + * [Network and Performance tabs have warning icon when throttled](#network-and-performance-tabs-have-warning-icon-when-throttled) * [Throttle the CPU only](#throttle-the-cpu-only) * [Throttle the network only](#throttle-the-network-only) * [Emulate sensors](#emulate-sensors) @@ -281,12 +284,21 @@ To test how quickly your page loads and how it responds at different internet an If the **Throttle list** is hidden, widen the **Device Toolbar**. -* **Mid-tier mobile** simulates `fast 3G` and throttles your CPU. It is four times slower than normal. -* **Low-end mobile** simulates `slow 3G` and throttles your CPU. It is six times slower than normal. +* **Mid-tier mobile** simulates **CPU** throttling of **4x slowdown** and **Network** throttling of **Slow 4G**. It is four times slower than normal. + +* **Low-end mobile** simulates **CPU** throttling of **6x slowdown** and **Network** throttling of **3G**. It is six times slower than normal. All of the throttling is based upon the normal capability of your laptop or desktop. + +#### Network and Performance tabs have warning icon when throttled + +When throttling is enabled in **Device Emulation**, a warning icon is displayed in the **Network** and **Performance** tool tabs on the **Activity Bar**, to help you know that performance is impacted by throttling: + +![The Throttled warning icon on the Network and Performance tool tabs](./index-images/performance-warning-icon.png) + + #### Throttle the CPU only @@ -335,10 +347,6 @@ The sections below provide a quick look on how to override geolocation and set d Use the **Sensors** tool to override geolocation and simulate device orientation. - - -#### Override geolocation - If your page depends on geolocation information from a mobile device to render properly, provide different geolocations using the geolocation-overriding UI. 1. In the **Activity Bar**, click the **More tools** (![More tools icon](./index-images/more-tools-icon.png)) button, and then click **Sensors**: diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index.md b/microsoft-edge/devtools-guide-chromium/evaluate-performance/index.md index d152283668..324eb99c31 100644 --- a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index.md +++ b/microsoft-edge/devtools-guide-chromium/evaluate-performance/index.md @@ -65,7 +65,9 @@ Mobile devices have much less CPU power than desktops and laptops. Whenever you ![CPU throttle](./index-images/capture-settings.png) - If you want to ensure that pages work well on low-end mobile devices, set **CPU** to **6x slowdown**. + A warning icon is displayed on the **Performance** tool's tab, to remind you that throttling is enabled. + +If you want to ensure that pages work well on low-end mobile devices, set **CPU** to **6x slowdown**. diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference.md b/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference.md index 030c51daae..7f1a5b8318 100644 --- a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference.md +++ b/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference.md @@ -135,23 +135,29 @@ An example of a recording when JS samples are enabled: #### Throttle the network while recording + To throttle the network while recording: -1. In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button. +1. In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button. See [Show recording settings](#show-recording-settings), above. 1. Set **Network** to the desired level of throttling. + A warning icon is displayed on the **Network** tool's tab, to remind you that throttling is enabled. + #### Throttle the CPU while recording + To throttle the CPU while recording: -1. In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button. +1. In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button. See [Show recording settings](#show-recording-settings), above. 1. Set **CPU** to the desired level of throttling. + A warning icon is displayed on the **Performance** tool's tab, to remind you that throttling is enabled. + Throttling is relative to the capabilities of your computer. For example, the **2x slowdown** option makes your CPU operate twice as slow than normal. DevTools don't truly simulate the CPUs of mobile devices, because the architecture of mobile devices is very different from that of desktops and laptops. diff --git a/microsoft-edge/devtools-guide-chromium/network/index-images/empty-cache-and-hard-reset.png b/microsoft-edge/devtools-guide-chromium/network/index-images/empty-cache-and-hard-reset.png index fb23cc9557..75a3d56470 100644 Binary files a/microsoft-edge/devtools-guide-chromium/network/index-images/empty-cache-and-hard-reset.png and b/microsoft-edge/devtools-guide-chromium/network/index-images/empty-cache-and-hard-reset.png differ diff --git a/microsoft-edge/devtools-guide-chromium/network/index.md b/microsoft-edge/devtools-guide-chromium/network/index.md index 8384015e3b..6bbf3adbb5 100644 --- a/microsoft-edge/devtools-guide-chromium/network/index.md +++ b/microsoft-edge/devtools-guide-chromium/network/index.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: devtools -ms.date: 07/11/2023 +ms.date: 02/12/2025 --- **Detailed contents:** - + + * [Record network requests](#record-network-requests) * [Stop recording network requests](#stop-recording-network-requests) * [Clear requests](#clear-requests) @@ -37,9 +38,11 @@ This article is a feature-driven inventory of the **Network** tool. Use the **N * [Capture screenshots during page load](#capture-screenshots-during-page-load) * [Change loading behavior](#change-loading-behavior) * [Emulate a first-time visitor by disabling the browser cache](#emulate-a-first-time-visitor-by-disabling-the-browser-cache) + * [Disable the browser cache from the Network conditions tool](#disable-the-browser-cache-from-the-network-conditions-tool) * [Manually clear the browser cache](#manually-clear-the-browser-cache) * [Emulate offline](#emulate-offline) * [Emulate slow network connections](#emulate-slow-network-connections) + * [Emulate slow network connections from the Network Conditions tool](#emulate-slow-network-connections-from-the-network-conditions-tool) * [Manually clear browser cookies](#manually-clear-browser-cookies) * [Override the user agent](#override-the-user-agent) * [Set user agent client hints](#set-user-agent-client-hints) @@ -52,13 +55,19 @@ This article is a feature-driven inventory of the **Network** tool. Use the **N * [Sort by column](#sort-by-column) * [Sort by activity phase](#sort-by-activity-phase) * [Analyze requests](#analyze-requests) + * [Display a log of requests](#display-a-log-of-requests) + * [Add or remove columns](#add-or-remove-columns) + * [Add columns for response headers](#add-columns-for-response-headers) * [Display the timing relationship of requests](#display-the-timing-relationship-of-requests) * [Display a preview of a response body](#display-a-preview-of-a-response-body) * [Display a response body](#display-a-response-body) * [Display HTTP headers](#display-http-headers) * [Display query string parameters](#display-query-string-parameters) + * [Display URL-encoded query string parameters](#display-url-encoded-query-string-parameters) * [Display cookies](#display-cookies) * [Display the timing breakdown of a request](#display-the-timing-breakdown-of-a-request) + * [Preview a timing breakdown](#preview-a-timing-breakdown) + * [Timing breakdown phases explained](#timing-breakdown-phases-explained) * [Display initiators and dependencies](#display-initiators-and-dependencies) * [Display load events](#display-load-events) * [Display the total number of requests](#display-the-total-number-of-requests) @@ -74,6 +83,7 @@ This article is a feature-driven inventory of the **Network** tool. Use the **N * [Hide the Filters pane](#hide-the-filters-pane) * [Big request rows](#big-request-rows) * [Hide the Overview pane](#hide-the-overview-pane) +* [See also](#see-also) @@ -212,9 +222,17 @@ The **Throttling** dropdown menu: ![The Throttling dropdown menu](./reference-images/throttling-menu.png) -You can choose from different presets, such as Slow 3G or Fast 3G. To add your own custom presets, open the Throttling menu, and select **Custom** > **Add**. +You can choose from different presets, such as: +* **Fast 4G** +* **Slow 4G** +* **3G** +* **Offline** -DevTools displays a warning icon next to the **Network** tool to remind you that throttling is enabled. +To add your own custom presets, click the **Throttling** menu, and then select **Custom** > **Add**. + +A warning icon is displayed on the **Network** tool's tab, to remind you that throttling is enabled: + +![The Throttled warning icon on the Network tab in the Activity Bar](./reference-images/throttled-icon.png) See also [Simulate a slower network connection](../network/index.md#simulate-a-slower-network-connection) in _Inspect network activity_.