Select any of the browser category sets: Top browsers, Desktop browsers, Mobile browsers.To change the list of browsers that are tested for compatibility issues: By default, the following browsers are tested: Issues that belong to the Compatibility category can also be filtered by browser. Select Default to revert back to just warnings and errors.Select any number of severity levels: Tips, Info, Warnings, Errors.To display issues with other severity levels: Filter by severityīy default, only errors and warnings are displayed. To reduce the number of issues displayed in the Issues tool, you can filter the list by severity, browser, and origin. The Issues tool opens and displays the issue that's associated with that element. Open the context menu on the element with the wavy underline, and then select View issues. A tooltip displays information about the issue. Notice that the element has a wavy underline. Right-click anywhere in the webpage and then select Inspect. Open the accessibility-testing demo webpage in a new window or tab. To display an issue for elements with wavy underlines in the DOM tree: Or, press and hold Shift and then click the element with the wavy underline. Right-click the element and then select View issues. If an element has an associated issue, the DOM tree in the Elements tool shows a wavy underline under the element name. The affected resource is displayed in the selected tool:Īn expanded issue may have a Network link, to display the affected resource in the Network tool: In AFFECTED RESOURCES > Open in, select the tool name. To open a linked tool from the Issues tool:Īs described in the previous section, open the demo page and then expand an issue in the Issues tool. You can open one of these tools to perform additional troubleshooting steps.

View issues in context of an associated toolĪn issue in the Issues tool may include one or more links that open different tools, such as the Elements, Sources, or Network tool. Open the Issues tool by selecting the Issues counter ( ).Įach displayed issue has the following components:Ī description providing more context and proposed solutions.Īn AFFECTED RESOURCES section that links to resources in DevTools, such as the Elements, Sources, or Network tool. Open the accessibility-testing demo page in a new window or tab, and then open DevTools. 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. Within each category of issues, first the errors are listed, then warnings, and then tips. Issues are automatically ordered by severity Or, open the context menu on a wavy-underlined element and then select View issues. In the DOM tree in the Elements tool, press Shift and then click a wavy-underlined element name.Select Customize and control DevTools > More tools > Issues.

Click the More Tools ( +) menu in the main panel or the Drawer, and then select Issues.

There are several additional ways to open the Issues tool: The Issues tool opens with issues grouped into different categories. Notice the updated count in the Issues counter. Refresh the page, because some issues are reported based on network requests.

After a few seconds, the Issues counter ( ) appears in the upper right corner of DevTools. For example, open the accessibility-testing demo page in a new tab or window. Go to a webpage that contains issues to fix.

For information about these sources of feedback that populate the Issues tool, see: The Issues tool provides feedback in the following categories:įeedback in the Issues tool is provided by several sources, including the Chromium platform, Deque axe, MDN browser compatibility data, and webhint. The Issues tool automatically analyzes the current webpage, reports issues grouped by type, and provides documentation to help explain and resolve the issues.

Microsoft edge login to website issue