Update "Network features reference" including "Filter requests"

microsoft-edge/devtools-guide-chromium/device-mode/index.md

@@ -22,11 +22,23 @@ ms.date: 01/30/2025
    See the License for the specific language governing permissions and
    limitations under the License.  -->
 # Emulate mobile devices (Device Emulation)
+<!-- https://developer.chrome.com/docs/devtools/device-mode/ -->
+
+
+<!-- ====================================================================== -->
+<!-- ## Overview -->
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#overview -->
+<!-- different content -->
 
 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.
 
+
+<!-- ====================================================================== -->
+<!-- ## Limitations -->
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#limitations -->
+
 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.
@@ -56,8 +68,15 @@ Use [Remote Debugging](../remote-debugging/index.md) to interact with the code o
 * [Set user-agent client hints](#set-user-agent-client-hints)
 
 
+<!-- ====================================================================== -->
+<!-- ## Open the device toolbar -->
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#open_the_device_toolbar -->
+<!-- omitted -->
+
+
 <!-- ====================================================================== -->
 ## Simulate a mobile viewport
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#viewport -->
 
 To open the UI that enables you to simulate a mobile viewport:
 
@@ -72,6 +91,7 @@ To open the UI that enables you to simulate a mobile viewport:
 
 <!-- ------------------------------ -->
 #### Responsive Viewport Mode
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#responsive -->
 
 To quickly test the look and feel of your page across multiple screen sizes, drag the handles to resize the viewport to your required dimensions.  You can enter any numeric values in the width and height boxes.  If you select a size larger than available in the browser window, the viewport will be automatically scaled to accommodate for the larger viewport.
 
@@ -84,6 +104,7 @@ If you need more space on your screen, you can change where DevTools is docked i
 
 <!-- ------------------------------ -->
 #### Show media queries
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#queries -->
 
 If you have defined media queries on your page, jump to the viewport dimensions where those media queries take effect by showing media query breakpoints above your viewport.  Select **More options** (![More Options icon](./index-images/more-options-icon.png)) > **Show media queries**.
 
@@ -115,6 +136,7 @@ See also:
 
 <!-- ------------------------------ -->
 #### Set device pixel ratio
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#dpr -->
 
 [Device pixel ratio (DPR)](https://developer.mozilla.org/docs/Web/API/Window/devicePixelRatio) is the ratio between physical pixels on the hardware screen and logical (CSS) pixels.  In other words, DPR tells the browser how many screen pixels to use to draw a CSS pixel.  Microsoft Edge uses the DPR value when drawing on HiDPI (High Dots Per Inch) displays.
 
@@ -135,6 +157,7 @@ To remove the device pixel ratio:
 
 <!-- ------------------------------ -->
 #### Set the device type
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#type -->
 
 To simulate a mobile device or desktop device, use the **Device Type** list:
 
@@ -162,6 +185,7 @@ Key for columns in the above table:
 
 <!-- ------------------------------ -->
 #### Mobile Device Viewport Mode
+<!-- Device-specific mode  https://developer.chrome.com/docs/devtools/device-mode/#device -->
 
 To simulate the dimensions of a specific mobile device, select the device from the **Device** list:
 
@@ -170,6 +194,7 @@ To simulate the dimensions of a specific mobile device, select the device from t
 
 <!-- ------------------------------ -->
 #### Rotate the viewport to landscape orientation
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#landscape -->
 
 Test your webpage in landscape orientation.
 
@@ -182,8 +207,31 @@ Test your webpage in landscape orientation.
 See also [Set orientation](#set-orientation), below.
 
 
+<!-- ------------------------------ -->
+#### Toggle dual-screen mode
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#dual-screen -->
+
+Some devices, for example, Surface Duo,<!-- todo: omit? --> have two screens and two ways to use them: with one or both screens active.
+
+To toggle between dual and single screen, click the **Toggle dual-screen mode** button in the toolbar.
+
+<!-- ![](todo: toggle-dual-screen.png) -->
+
+
+<!-- ------------------------------ -->
+#### Set device posture
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#posture -->
+
+Some devices, such as Asus Zenbook Fold, have a foldable screen.  Foldable screens have a posture: continuous or folded.  The continuous posture refers to a "flat" position and folded forms an angle between sections of the display.
+
+To set the device posture, select **Continuous** or **Folded** from the corresponding dropdown menu in the toolbar.
+
+<!-- ![](todo: posture.png) -->
+
+
 <!-- ------------------------------ -->
 #### Show device frame
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#frame -->
 
 To simulate the dimensions of a specific mobile device, click **More options** (![The More Options button.](./index-images/more-options-icon.png)), and then select **Show device frame** to show the physical device frame around the viewport:
 
@@ -198,6 +246,7 @@ The device frame for the iPhone 6/7/8:
 
 <!-- ------------------------------ -->
 #### Add a custom mobile device
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#custom -->
 
 If the mobile device option that you need isn't included on the default list, you can add a custom device.  
 
@@ -239,6 +288,7 @@ To remove a custom device:
 
 <!-- ------------------------------ -->
 #### Show rulers
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#rulers -->
 
 If you need to measure screen dimensions, you can use rulers to measure the screen size in pixels.
 
@@ -255,6 +305,7 @@ To display rulers above and to the left of your viewport:
 
 <!-- ------------------------------ -->
 #### Zoom the viewport
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#zoom -->
 
 To test the look and feel of your page at multiple zoom levels, use the **Zoom** list to zoom in or out.
 
@@ -263,6 +314,7 @@ To test the look and feel of your page at multiple zoom levels, use the **Zoom**
 
 <!-- ------------------------------ -->
 #### Capture a screenshot
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#screenshot -->
 
 To capture a screenshot of what you currently see in the viewport, click **More options** (![The More Options icon](./index-images/more-options-icon.png)) > **Capture screenshot**:
 
@@ -273,6 +325,7 @@ To capture a screenshot of the whole page including the content that isn't curre
 
 <!-- ====================================================================== -->
 ## Throttle the network and CPU
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#throttle -->
 
 Mobile devices often have network and CPU constraints.
 
@@ -293,6 +346,7 @@ All of the throttling is based upon the normal capability of your laptop or desk
 
 <!-- ------------------------------ -->
 #### Network and Performance tabs have warning icon when throttled
+<!-- not upstream -->
 
 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:
 
@@ -301,6 +355,7 @@ When throttling is enabled in **Device Emulation**, a warning icon is displayed
 
 <!-- ------------------------------ -->
 #### Throttle the CPU only
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#cpu -->
 
 To throttle the CPU only, and not the network:
 
@@ -315,6 +370,7 @@ To throttle the CPU only, and not the network:
 
 <!-- ------------------------------ -->
 #### Throttle the network only
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#network -->
 
 To throttle the network only and not the CPU:
 
@@ -335,15 +391,16 @@ You can also set network throttling from within the **Performance** tool:
 
 <!-- ====================================================================== -->
 ## Emulate sensors
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#emulate-sensors -->
 
 Use the **Sensors** tab to override geolocation, simulate device orientation, force touch, and emulate idle state.
 
-The sections below provide a quick look on how to override geolocation and set device orientation.
-<!-- For a complete list of features, see [Emulate device sensors](). -->
+The sections below provide a quick look on how to override geolocation and set device orientation.  For a complete list of features, see [Emulate device sensors](../sensors/index.md).
 
 
 <!-- ------------------------------ -->
 #### Override geolocation
+<!-- https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/sensors/ -->
 
 Use the **Sensors** tool to override geolocation and simulate device orientation.
 
@@ -371,6 +428,7 @@ See also:
 
 <!-- ------------------------------ -->
 #### Set orientation
+<!-- https://developer.chrome.com/docs/devtools/device-mode/#orientation -->
 
 If your page depends on orientation information from a mobile device to render properly, open the orientation UI.
 
@@ -396,6 +454,7 @@ See also:
 
 <!-- ====================================================================== -->
 ## Set the user agent string
+<!-- not upstream -->
 
 If your page depends on the user agent string from a mobile device to render properly, use the **Network conditions** tool to specify a different user agent string.
 
@@ -424,6 +483,7 @@ See also:
 
 <!-- ====================================================================== -->
 ## Set user-agent client hints
+<!-- not upstream -->
 
 If your site employs [user-agent client hints](../../web-platform/user-agent-guidance.md), use the **Emulated Devices** tool to add devices and set user-agent client hints:
 

microsoft-edge/devtools-guide-chromium/javascript/overrides.md

@@ -10,6 +10,7 @@ ms.date: 09/25/2023
 ---
 # Override webpage resources with local copies (Overrides tab)
 <!-- equiv https://developer.chrome.com/docs/devtools/overrides -->
+<!-- todo: add upstream section "Override HTTP response headers"  https://developer.chrome.com/docs/devtools/overrides#override-headers -->
 
 Sometimes you need to try out some possible fixes for a webpage, but you don't have access to the source files, or changing the page requires a slow and complex build process.  You can debug and fix all kind of problems in DevTools.  But the changes don't persist; after you refresh the local file, all your work is gone.  The Overrides feature in the [Sources](../sources/index.md) tool helps you solve this problem.
 

microsoft-edge/devtools-guide-chromium/network/index.md

@@ -22,6 +22,7 @@ ms.date: 02/12/2025
    See the License for the specific language governing permissions and
    limitations under the License. -->
 # Inspect network activity
+<!-- https://developer.chrome.com/docs/devtools/network -->
 
 Use the **Network** tool to make sure the resources your webpage needs to run are downloaded as expected and that the requests to server-side APIs are sent correctly.  Inspect the properties of individual HTTP requests and responses, such as the HTTP headers, content, or size.
 
@@ -32,6 +33,7 @@ For an overview of the network-related DevTools features, see [Network features
 
 <!-- ------------------------------ -->
 #### Video: Learn to Use the Network Tool
+<!-- equiv. to top of upstream -->
 
 For a video version of this tutorial, view the following video:
 
@@ -42,6 +44,7 @@ For a video version of this tutorial, view the following video:
 
 <!-- ====================================================================== -->
 ## When to use the Network tool
+<!-- https://developer.chrome.com/docs/devtools/network#overview -->
 
 In general, use the **Network** tool when you need to make sure that resources are being downloaded correctly and requests to server-side APIs are being sent as expected.  The most common use cases for the **Network** tool are:
 
@@ -54,6 +57,7 @@ If you're looking for ways to improve page load performance, the **Network** too
 
 <!-- ====================================================================== -->
 ## Open the Network tool
+<!-- https://developer.chrome.com/docs/devtools/network#open -->
 
 To get the most out of this tutorial, open the demo and try out the features on the demo page.
 
@@ -80,6 +84,7 @@ The **Network** tool is initially empty.  DevTools only logs network activity af
 
 <!-- ====================================================================== -->
 ## Understand the Network tool user interface
+<!-- not upstream -->
 
 The Network tool is divided in three main parts:
 
@@ -92,6 +97,7 @@ The Network tool is divided in three main parts:
 
 <!-- ====================================================================== -->
 ## Log network activity
+<!-- https://developer.chrome.com/docs/devtools/network#load -->
 
 To view the network activity that a page causes:
 
@@ -128,6 +134,7 @@ To view the network activity that a page causes:
 
 <!-- ====================================================================== -->
 ## Show more information
+<!-- https://developer.chrome.com/docs/devtools/network#information -->
 
 The columns of the Network Log are configurable.  You can hide columns that you aren't using.  There are also many columns that are hidden by default which you might find useful.
 
@@ -140,14 +147,17 @@ The columns of the Network Log are configurable.  You can hide columns that you
 
 <!-- ====================================================================== -->
 ## Simulate a slower network connection
+<!-- https://developer.chrome.com/docs/devtools/network#throttle -->
 
 The network connection of the computer that you use to build sites is probably faster than the network connections of the mobile devices of your users.  By throttling the page, you get a better idea of how long a page takes to load on a mobile device.
 
-1. Select the **Throttling** dropdown list in the top toolbar. It is set to **No throttling** by default.
+1. Click the **Throttling** dropdown list in the top toolbar.  **No throttling** is selected by default.
 
-1. Select **Slow 3G** or **Slow 4G**:
+   ![The Throttling dropdown list](./index-images/enable-throttling.png)
 
-   ![Select Slow 3G](./index-images/throttling-slow-3g.png)
+1. Select **3G**:
+
+   ![Select 3G](./index-images/enable-3g.png)<!-- todo: update -->
 
    A warning icon is displayed on the **Network** tool's tab, to remind you that throttling is enabled.
 
@@ -164,6 +174,7 @@ See also [Emulate slow network connections](../network/reference.md#emulate-slow
 
 <!-- ====================================================================== -->
 ## Capture screenshots
+<!-- https://developer.chrome.com/docs/devtools/network#screenshots -->
 
 Screenshots display how a webpage looks over time while it loads.
 
@@ -188,6 +199,7 @@ Screenshots display how a webpage looks over time while it loads.
 
 <!-- ====================================================================== -->
 ## Inspect the details of the resource
+<!-- https://developer.chrome.com/docs/devtools/network#details -->
 
 Select a resource to learn more information about it.
 
@@ -220,6 +232,7 @@ Select a resource to learn more information about it.
 
 <!-- ====================================================================== -->
 ## Search network headers and responses
+<!-- https://developer.chrome.com/docs/devtools/network#search -->
 
 Use the **Search** pane when you need to search the HTTP headers and responses of all resources for a certain string or regular expression.
 
@@ -244,6 +257,7 @@ For example, suppose you want to verify that your resources are using reasonable
 
 <!-- ====================================================================== -->
 ## Filter resources
+<!-- https://developer.chrome.com/docs/devtools/network#filter -->
 
 DevTools provides numerous workflows for filtering out resources that aren't relevant to the task at hand.
 
@@ -254,6 +268,7 @@ The **Filters** toolbar should be turned on by default.  If the **Filters** tool
 
 <!-- ------------------------------ -->
 #### Filter by string, regular expression, or property
+<!-- https://developer.chrome.com/docs/devtools/network#filterbox -->
 
 The **Filter** text box supports many different types of filtering.
 
@@ -274,6 +289,7 @@ The **Filter** text box supports many different types of filtering.
 
 <!-- ------------------------------ -->
 #### Filter by resource type
+<!-- https://developer.chrome.com/docs/devtools/network#type -->
 
 To focus in on a certain type of file, such as stylesheets:
 
@@ -290,6 +306,7 @@ For other filtering workflows, see [Filter requests](reference.md#filter-request
 
 <!-- ====================================================================== -->
 ## Block requests
+<!-- https://developer.chrome.com/docs/devtools/network#block -->
 
 How does a page look and behave when some of the page resources aren't available?  Does it fail completely, or is it still somewhat functional?  Block requests to find out:
 
@@ -299,7 +316,9 @@ How does a page look and behave when some of the page resources aren't available
 
    ![Show Network Request Blocking](./index-images/command-menu-block-requests.png)
 
-1. Click **Add Pattern** (![Add Pattern](./index-images/add-icon.png)), then type `main.css`, and then click **Add**:
+   The **Network request blocking** tool opens in the **Quick View** panel at the bottom of DevTools.
+
+1. Click the **Add Pattern** (![Add Pattern icon](./index-images/add-icon.png)) button, type `main.css`, and then click the **Add** button:
 
    ![Blocking 'main.css'](./index-images/add-block-pattern.png)
 
@@ -317,6 +336,7 @@ See also:
 
 <!-- ====================================================================== -->
 ## Conclusion
+<!-- not upstream -->
 
 Congratulations, you have completed the tutorial!  You now know how to use the **Network** tool in Microsoft Edge DevTools.