The Issues Tool provides a list of all possible problems related to your site. These problems are basically categories in terms of accessibility, compatibility, performance, progressive web apps, and security. It also provides a possible solution to fix the problems. With the issues tool, the developers can easily get a good idea of the possible problems without time-consuming testing of the site.
Benefits of Issues Tool:
The tool provides very fast results and covers a wide range of problems. The benefits of the issue tool are:
- Fast: On opening the issues tab, all the problems are displayed at once in little to no time. An initial loading can take place, but most of the time, the issues are instantly displayed.
- Categories: All the issues are categorized into accessibility, compatibility, performance, progressive web apps, and security. This saves the developers time and makes them easier to debug.
- Navigate: The tool also provides navigation to the associate tool in the developer’s tool, where the issue can be located and better handled. On expanding an issue, we get a link mentioned as Open in <tab name>, and on clicking it, we get the issue highlighted in that particular tab.
- Ordered by severity: The various issues displayed have an order of severity. The various severity levels are tips, information, warnings, and errors. This helps developers target high-severity problems or any problems of a particular severity type that they solely want to focus on.
- Feedback: The tool also provides various external links for further reading about the problem. The tool also mentions the affected resources, which can help debug the issue.
Opening the Issues Tool:
The issues tool is present in the developer’s tools. To open the Issues tool, follow these steps:
Step 1: In the Edge browser, visit the site you want to check for issues. Now open developer tools. To do that, click anywhere on the page and click Inspect, or you can just press the shortcut keys “Ctrl+Shift+I” or “F12“. A section will appear containing various developer tools.
Step 2: Click the three vertical dots in the top right corner of the developer tools and navigate to More Tools > Issues from the menu that appears. Alternatively, you can press the shortcut key “Ctrl+Shift+P” to access the Run Command menu, type “issues,” and from the options that appear, click Show Issues.
Opening Issues Tool
Options available in Issues Tool:
The Issues Tool gives us various options to group or view the issues. Let’s go from left to right and understand the options.
Options in Issues Tool
- Include third-party issues: If checked, then the issues tool will also check your website for various libraries or third-party codes.
- Severity: Used to filter the issues based on the type, which are tips, info, warnings, and errors. If set to default, then the issues tool will only display warnings and errors.
- Browser: It is used to set the issues tool to generate compatibility issues related to a specific browser. On changing this option, you have to click “Regenerate Issues” to update the compatibility issues based on the selected browsers.
- Group by kind: If checked, it groups issues as page errors, breaking changes, and improvements.
Filter by Severity:
On starting the issue tool by default, we get only errors and warnings. We can change that in the severity drop-down list:
- Default: Use to display only errors and warnings.
- Tips, Info, Warnings, and Errors: Check and uncheck them according to your needs.
Severity Drop-Down List
Filter by Browser:
All issues in the compatibility category can be filtered on the basis of the type of browser using the Browser drop-down list:
- Top browsers: On selecting, it checks all the top most popular browsers used for both desktop and mobile.
- Desktop browsers: On selecting it, it checks all the popular desktop browsers.
- Mobile browsers: On selection, it checks all popular mobile browsers.
- Check or uncheck according to your choice: Edge, Chrome, Firefox, Safari, Safari iOS, Chrome for Android, Firefox for Android, Internet Explorer, Opera, Samsung Internet, and Android WebView.
Browser Drop-Down List
Various Categories in Issues Tool:
The Issues tool displays problems in the following categories:
- Accessibility: All problems related to accessibility, such as interaction and font style in CSS, are present in this category.
- Compatibility: Various browser compatibility issues related to interaction, positioning, etc. are present in this category.
- Performance: Speed, animations, memory, or any other performance-related issues are present in this category.
- Progressive Web Apps: Any tips or issues regarding the site’s improvement as a processive web app fall under this category.
- Security: Various URL protocols, cookies, or any other security issues are present in this category.
- Other: The rest of the issues that are not that important and do not belong to the above-mentioned categories fall under this category.
Various Categories of Issues Tool
View a Issue in Associated tool:
We can locate an issue from the issues tool to any tool present in the developers tool where the issue belongs and where the developers can learn more and use the associate tool to fix the issue in which it represents.
We can expand the issues, and after expanding an issue of any type, we get an option called Open in, followed by <tab name>. On clicking this button, we are directly sent to that particular tab and highlight the issue.
Locating the Issues
View issues from DOM tree in Elements Tab:
The Elements tab contains the whole page DOM tree view, and any issues in the tree are warned by a wavy underline. You can right-click it and select “View Issues” from the context menu that appears. This will bring you to the exact issue in the issues tool.
Opening Issues Tab using DOM elements
Conclusion:
A site can contain many problems related to accessibility, compatibility, performance, progressive web apps, and security. The issues tool is very handy for developers to get a list of all possible problems at once. It also provides external links that reference the problem, which can be used by the developers for further reading and debugging.