Merge pull request #2833 from MicrosoftDocs/user/mikehoffms/focus-mod…

…e-general-2

Focus Mode pngs batch 2 (Command Menu, Network Console, debug PWAs)

microsoft-edge/devtools-guide-chromium/command-menu/index.md

@@ -5,7 +5,7 @@ author: MSEdgeTeam
 ms.author: msedgedevrel
 ms.topic: conceptual
 ms.prod: microsoft-edge
-ms.date: 05/04/2021
+ms.date: 09/12/2023
 ---
 <!-- Copyright Kayce Basques
 
@@ -32,24 +32,36 @@ The Command Menu provides a fast way to navigate the Microsoft Edge DevTools UI
 
 To open the Command Menu:
 
-*  Click the **Customize and control DevTools** (![Customize icon](./index-images/customize-devtools-icon-light-theme.png)) menu button, and then select **Run command**:
+1. To open DevTools, right-click a webpage and then select **Inspect**.
+
+1. Click the **Customize and control DevTools** (![Customize icon](./index-images/customize-devtools-icon.png)) button, and then select **Run command**:
 
    ![The Run Command](./index-images/command-menu-options-run-command.png)
 
    Or, press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS).
 
+   The Command Menu initially opens with a `>` character prepended to its text box:
+
+   ![The command character](./index-images/command-menu-run-command.png)
+
+1. Start typing a keyword, and then select a command from the filtered list.
 
 
 <!-- ====================================================================== -->
 ## Display other available actions
 
-The Command Menu initially opens with a `>` character prepended to its text box:
+To show other kinds of Command Menu actions besides **Run Command**, delete the `>` character and then type **?**:
 
-![The command character](./index-images/command-menu-run-command.png)
+![Other available actions](./index-images/command-menu-help.png)
 
-To show other actions that are available from the Command Menu, delete the `>` character and then type **?**:
+Available actions include:
+* **Open File**
+* **Run Command**
+* **Go to Symbol**
+* **Go to Line**
+* **Run Snippet**
 
-![Other available actions](./index-images/command-menu-help.png)
+The actions other than **Run Command** require input, such as a filename or line number.
 
 
 <!-- ====================================================================== -->

microsoft-edge/devtools-guide-chromium/network-console/network-console-tool.md

@@ -5,59 +5,70 @@ author: MSEdgeTeam
 ms.author: msedgedevrel
 ms.topic: conceptual
 ms.prod: microsoft-edge
-ms.date: 02/24/2022
+ms.date: 09/12/2023
 ---
 # Compose and send web API requests using the Network Console tool
 
 Use the **Network Console** tool to send web API requests.  For example, use the **Network Console** tool when you're developing and testing web APIs.
 
 To test a URL:
 
-1. To open DevTools, right-click the webpage, and then select **Inspect**.  Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).  DevTools opens.
+1. To open DevTools, right-click a webpage, and then select **Inspect**.  Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).
 
-1. In DevTools, on the main toolbar or the Drawer toolbar at the bottom, select the **Network Console** tab.  If that tab isn't visible, click the **More tabs** (![More tabs icon](./network-console-tool-images/more-tabs-icon-light-theme.png)) button, or else the **More Tools** (![More Tools icon](./network-console-tool-images/more-tools-icon-light-theme.png)) button.
+1. On the main toolbar, click the **More tools** (![More tools icon](./network-console-tool-images/more-tools-icon.png)) button, and then select **Network Console**.
 
    The Network Console tool opens:
 
    ![The Network Console tool](./network-console-tool-images/network-console-tool.png)
 
-1. In the main pane of the Network Console tool, click **Create a request**.
+1. Click **Create a request**.
 
-1. In the **Untitled Request** text box, enter a URL to test.
+1. Click the **Hide Network Console navigator** (![The 'Hide Network Console navigator' icon](./network-console-tool-images/hide-network-console-navigator-icon.png)) button, to get more space.
 
-1. In the **GET** dropdown list, select a REST method: **GET**, **HEAD**, **POST**, **PUT**, or **PATCH**.
+1. In the **Untitled Request** text box, enter a URL to test, such as: `https://microsoftedge.github.io/Demos/devtools-a11y-testing/`
 
