[Focus Mode] New screenshots and instructions for the most important pages

.openpublishing.redirection.json

@@ -984,6 +984,11 @@
         "redirect_url": "/microsoft-edge/devtools-guide-chromium/overview",
         "redirect_document_id": false
       },
+      {
+        "source_path": "microsoft-edge/devtools-guide-chromium/experimental-features/focus-mode.md",
+        "redirect_url": "/microsoft-edge/devtools-guide-chromium/overview",
+        "redirect_document_id": false
+      },
       {
         "source_path": "microsoft-edge/devtools-guide-chromium/beginners/css.md",
         "redirect_url": "/microsoft-edge/devtools-guide-chromium/css",

microsoft-edge/devtools-guide-chromium/about-tools.md

@@ -5,25 +5,22 @@ author: MSEdgeTeam
 ms.author: msedgedevrel
 ms.topic: conceptual
 ms.prod: microsoft-edge
-ms.date: 02/02/2022
+ms.date: 07/17/2023
 ---
 # About the list of tools
 
-DevTools provides 35 tools:
-*  2 toolbar icons, for the **Inspect tool** (![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png)) and **Device Emulation** (![Device Emulation icon](./about-tools-images/device-emulation-icon-light-theme.png)).
-*  3 permanent toolbar tabs, for the **Elements**, **Console**, and **Sources** tools.
-*  30 optional toolbar tabs, for the optional tools.
+DevTools provides more than 30 tools:
 
-The default tools, including toolbar icons, toolbar tabs, and tools on the **More tabs** (![More tabs icon](./about-tools-images/more-tabs-icon-light-theme.png)) menu:
+*  Two icons on the **Activity Bar**, for the **Inspect tool** (![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png)) and **Device Emulation** (![Device Emulation icon](./about-tools-images/device-emulation-icon-light-theme.png)).
+*  Three permanent tool tabs on the **Activity Bar**, for the **Elements**, **Console**, and **Sources** tools.
+*  Optional tabs, for optional tools such as the **Welcome** and **Network** tools.
+*  More optional tools, on the **More tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) menu, such as the **3D View** and **Detached Elements** tools.
 
-![All of the default tools of DevTools, including 2 toolbar icons and 11 toolbar tabs on the toolbar or More tabs menu](./about-tools-images/all-default-tools.png)
-
-The optional tools that aren't open by default, on the **More Tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) menu:
-
-![All of the optional tools of DevTools, on the More Tools menu, with 22 optional tools](./about-tools-images/all-optional-tools.png)
+![The default tools, including two icons and eight tabs in the Activity Bar](./about-tools-images/all-default-tools.png)
 
 The following features are additional ways to access the tools:
-*  The **Drawer** is an additional toolbar and area to hold tool tabs.
+
+*  The **Quick View** panel is an additional toolbar and area to hold tools, below or to the right of the **Activity Bar** panel.
 *  The **Command Menu** is a way to directly use features of tools.
 *  The **Settings** pages can turn on additional features of tools.
 
@@ -70,71 +67,62 @@ Microsoft Edge DevTools includes the following tools.
 | **WebAuthn** tool | Use the **WebAuthn** tool to create and interact with software-based virtual authenticators. | [Emulate authenticators and debug WebAuthn](webauthn/index.md) |
 | **Welcome** tool | The **Welcome** tool opens when you first open DevTools.  It displays links to developer docs, latest features, Release Notes, and an option to contact the Microsoft Edge DevTools team. | [Welcome tool](welcome/welcome-tool.md) |
 
