- This document status:
ARCHIVED - Current version: https://github.com/MicrosoftEdge/DevTools/blob/main/explainers/webhint/explainer.md
Authors:
- Rachel Simone Weil, Program Manager
- Tony Ross, Senior Software Engineer
- David Garcia Gomez, Software Engineer
- John Emau, Software Engineer
- Josephine Le, Designer
The 2019 MDN Web Developer Needs Assessment report illuminates a number of pain points that web developers face in their work. The report outlines challenges in implementing and testing cross-browser compatibility, security, performance, and accessibility. Web developers also note the difficulty of keeping up with documentation and the latest best practices.
There are numerous tools that audit websites for problems in compatibility, security, etc. However, keeping up with these solutions, learning how to use and configure them, and integrating them into a web development workflow can require a great deal of time and effort. Additionally, these tools provide audits or reports that are generally run after a site is built—in a CI/CD pipeline, for example—when changes are more challenging or costly to make.
To address these pain points, the Edge DevTools now offer proactive feedback on accessibility, cross-browser compatibility, performance, security, PWAs, and more that can be used in real-time during development and debugging. We achieve this through the inclusion of webhint, a fully open-source best practices engine that uses industry-leading APIs from MDN, Deque University, and more.
Our goal in including webhint in DevTools is to help developers rapidly address known pain points around accessibility, cross-browser testing, etc. during development, rather than after. webhint is both open-source and highly customizable, meaning it reflects the best practices of web developers rather than browser vendors. Specifically, the recommendations that appear in the Issues tool in DevTools are:
- specific, down to the line of code or HTTP request in question,
- trustworthy, linking to relevant documentation when more context is needed,
- just in time, conveniently updated in real-time like a code linter,
- customizable, catering the feedback you see to your project's needs, and
- actionable, with concrete recommendations on how to fix the issue.
Issues can be opened in DevTools by selecting the blue dialog box in the top-right corner of DevTools. Alternatively, it can be opened by opening the ... menu and choosing More tools > Issues.
Feedback is sorted into categories based on the type of feedback. Click a category to expanded or collapse it. Each recommendation includes documentation, affected code snippet (where applicable), a severity label (e.g., Warning, Error, Info), and links to other relevant information in the Elements, Network, or Sources tools.
With the Show issues in Elements experiment selected, wavy underlines will appear in the Elements pane to indicate code for which there is a warning or recommendation. These underlines match those you might see in web IDEs such as VS Code.
To see the issue details, Shift + click on the underlined item. Or, use the context menu and select View issues.
Additional features we are considering for upcoming releases include
- more sort and filter capabilities, and
- localization of feedback to match the language of your DevTools
The team welcomes your feedback on this feature; please file an issue to share your thoughts.
| Edge release | Changelog |
|---|---|
| 85 | Initial integration of webhint feedback into Issues as an experimental feature. |
| 88 | Added code snippets, documentation links, and links to other tools in DevTools. |
| 91 | Added severity icons and underlines in Elements. |