Find and fix problems using the Issues tool

In Microsoft Edge DevTools, the Issues tool automatically analyzes the current webpage, reports issues grouped by type, and provides documentation to help explain and resolve the issues.

The Issues tool provides feedback in the following categories:

  • Accessibility.
  • Compatibility across browsers.
  • Performance.
  • Progressive Web Apps.
  • Security.
  • Other.

Feedback in the Issues tool is provided by several sources, including the Chromium platform, Deque axe, MDN browser compatibility data, and webhint. For information about these sources of feedback that populate the Issues tool, navigate to:

Opening the Issues tool

  1. Navigate to a webpage that contains issues to fix. For example, open the accessibility-testing demo page in a new tab or window.

  2. Open DevTools. After a few seconds, the Issues counter (Issues counter) appears in the upper right corner of DevTools.

  3. Refresh the page, because some issues are reported based on network requests. Notice the updated count in the Issues counter.

  4. Select the Issues counter. The Issues tool opens with issues grouped into different categories.

    Categories of issues in the Issues tool on the demo page

Other ways to open the Issues tool

There are several additional ways to open the Issues tool:

  • Select the More Tools (+) menu in the main panel or the Drawer, and then select Issues.
  • Select Customize and control DevTools > More tools > Issues.
  • In the DOM tree in the Elements tool, select 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

Within each category of issues, first the errors are listed, then warnings, and then tips.

The Issues tool displays Performance issues sorted by severity

Include third-party issues

To include issues that are caused by third-party sites, at the top of the Issues tool, select the Include third-party issues checkbox.

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.

  1. Open the demo page in a new window or tab, and then open DevTools.

  2. Open the Issues tool by selecting the Issues counter (Issues counter).

  3. Select an issue to expand the issue.

    The Issues tool displaying additional information on how to fix the issue

Each displayed issue has the following components:

  • A headline describing the issue.
  • A description providing more context and proposed solutions.
  • An AFFECTED RESOURCES section that links to resources in DevTools, such as the Elements, Sources, or Network tool.
  • Links to further documentation.

View issues in context of an associated tool

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, perform the following steps.

  1. As described in the previous section, open the demo page and then expand an issue in the Issues tool.

  2. In AFFECTED RESOURCES > Open in, select the tool name. The affected resource is displayed in the selected tool.

    Select a tool to open an affected resource from within the Issues tool

    An expanded issue may have a Network link, to display the affected resource in the Network tool.

    The Network tool opens when you select a Network resource link

Open issues from the DOM tree

If an element has an associated issue, the DOM tree in the Elements tool shows a wavy underline under the element name. You can open the context menu (right-click) on the element and then select View issues, or select Shift and left-click the element with the wavy underline.

To display an issue for elements with wavy underlines in the DOM tree, perform the following steps.

  1. Open a page, such as the demo page, in a new tab or window.

  2. Open DevTools and then select the Elements tab.

  3. In the DOM tree, expand <body> > <header> > <form>. Notice that the <input> element has a wavy underline.

    Wavy-underlined issues in the DOM tree in the Elements tool

  4. Hover over the <input> element. A tooltip displays information about the issue.

  5. 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.

    Details about issues on a wavy-underlined element in the DOM tree

See also

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Sam Dutton (Developer Advocate). Creative Commons License This work is licensed under a Creative Commons Attribution 4.0 International License.