Merge pull request #3350 from MicrosoftDocs/user/mikehoffms/throttle-icon

Doc the Performance tool tab's warning icon when throttled

Author: captainbrosset

microsoft-edge/devtools-guide-chromium/device-mode/index-images/performance-warning-icon.png

@@ -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
 ---
 <!-- Copyright Kayce Basques
 
@@ -32,18 +32,21 @@ Some aspects of mobile devices aren't emulated in DevTools.  For example, the ar
 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/-->
+**Detailed contents:**<!--Jan. 30, 2025. compare page toc at https://developer.chrome.com/docs/devtools/device-mode/-->
 * [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**:

microsoft-edge/devtools-guide-chromium/device-mode/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**.
 
 
 <!-- ------------------------------ -->

microsoft-edge/devtools-guide-chromium/evaluate-performance/index.md

@@ -135,23 +135,29 @@ An example of a recording when JS samples are enabled:
 
 <!-- ------------------------------ -->
 #### Throttle the network while recording
+<!-- https://developer.chrome.com/docs/devtools/performance/reference#network-throttle -->
 
 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
+<!-- https://developer.chrome.com/docs/devtools/performance/reference#cpu-throttle -->
 
 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.
 
 

microsoft-edge/devtools-guide-chromium/evaluate-performance/reference.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
 ---
 <!-- Copyright Kayce Basques
 
@@ -145,10 +145,12 @@ The network connection of the computer that you use to build sites is probably f
 
 1. Select the **Throttling** dropdown list in the top toolbar. It is set to **No throttling** by default.
 
-1. Select **Slow 3G**:
+1. Select **Slow 3G** or **Slow 4G**:
 
    ![Select Slow 3G](./index-images/throttling-slow-3g.png)
 
+   A warning icon is displayed on the **Network** tool's tab, to remind you that throttling is enabled.
+
 1. Long-press **Reload** (![Reload](./index-images/refresh-icon.png)) (or right-click **Refresh**) and then select **Empty cache and hard refresh**:
 
    ![Empty cache and hard refresh](./index-images/empty-cache-and-hard-reset.png)

microsoft-edge/devtools-guide-chromium/network/index-images/empty-cache-and-hard-reset.png

@@ -28,18 +28,21 @@ This article is a feature-driven inventory of the **Network** tool.  Use the **N
 
 <!-- -------------- -->
 **Detailed contents:**
-<!-- omit h6 (3rd level).  compare Table of contents in https://developer.chrome.com/docs/devtools/network/reference/ -->
 
+<!-- compare https://developer.chrome.com/docs/devtools/network/reference/ -->
+<!-- updated 2025/01/31 -->
 * [Record network requests](#record-network-requests)
    * [Stop recording network requests](#stop-recording-network-requests)
    * [Clear requests](#clear-requests)
    * [Save requests across page loads](#save-requests-across-page-loads)
    * [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_.