-1. Optionally, in the **Query** section, click the **Key** and **Value** text boxes and enter key/value pairs:
+1. In the **GET** dropdown list, select a REST method, such as **GET**, which is the default.  The REST methods include:
+   * **GET**
+   * **HEAD**
+   * **POST**
+   * **PUT**
+   * **PATCH**
+   * **DELETE**
+   * **OPTIONS**
+
+1. Optionally, in the **Query** section, enter key/value pairs in the **Key** and **Value** text boxes, such as **ID** and **123**:
 
    ![Entering key/value pairs to construct a URL in the Network Console tool](./network-console-tool-images/entering-key-value-pairs.png)
 
    The **Computed URL** is updated as you enter key/value pairs.
 
-1. Click the **Send** button.
+1. Click the **Send** button.  The bottom part of the **Network Console** tool displays the following tabs:
+   * **Preview**
+   * **Body**
+   * **Headers**
+   * **Cookies**
 
 
 <!-- ====================================================================== -->
-## Starting from the Network tool
-
-To use the **Network Console** starting from the **Network** tool:
+## Opening the Network Console tool from within the Network tool
 
-1. Go to a webpage to test.
+To get to the **Network Console** tool by starting from the **Network** tool:
 
-1. To open DevTools, right-click the webpage, and then select **Inspect**.  Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).  DevTools opens.
+1. To open DevTools, right-click a webpage, and then select **Inspect**.  Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).
 
-1. In DevTools, on the main toolbar, select the **Network** tab.  If that tab isn't visible, click the **More tabs** (![More tabs icon](./network-console-tool-images/more-tabs-icon-light-theme.png)) button, or else the **More Tools** (![More Tools icon](./network-console-tool-images/more-tools-icon-light-theme.png)) button.
+1. On the main toolbar, select the **Network** (![Network tool icon](./network-console-tool-images/network-tool-icon.png)) tab.  If that tab isn't visible, click the **More tools** (![More tools icon.](./network-console-tool-images/more-tools-icon.png)) button, and then select **Network**.
 
-1. Refresh the webpage.
-
-   The **Network** tool displays the resources that are used to construct the webpage.
+1. Refresh the webpage.  The **Network** tool displays the resources that are used to construct the webpage.
 
 1. Right-click the network request that you want to change and resend, and then select **Edit and Resend**:
 
    ![Right-clicking a resource for the webpage to select 'Edit and resend' in the Network tool](./network-console-tool-images/edit-and-resend.png)
 
-   The resource opens in the **Network Console** tool in the Drawer at the bottom of DevTools.
+   The **Network Console** tool opens in **Quick View** or the **Drawer** at the bottom of DevTools.
+
+1. Click the **Hide Network Console navigator** (![The 'Hide Network Console navigator' icon](./network-console-tool-images/hide-network-console-navigator-icon.png)) button, to get more space.
 
-1. In the **Network Console**, edit the network request information, and then click the **Send** button:
+1. Edit the network request information, and then click the **Send** button:
 
    ![Editing the network request and then clicking Send, in the Network Console tool](./network-console-tool-images/edit-then-send.png)
 
@@ -74,18 +85,27 @@ You can:
 *  Save and export Environments.
 *  Edit and export sets of environment variables.
 
-Entering a name for the new environment:
+To define and save a new environment:
+
+1. In DevTools, in the **Network Console** tool, make sure the left, navigator part of the tool is displayed.  If needed, click the **Show Network Console navigator** (![The 'Show Network Console navigator' icon](./network-console-tool-images/show-network-console-navigator-icon.png)) button.
+
+1. In the **Environments** section, click the **New** (![The New icon](./network-console-tool-images/new-icon.png)) button.
+
+1. In the text box that appears, enter a name for the new environment:
 
-![Entering a name for the new environment](./network-console-tool-images/network-console-environments-new-name.png)
+   ![Entering a name for the new environment](./network-console-tool-images/network-console-environments-new-name.png)
 
-Selecting the format for the new environment:
+1. Select the format for the new environment:
+   * **Network Console** - Supports multiple environments in one file.
+   * **Postman** - Supports one environment per file, but work with Postman.
 