-<!-- when no longer experimental, move into table:
-| **CSP Violations** tool | Displays any Content Security Policy (CSP) violations that are detected on the inspected webpage. | [CSP Violations tool](csp-violations/csp-violations-tool.md) |
-https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/experimental-features/#show-csp-violations-view
--->
+
+<!-- ------------------------------ -->
+#### Experimental tools
+
+Microsoft Edge DevTools potentially includes additional tools, if you select the experiment's check box in DevTools **Settings > Experiments**.  For example:
+
+| Tool | Purpose | Article |
+| --- | --- | --- |
+| **CSP Violations** tool | Displays any Content Security Policy (CSP) violations that are detected on the inspected webpage. | [Show CSP Violations view](./experimental-features/index.md#show-csp-violations-view) in _Experimental features_.<!--[CSP Violations tool](./csp-violations/csp-violations-tool.md)--> |
 
 
 <!-- ====================================================================== -->
 ## The More Tools menus
 
-The **More Tools** (**+**) menu on the main toolbar and on the Drawer toolbar is dynamic: it omits any tab tools that are open on that toolbar.
-
-The **More tools** menu in the **Customize and control DevTools** (![Customize icon](./about-tools-images/customize-devtools-icon-light-theme.png)) menu is static: it always lists all of the optional tools.  The selected tool opens in the main toolbar if it's a Panel tool, or on the Drawer if it's a Drawer tool.  You can right-click the tool's tab to move it to the other toolbar.
+The **More tools** (**+**) menu in the **Activity Bar** and in the **Quick View** toolbar is dynamic: it omits any tab tools that are open on that toolbar.
 
 
 <!-- ====================================================================== -->
-## Panel tools vs. Drawer tools
-
-In the **Command Menu**:
+## Activity Bar tools vs. Quick View tools
 
-* _Panel tools_ are tools which open in the main toolbar by default.
+_Activity Bar tools_ are tools that open in the **Activity Bar** (upper pane) by default.  _Quick View_ tools are tools that open in the **Quick View** (lower pane) by default.  To show or hide **Quick View**, when focus is on DevTools, press **Esc**.
 
-* _Drawer tools_ are tools which open in the Drawer toolbar by default, at the bottom of DevTools.  Press **Esc** to show or hide the Drawer.
+The **Command Menu** first lists the **Activity Bar** tools (indicated by the **Panel** label), and then the **Quick View** tools:
 
-The **Command Menu** first lists the Panel tools, and then the Drawer tools:
+![The Command Menu, showing the Panel tools grouped together, and then the Quick View tools](./about-tools-images/command-menu-panel-vs-drawer-tools.png)
 
-![The Command Menu, showing the Panel tools grouped together, and then the Drawer tools](./about-tools-images/command-menu-panel-vs-drawer-tools.png)
+To move a tool to the other toolbar, right-click the tool's tab and then select **Move to bottom Quick View**, **Move to side Quick View**, **Move to top Activity Bar**, or **Move to left Activity Bar**:
 
-To move a tool to the other toolbar, right-click the tool's tab and then select **Move to bottom** or **Move to top**.
+![The right-click menu for a tool in the Quick View toolbar, including the 'Move to top Activity Bar' command](./about-tools-images/move-from-quickview-to-activitybar.png)
 
 To open the **Command Menu**, press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS).  Or, click the **Customize and control DevTools** (![Customize icon](./about-tools-images/customize-devtools-icon-light-theme.png)) button and then select **Run command**.
 
 
 <!-- ====================================================================== -->
 ## Closing tool tabs
 
-To close a tool tab that's on a toolbar:
-
-*  Click the **x** on the tab.
-
-   The **Elements**, **Console**, and **Sources** tool tabs cannot be closed.
+To close a tool tab that's on a toolbar, right-click the tab, and then select **Remove from Activity Bar** or **Remove from Quick View**:
 
+![The right-click menu for the Network tool in the Activity Bar, including the 'Remove from Activity Bar' command](./about-tools-images/remove-from-activitybar.png)
 
-To close all of the optional tabs at once:
+The **Elements**, **Console**, and **Sources** tools are permanent tabs and cannot be closed or moved from the Activity Bar to the Quick View panel.  You can drag their tabs to reorder them in the **Activity Bar**.
 
-*  Right-click an optional tab on the toolbar (a tab that has an **x** button), and then select **Close all**.
-
-   Only the **Elements**, **Console**, and **Sources** remain on the main toolbar.  (The **Drawer** toolbar is unaffected.)
-
-   If you closed all tabs on the **Drawer**, only the **Console** tab remains on the **Drawer** toolbar.  (The main toolbar is unaffected.)
+The **Console** tool is also a permanent tab on the Quick View toolbar.  In contrast, the **Issues** tool on the Quick View toolbar can be removed.
 
 
 <!-- ====================================================================== -->
 ## Restoring the default tool tabs
 
-To restore all of the default tabs on the main toolbar:
-
-1. In DevTools, select **Settings** (![Settings icon](./about-tools-images/settings-gear-icon-light-theme.png)) > **Preferences**.
+To restore all of the default tool tabs in the **Activity Bar** and **Quick View**:
 
-1. Click the **Restore defaults and refresh** button.
+1. In DevTools, select **Customize and control DevTools** (![Customize and control DevTools icon](./about-tools-images/customize-devtools-icon-light-theme.png)) > **Settings** (![Settings icon](./about-tools-images/settings-gear-icon-light-theme.png)) > **Preferences**.
 
