Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Doc the Performance tool tab's warning icon when throttled #3350

Merged
merged 10 commits into from
Feb 13, 2025
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 21 additions & 13 deletions microsoft-edge/devtools-guide-chromium/device-mode/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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)
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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**:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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**.


<!-- ------------------------------ -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.


Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 4 additions & 2 deletions microsoft-edge/devtools-guide-chromium/network/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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)
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 21 additions & 3 deletions microsoft-edge/devtools-guide-chromium/network/reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)
Expand All @@ -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)


<!-- ====================================================================== -->
Expand Down Expand Up @@ -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_.

Expand Down