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

…e-issues-tool

Focus Mode pngs batch 5 (Issues tool)

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

@@ -5,7 +5,7 @@ author: MSEdgeTeam
 ms.author: msedgedevrel
 ms.topic: conceptual
 ms.prod: microsoft-edge
-ms.date: 06/24/2021
+ms.date: 09/25/2023
 ---
 <!-- Copyright Sam Dutton
 
@@ -43,42 +43,64 @@ Feedback in the **Issues** tool is provided by several sources, including the Ch
 
 1. Go to a webpage that contains issues to fix.  For example, open the [accessibility-testing demo page](https://microsoftedge.github.io/Demos/devtools-a11y-testing/) in a new tab or window.
 
-1. Open DevTools.  After a few seconds, the **Issues counter** (![Issues counter](./index-images/issues-counter-icon.png)) appears in the upper right corner of DevTools.
+1. Right-click the webpage and then select **Inspect**.  DevTools opens.
 
-1. Refresh the page, because some issues are reported based on network requests.  Notice the updated count in the **Issues counter**.
+   <!--After a few seconds, the **Issues counter** (![Issues counter](./index-images/issues-counter-icon.png)) appears in the upper right corner of DevTools.
+   1. Refresh the page, because some issues are reported based on network requests.  Notice the updated count in the **Issues counter**.-->
 
-1. Select the **Issues counter**.  The **Issues** tool opens with issues grouped into different categories.
+1. In the Quick View toolbar at the bottom of DevTools, select the **Issues** tab, which is present by default.
+
+   If Quick View isn't displayed, select **Customize and control DevTools** (**...**), and then select **Toggle Quick View panel** (**Esc**).  If the **Quick View** toolbar doesn't have the **Issues** tab, in the **Quick View** toolbar, click the **More tools** (**+**) button, and then select **Issues**.
+
+   The **Issues** tool groups issues into categories, such as **Accessibility**, **Performance**, **Security**, and **Other**:
 
    ![Categories of issues in the Issues tool on the demo page](./index-images/categories.png)
 
 
-### Other ways to open the Issues tool
+<!-- ------------------------------ -->
+#### Other ways to open the Issues tool
+
+*  In the **Activity Bar** or in **Quick View**, click the **More tools** (**+**) button, and then select **Issues**.
+
+*  In the **Elements** tool, in the DOM tree, find a wavy-underlined element name, and then press and hold **Shift** and then click the element.  Or, right-click a wavy-underlined element, and then select **View issues**.  See [Open issues from the DOM tree](#open-issues-from-the-dom-tree), below.
+
+
+<!-- ------------------------------ -->
+#### Placement of Issues tool: Quick View or Activity Bar
+
+By default, such as from the Command Menu, the **Issues** tool opens in the **Quick View** panel.  You can instead open it in the Activity Bar, or move it to the Activity Bar: 
+
+*  In the **Quick View** toolbar, right-click the **Inspect** tab and then select **Move to top Activity Bar** or **Move to left Activity Bar**.
 
-There are several additional ways to open the **Issues** tool:
-*  Click the **More Tools** (**+**) menu in the main panel or the **Drawer**, and then select **Issues**.
+<!-- legacy ui
 *  Select **Customize and control DevTools** > **More tools** > **Issues**.
-*  In the DOM tree in the **Elements** tool, press **Shift** and then click a wavy-underlined element name.  Or, open the context menu on a wavy-underlined element and then select **View issues**.
+-->
 
 
-### Issues are automatically ordered by severity
+<!-- ------------------------------ -->
+#### Issues are automatically ordered by severity
 
-Within each category of issues, first the errors are listed, then warnings, and then tips.
+Within each category of issues, first the errors are listed, then warnings, and then tips:
 
 ![The Issues tool displays Performance issues sorted by severity](./index-images/ordered-by-severity.png)
 
+The **Severity** dropdown list controls whether Warnings, Errors, Tips, and Info items are listed.  See [Filter issues by severity](#filter-issues-by-severity) below.
+
 
 <!-- ====================================================================== -->
 ## Expand entries in the Issues tool
 
-The **Issues** tool presents additional documentation and recommended fixes to apply to each issue.  To expand an issue to get this additional information, select an issue, as follows.
+The **Issues** tool presents additional documentation and recommended fixes to apply to each issue.  To expand an issue to get this additional information:
 
-1. Open the [accessibility-testing demo page](https://microsoftedge.github.io/Demos/devtools-a11y-testing/) in a new window or tab, and then open DevTools.
+1. Open a webpage and the **Issues** tool, as described above.
 
-1. Open the **Issues** tool by selecting the **Issues counter** (![Issues counter](./index-images/issues-counter-icon.png)).
+   <!-- legacy ui
+   1. Open the **Issues** tool by selecting the **Issues counter** (![Issues counter](./index-images/issues-counter-icon.png)).
+   -->
 
-1. Select an issue, to expand the issue.
+1. Select an issue.  The issue expands to show details:
 
-   ![The Issues tool, displaying additional information on how to fix the issue](./index-images/initial-view-accessibility-page.png)
+   ![An issue expanded in the Issues tool, displaying additional information on how to fix the issue](./index-images/initial-view-accessibility-page.png)
 
 Each displayed issue has the following components:
 
@@ -96,18 +118,21 @@ Each displayed issue has the following components:
 
 An issue in the **Issues** tool may include one or more links that open different tools, such as the **Elements**, **Sources**, or **Network** tool. You can open one of these tools to perform additional troubleshooting steps.
 
-To open a linked tool from the **Issues** tool:
-
-1. As described in the previous section, open the demo page and then expand an issue in the **Issues** tool.
+To open a linked tool from an entry in the **Issues** tool:
 
-1. In **AFFECTED RESOURCES** > **Open in**, select the tool name.  The affected resource is displayed in the selected tool:
+1. As described above, open a webpage, open DevTools, select the **Issues** tool, and then expand an issue.
 
+   <!-- Elements link not present
+   1. In **AFFECTED RESOURCES** > **Open in**, click the tool name, such as **Elements**:
    ![Select a tool, to open an affected resource from within the Issues tool](./index-images/affected-resource-opens-elements-tool.png)
+   -->
 
-    An expanded issue may have a **Network** link, to display the affected resource in the **Network** tool:
+1. In the **AFFECTED RESOURCES** section, in an **Open in** link, click the tool name, such as **Network**:
 
    ![The Network tool opens when you select a Network resource link](./index-images/view-issue-in-network.png)
 
+   The affected resource is displayed in the indicated tool.
+
 
 <!-- ====================================================================== -->
 ## Open issues from the DOM tree
@@ -116,39 +141,43 @@ If an element has an associated issue, the DOM tree in the **Elements** tool sho
 
 To display an issue for elements with wavy underlines in the DOM tree:
 
-1. Open the [accessibility-testing demo webpage](https://microsoftedge.github.io/Demos/devtools-a11y-testing/) in a new window or tab.
+1. Open a webpage.  For example, open the [accessibility-testing demo webpage](https://microsoftedge.github.io/Demos/devtools-a11y-testing/) in a new window or tab.
 
 1. Right-click anywhere in the webpage and then select **Inspect**.  Or, press **F12**.  DevTools opens next to the webpage.
 
-1. In DevTools, select the **Elements** tab.
+1. In DevTools, select the **Elements** (![Elements tool icon](./index-images/elements-tool-icon.png)) tab.
 
-1. In the DOM tree, expand `<body>` > `<section>` > `<main>` > `<article id="cats">`.  Notice that the `<img>` element has a wavy underline.
+1. In the DOM tree, expand `<body>` > `<section>` > `<main>` > `<article id="cats">` > `<img>`.  The `<img>` element start-tag has a wavy underline:
 
    ![Wavy-underlined issues in the DOM tree in the Elements tool](./index-images/wavy-underlines-dom-tree.png)
 
-1. Hover over the `<img>` element.  A tooltip displays information about the issue.
+1. Hover over the `<img>` element start-tag.  A tooltip displays information about the issue.
 
-1. Open the context menu on the element with the wavy underline, and then select **View issues**.  The **Issues** tool opens and displays the issue that's associated with that element.
+1. Right-click the `<img>` element, and then select **View issues**.  Or, press and hold **Shift** and then click the element.  The **Issues** tool opens and displays the issues that are associated with that element:
 
    ![Details about issues on a wavy-underlined element in the DOM tree](./index-images/opened-from-dom-tree-wavy-underline.png)
 
 
 <!-- ====================================================================== -->
 ## Filter issues
 
-To reduce the number of issues displayed in the **Issues** tool, you can filter the list by severity, browser, and origin.
+To reduce the number of issues that are displayed in the **Issues** tool, you can filter the list by severity, browser, and origin.
+
 
-### Filter by severity
+<!-- ------------------------------ -->
+#### Filter issues by severity
 
-By default, only errors and warnings are displayed. To display issues with other severity levels:
+By default, only errors and warnings are displayed.  To display issues that have other severity levels:
 
-* Click **Default levels**.
-* Select any number of severity levels: **Tips**, **Info**, **Warnings**, **Errors**.
-* Select **Default** to revert back to just warnings and errors.
+* From the **Severity** dropdown list, select any number of severity levels: **Tips**, **Info**, **Warnings**, or **Errors**:
 
 ![The Issues panel with the Severity dropdown expanded, showing the different levels that can be selected](./index-images/severity-filter.png)
 
-### Filter by browser
+To revert back to showing only warnings and errors, select **Default levels**.
+
+
+<!-- ------------------------------ -->
+#### Filter issues by browser
 
 Issues that belong to the **Compatibility** category can also be filtered by browser. By default, the following browsers are tested:
 
@@ -169,9 +198,11 @@ To change the list of browsers that are tested for compatibility issues:
 
 ![The Issues panel with the Browser dropdown expanded, showing the different browsers that can be selected](./index-images/browser-filter.png)
 
-### Filter by origin
 
-By default, the **Issues** tool only lists issues that pertain to the current web page's code. To include issues that are caused by third-party libraries or frameworks loaded by the web page too, select the **Include third-party issues** checkbox.
+<!-- ------------------------------ -->
+#### Filter issues by origin
+
+By default, the **Issues** tool only lists issues that pertain to the current web page's code. To include issues that are caused by third-party libraries or frameworks loaded by the web page too, select the **Include third-party issues** checkbox:
 
 ![The Issues panel with the 'Include third-party issues' checkbox](./index-images/third-party-checkbox.png)
 

microsoft-edge/devtools-guide-chromium/whats-new/2020/08/devtools.md

@@ -225,7 +225,7 @@ Third-party issues are now hidden by default in the **Issues** tool.  Select the
 
 Chromium issues: [1096481](https://crbug.com/1096481), [1068116](https://crbug.com/1068116), [1080589](https://crbug.com/1080589)
 
-For more information, see [Filter by origin](../../../issues/index.md#filter-by-origin) in _Find and fix problems using the Issues tool_.
+For more information, see [Filter issues by origin](../../../issues/index.md#filter-issues-by-origin) in _Find and fix problems using the Issues tool_.
 
 
 <!-- ====================================================================== -->