diff --git a/microsoft-edge/devtools-guide-chromium/issues/index-images/browser-filter.png b/microsoft-edge/devtools-guide-chromium/issues/index-images/browser-filter.png index 9646bb0d6c..7915b2258c 100644 Binary files a/microsoft-edge/devtools-guide-chromium/issues/index-images/browser-filter.png and b/microsoft-edge/devtools-guide-chromium/issues/index-images/browser-filter.png differ diff --git a/microsoft-edge/devtools-guide-chromium/issues/index-images/categories.png b/microsoft-edge/devtools-guide-chromium/issues/index-images/categories.png index ac44068f4c..5efeb3f36f 100644 Binary files a/microsoft-edge/devtools-guide-chromium/issues/index-images/categories.png and b/microsoft-edge/devtools-guide-chromium/issues/index-images/categories.png differ diff --git a/microsoft-edge/devtools-guide-chromium/issues/index-images/elements-tool-icon.png b/microsoft-edge/devtools-guide-chromium/issues/index-images/elements-tool-icon.png new file mode 100644 index 0000000000..f7d8dc581d Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/issues/index-images/elements-tool-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/issues/index-images/initial-view-accessibility-page.png b/microsoft-edge/devtools-guide-chromium/issues/index-images/initial-view-accessibility-page.png index 8f79de8cea..63ef2abc45 100644 Binary files a/microsoft-edge/devtools-guide-chromium/issues/index-images/initial-view-accessibility-page.png and b/microsoft-edge/devtools-guide-chromium/issues/index-images/initial-view-accessibility-page.png differ diff --git a/microsoft-edge/devtools-guide-chromium/issues/index-images/opened-from-dom-tree-wavy-underline.png b/microsoft-edge/devtools-guide-chromium/issues/index-images/opened-from-dom-tree-wavy-underline.png index 8adc6978b5..bb600a62c8 100644 Binary files a/microsoft-edge/devtools-guide-chromium/issues/index-images/opened-from-dom-tree-wavy-underline.png and b/microsoft-edge/devtools-guide-chromium/issues/index-images/opened-from-dom-tree-wavy-underline.png differ diff --git a/microsoft-edge/devtools-guide-chromium/issues/index-images/ordered-by-severity.png b/microsoft-edge/devtools-guide-chromium/issues/index-images/ordered-by-severity.png index cc61d4c519..10635e1218 100644 Binary files a/microsoft-edge/devtools-guide-chromium/issues/index-images/ordered-by-severity.png and b/microsoft-edge/devtools-guide-chromium/issues/index-images/ordered-by-severity.png differ diff --git a/microsoft-edge/devtools-guide-chromium/issues/index-images/severity-filter.png b/microsoft-edge/devtools-guide-chromium/issues/index-images/severity-filter.png index 0435cd8a4d..972bb22b00 100644 Binary files a/microsoft-edge/devtools-guide-chromium/issues/index-images/severity-filter.png and b/microsoft-edge/devtools-guide-chromium/issues/index-images/severity-filter.png differ diff --git a/microsoft-edge/devtools-guide-chromium/issues/index-images/third-party-checkbox.png b/microsoft-edge/devtools-guide-chromium/issues/index-images/third-party-checkbox.png index a29b643fab..5dcdd6005d 100644 Binary files a/microsoft-edge/devtools-guide-chromium/issues/index-images/third-party-checkbox.png and b/microsoft-edge/devtools-guide-chromium/issues/index-images/third-party-checkbox.png differ diff --git a/microsoft-edge/devtools-guide-chromium/issues/index-images/view-issue-in-network.png b/microsoft-edge/devtools-guide-chromium/issues/index-images/view-issue-in-network.png index 82df0c1d30..60cec7f51b 100644 Binary files a/microsoft-edge/devtools-guide-chromium/issues/index-images/view-issue-in-network.png and b/microsoft-edge/devtools-guide-chromium/issues/index-images/view-issue-in-network.png differ diff --git a/microsoft-edge/devtools-guide-chromium/issues/index-images/wavy-underlines-dom-tree.png b/microsoft-edge/devtools-guide-chromium/issues/index-images/wavy-underlines-dom-tree.png index 68950ac5b0..86c114eba6 100644 Binary files a/microsoft-edge/devtools-guide-chromium/issues/index-images/wavy-underlines-dom-tree.png and b/microsoft-edge/devtools-guide-chromium/issues/index-images/wavy-underlines-dom-tree.png differ diff --git a/microsoft-edge/devtools-guide-chromium/issues/index.md b/microsoft-edge/devtools-guide-chromium/issues/index.md index bc23602555..30b574288a 100644 --- a/microsoft-edge/devtools-guide-chromium/issues/index.md +++ b/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 --- -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**. + -### 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)). + -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. + - 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,19 +141,19 @@ 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 `` > `
` > `
` > `
`. Notice that the `` element has a wavy underline. +1. In the DOM tree, expand `` > `
` > `
` > `
` > ``. The `` 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 `` element. A tooltip displays information about the issue. +1. Hover over the `` 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 `` 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) @@ -136,19 +161,23 @@ To display an issue for elements with wavy underlines in the DOM tree: ## 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) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2020/08/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2020/08/devtools.md index 725e0ac329..3d65f0f861 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2020/08/devtools.md +++ b/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_.