-   The main toolbar again has all of the default tabs.  The **Drawer** then has only the **Console** tab.
+1. Click the **Restore defaults and refresh** button.  DevTools restarts, and the default tabs appear in both toolbars.
 
 
 <!-- ====================================================================== -->
 ## See also
 
-* [Overview of DevTools](overview.md) - Similar to the present article, but broader coverage, with a top-level introduction of DevTools.
-* [Simplify DevTools using Focus Mode](experimental-features/focus-mode.md), in _Experimental features_.  In **Focus Mode**, the **Activity Bar** is a compact replacement for the main toolbar, and the **Quick View** list is a replacement for the tabs on the Drawer toolbar.
+* [Overview of DevTools](overview.md) - Similar to the present article, but broader coverage, with a top-level introduction to DevTools.

microsoft-edge/devtools-guide-chromium/accessibility/navigation.md

@@ -86,9 +86,9 @@ You can move among the tools by using the keyboard navigation keys or by using t
 
 ### Navigate by keyboard
 
-*  With DevTools open, press **Ctrl**+**]** (Windows, Linux) or **Command**+**]** (macOS) to move focus to the next tool on the main toolbar.
-*  Press **Ctrl**+**[** (Windows, Linux) or **Command**+**[** (macOS) to move focus to the previous tool on the main toolbar.
-*  Press **Tab** or **Shift+Tab** repeatedly until focus moves to the tabs of the main toolbar or drawer toolbar, and then use the arrow keys to move among the tools.
+*  With DevTools open, press **Ctrl+]** (Windows, Linux) or **Command+]** (macOS) to move focus to the next tool on the main toolbar.
+*  Press **Ctrl+[** (Windows, Linux) or **Command+[** (macOS) to move focus to the previous tool on the main toolbar.
+*  Press **Tab** or **Shift+Tab** repeatedly until focus moves to the tabs of the **Activity Bar** or **Quick View** toolbar, and then use the arrow keys to move among the tools.
 
 #### Known issues
 

microsoft-edge/devtools-guide-chromium/console/console-debug-javascript.md

@@ -5,7 +5,7 @@ author: MSEdgeTeam
 ms.author: msedgedevrel
 ms.topic: conceptual
 ms.prod: microsoft-edge
-ms.date: 04/13/2021
+ms.date: 07/12/2023
 ---
 # Fix JavaScript errors that are reported in the Console
 
@@ -24,19 +24,17 @@ The first experience you have with the **Console** is likely to be errors in scr
 
 1. Right-click anywhere in the webpage and then select **Inspect**.  Or, press **F12**.  DevTools opens next to the webpage.
 
-   In the top right of DevTools, the **Open Console to view errors** button displays an error about the webpage.
+1. Click the **Console** button in the **Activity Bar**.  In DevTools, the **Console** gives you more information about the error:
 
-1. Click the **Open Console to view errors** button on the top right.  In DevTools, the **Console** gives you more information about the error:
-
-   ![DevTools gives detailed information about the error in the Console](./console-debug-javascript-images/console-debug-displays-error.png)
+   ![DevTools gives detailed information about the error in the Console](./console-debug-javascript-images/displays-error.png)
 
    Many error messages in the **Console** have a **Search for this message on the Web** button, shown as a magnifying glass.  For more information, see [Search the web for a Console error message string](index.md#search-the-web-for-a-console-error-message-string).
 
    The information in this error message suggests that the error is on line 16 of the `error.html` file.
 
 1. Click the `error.html:16` link on the right of the error message in the **Console**.  The **Sources** tool opens and highlights the line of code with the error:
 
-   ![The Sources tool highlights the line of code that caused the error](./console-debug-javascript-images/console-debug-displays-in-sources.png)
+   ![The Sources tool highlights the line of code that caused the error](./console-debug-javascript-images/displays-in-sources.png)
 
    The script tries to get the first `h2` element in the document and paint a red border around it.  But no `h2` element exists, so the script fails.
 
@@ -53,7 +51,7 @@ The **Console** also reports network errors.
 
 1. Right-click anywhere in the webpage and then select **Inspect**.  Or, press **F12**.  DevTools opens next to the webpage.
 
-   ![Console displays a Network and a JavaScript error](./console-debug-javascript-images/console-debug-network-error.png)
+   ![Console displays a Network and a JavaScript error](./console-debug-javascript-images/network-error.png)
 
    The table displays `loading`, but nothing changes on the webpage, because the data is never retrieved.  In the **Console**, the following two errors occurred:
 
@@ -63,35 +61,35 @@ The **Console** also reports network errors.
 
 1. Click the link to the webpage and line of code where the error occurs, to open the Sources tool.  That is, click the `network-error.html:40` link in the **Console**:
 
-   ![Select the link to the webpage and line of code where the error occurs, to open the Sources tool](./console-debug-javascript-images/console-debug-network-error-code-line.png)
+   ![Select the link to the webpage and line of code where the error occurs, to open the Sources tool](./console-debug-javascript-images/network-error-code-line.png)
 
    The **Sources** tool opens.  The problematic line of code is highlighted and followed by an `error` (`x`) button.
 
 1. Click the **error** (`x`) button.  The message `Failed to load resource: the server responded with a status of 404 ()` appears.
 
-   ![To find the error in JavaScript, use the Sources tool](./console-debug-javascript-images/console-debug-network-error-sources.png)
+   ![To find the error in JavaScript, use the Sources tool](./console-debug-javascript-images/network-error-sources.png)
 
    This error informs you that the requested URL isn't found.
 
 1. Open the **Network** tool, as follows: open the **Console**, and then click the URI that's associated with the error.
 
    The Console displays an HTTP status code of the error after a resource isn't loaded:
 
-   ![The Console displays an HTTP status code of the error after a resource isn't loaded](./console-debug-javascript-images/console-debug-network-error-url.png)
+   ![The Console displays an HTTP status code of the error after a resource isn't loaded](./console-debug-javascript-images/network-error-url.png)
 
    The **Network** tool displays more information about the failed request:
 
-   ![The Network tool displays more information about the failed request](./console-debug-javascript-images/console-debug-network-error-network.png)
+   ![The Network tool displays more information about the failed request](./console-debug-javascript-images/network-error-network.png)
 
 1. Inspect the headers in the **Network** tool to get more insight:
 
-   ![Inspecting the headers in the Network tool may give more insight](./console-debug-javascript-images/console-debug-network-error-network-detail.png)
+   ![Inspecting the headers in the Network tool may give more insight](./console-debug-javascript-images/network-error-network-detail.png)
 
    What was the problem?  Two slash characters (`//`) occur in the requested URI after the word `repos`.
 
 1. Open the **Sources** tool and inspect line 26.  A trailing slash character (`/`) occurs at the end of the base URI.  The **Sources** tool displays the line of code with the error:
 
-   ![The Sources tool displays the line of code with the error](./console-debug-javascript-images/console-debug-network-error-code-error.png)
+   ![The Sources tool displays the line of code with the error](./console-debug-javascript-images/network-error-code-error.png)
 
 
 ### Viewing the resulting page when there are no errors in the Console
@@ -105,7 +103,7 @@ Next, we'll look at the resulting page when there are no errors in the **Console
 
    The example without any errors loads information from GitHub and displays it:
 
-   ![The example without any errors loads information from GitHub and displays it](./console-debug-javascript-images/console-debug-network-error-fixed.png)
+   ![The example without any errors loads information from GitHub and displays it](./console-debug-javascript-images/network-error-fixed.png)
 
 
 #### Demo page: Network error reporting in Console and UI
@@ -124,7 +122,7 @@ Use defensive coding techniques to avoid the previous user experiences.  Make su
 
    The example catches and reports errors:
 
-   ![An example that catches and reports errors](./console-debug-javascript-images/console-debug-network-error-report.png)
+   ![An example that catches and reports errors](./console-debug-javascript-images/network-error-report.png)
 
    The following code in the demo catches and reports errors using the `handleErrors` method, specifically the `throw Error` line:
 
@@ -158,7 +156,7 @@ To display two created error messages in the **Console**:
 
    Error messages appear in the **Console**:
 
-   ![Error messages appear in the Console](./console-debug-javascript-images/console-debug-error-assert.png)
+   ![Error messages appear in the Console](./console-debug-javascript-images/error-assert.png)
 
    The demo page uses the following code:
 
@@ -236,7 +234,7 @@ To display the trace in the **Console**:
 
    Here's the trace that's produced, in the **Console**:
 
-   ![The trace, displayed in the Console](./console-debug-javascript-images/console-debug-trace.png)
+   ![The trace, displayed in the Console](./console-debug-javascript-images/trace.png)
 
 
 <!-- ====================================================================== -->