-![Selecting the format for the new environment](./network-console-tool-images/network-console-environments-new-format.png)
+   ![Selecting the format for the new environment](./network-console-tool-images/network-console-environments-new-format.png)
 
 The **Network Console** tool is compatible with the [Postman v2.1](https://schema.getpostman.com/json/collection/v2.1.0/docs/index.html) and [OpenAPI v2](https://swagger.io/specification/v2) schemas.
 
 See also:
 * [Save and export using the Network Console](../whats-new/2020/10/devtools.md#save-and-export-using-the-network-console) in _What's New in DevTools (Microsoft Edge 87)_
+* [Postman.com](https://www.postman.com/) - A platform for building and testing APIs.
 
 
 <!-- ====================================================================== -->

microsoft-edge/devtools-guide-chromium/progressive-web-apps/index.md

@@ -5,7 +5,7 @@ author: MSEdgeTeam
 ms.author: msedgedevrel
 ms.topic: conceptual
 ms.prod: microsoft-edge
-ms.date: 12/13/2022
+ms.date: 09/12/2023
 ---
 <!-- Copyright Kayce Basques
 
@@ -22,21 +22,24 @@ ms.date: 12/13/2022
    limitations under the License.  -->
 # Debug Progressive Web Apps (PWAs)
 
-Use the **Application** panel to inspect, modify, and debug web app manifests, service workers, and service worker caches.
+Use the **Application** tool to inspect, modify, and debug web app manifests, service workers, and service worker caches.  The **Application** tool includes the following panes for Progressive Web App features:
 
-This article only discusses the Progressive Web App features of the **Application** panel.  For help on the other panes in the **Application** panel, see [View the resource files that make up a webpage](../resources/index.md) and [View and edit local storage](../storage/localstorage.md).
+*  Use the **Manifest** pane to inspect your web app manifest and trigger "Add to Homescreen" events.
 
-See also [Overview of Progressive Web Apps (PWAs)](../../progressive-web-apps-chromium/index.md).
+*  Use the **Service Workers** pane for service-worker-related tasks, such as:
+   * Unregistering or updating a service.
+   * Emulating push events.
+   * Going offline.
+   * Stopping a service worker.
 
-### Summary
+*  Use the **Cache Storage** pane to view your service worker cache.
 
-*  Use the **Manifest** pane to inspect your web app manifest and trigger Add to Homescreen events.
+*  Use the **Storage** pane to unregister a service worker and clear all storage and caches.
 
-*  Use the **Service Workers** pane for a whole range of service-worker-related tasks, like unregistering or updating a service, emulating push events, going offline, or stopping a service worker.
+This article discusses the Progressive Web App features of the **Application** tool.  For help on the other panes in the **Application** tool, see [View the resource files that make up a webpage](../resources/index.md) and [View and edit local storage](../storage/localstorage.md).
 
-*  View your service worker cache from the **Cache Storage** pane.
-
-*  Unregister a service worker and clear all storage and caches with a single button click from the **Storage** pane.
+See also:
+* [Overview of Progressive Web Apps (PWAs)](../../progressive-web-apps-chromium/index.md)
 
 
 <!-- ====================================================================== -->
@@ -51,18 +54,29 @@ If you want your users to be able to add your app to their mobile homescreens, y
 
 <!--TODO:  Link to sections when available. -->
 
-After you have your manifest set up, you can use the **Manifest** pane of the **Application** panel to inspect it.
+After you have your manifest set up, you can use the **App Manifest** pane of the **Application** tool to inspect your manifest:
 
 ![The Manifest Pane](./index-images/manifest-pane.png)
 
-*  To look at the manifest source, click the link below **App Manifest** label (`https://airhorner.com/manifest.json` in the previous figure).
+The **App Manifest** pane contains the following sections:
+* Manifest link
+* **Identity**
+* **Presentation**
+* **Protocol Handlers**
+* **Icons**
+* **Window Controls Overlay**
+* **Screenshot #1**
+* **Screenshot #2**
+
+*  To look at the manifest source, click the link below the **App Manifest** label (`manifest.json` in the previous figure, which opens `https://airhorner.com/manifest.json`).
 <!-- *  Click the **Add to homescreen** button to simulate an Add to Homescreen event.  Check out the next section for more information.  -->
 
-*  The **Identity** and **Presentation** sections just display fields from the manifest source in a more user-friendly display.
+*  The **Identity** and **Presentation** sections display fields from the manifest source in a more user-friendly display.
+
+*  The **Icons** section displays every icon that's been specified in the manifest.
 
-*  The **Icons** section displays every icon that you've specified.
 
-<!--### Simulate Add to Homescreen events  -->
+<!--#### Simulate Add to Homescreen events  -->
 
 <!--A web app may only be added to a homescreen when the site is visited at least twice, with at least five minutes between visits.  While developing or debugging your Add to Homescreen workflow, the criteria is potentially inconvenient.
 The **Add to homescreen** button on the **App Manifest** pane lets you simulate Add to Homescreen events whenever you want.  -->
@@ -89,7 +103,7 @@ The **Add to homescreen** button on the **App Manifest** pane lets you simulate
 <!-- ====================================================================== -->
 ## Service workers
 
-Service workers are a fundamental technology in the future web platform.  They are scripts that the browser runs in the background, separate from a web page.  The scripts allow you to access features that without the need of a web page or user interaction, like push notifications, background sync, and offline experiences.
+Service workers are a fundamental technology in the web platform.  Service workers are scripts that the browser runs in the background, separate from a web page.  These scripts enable you to access features that don't need a webpage or user interaction, such as push notifications, background sync, and offline experiences.
 
 <!--Related Guides:
 
@@ -100,7 +114,7 @@ Service workers are a fundamental technology in the future web platform.  They a
 
 <!--TODO:  Link to sections when available. -->
 
-The **Service Workers** pane in the **Application** panel is the main place in DevTools to inspect and debug service workers.
+The **Service Workers** pane in the **Application** tool is the main place in DevTools to inspect and debug service workers:
 
 ![The Service Workers pane](./index-images/service-workers-pane.png)
 
@@ -139,16 +153,13 @@ If the service worker causes any errors, a new label called **Errors** shows up.
 <!-- ====================================================================== -->
 ## Service worker caches
 
-The **Cache Storage** pane provides a read-only list of resources that have been cached using the (service worker) [Cache API](https://developer.mozilla.org/docs/Web/API/Cache).
+The **Cache Storage** pane provides a read-only list of resources that have been cached using the (service worker) [Cache API](https://developer.mozilla.org/docs/Web/API/Cache):
 
 ![The Cache Storage Pane](./index-images/cache-pane-cache-storage-resources.png)
 
-> [!NOTE]
-> The first time you open a cache and add a resource to it, DevTools may not detect the change.  Refresh the page and to display the cache.
-
-If you have two or more caches open, the caches are displayed under the **Cache Storage** dropdown list, as shown in the following screenshot.
+The first time you open a cache and add a resource to it, DevTools might not detect the change.  Refresh the page to display the cache.
 
-![The Cache Storage dropdown list](./index-images/cache-pane-cache-storage.png)
+All open caches are listed under the **Cache Storage** expander.
 
 
 <!-- ====================================================================== -->
@@ -187,7 +198,7 @@ The **Storage** pane is a very useful feature when developing progressive web ap
 
 <!--## Other Application panel guides
 
-Check out the guides below for more help on the other panes of the **Application** panel.
+Check out the guides below for more help on the other panes of the **Application** tool.
 
 Related Guides:
 

microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105.md

@@ -57,7 +57,7 @@ In the **Network Console**, edit the network request information, and then click
 ![Network Console Edit and Send](./devtools-105-images/networkconsole-edit.png)
 
 See also:
-* [Starting from the Network tool](../../../network-console/network-console-tool.md#starting-from-the-network-tool) in _Compose and send web API requests using the Network Console tool_.
+* [Opening the Network Console tool from within the Network tool](../../../network-console/network-console-tool.md#opening-the-network-console-tool-from-within-the-network-tool) in _Compose and send web API requests using the Network Console tool_.
 
 
 <!-- ====================================================================== -->