Announcing the webhint browser extension
New to webhint? Pop over to https://webhint.io to learn more about this open-source tool and how it can help you improve your site’s accessibility, speed, security, and more.
In the ever-changing landscape that is web development, there seems to be one constant: the need to test cross-browser compatibility. Will this color gradient render the same in Safari and Chrome? Does my flexbox layout break in IE 11?
Webhint aims to make cross-browser compatibility checking less painful and — dare I say — fun with the newly-released webhint browser extension, available for developer tools for Chrome, Edge, and Firefox.
Webhint: Now in your browser’s developer tools
If you’ve been using webhint as you author web code in VS Code, you’re already aware of how hints can provide immediate developer feedback on accessibility, compatibility, and more. (If not, we have a whole blog post on that here.) But as you move to testing in the browser, you may prefer more holistic runtime feedback that lives in your browser’s developer tools rather than in the IDE. This is where the webhint browser extension comes in handy. It surfaces the same best practices and hints directly in your DevTools with a visual interface that allows you to quickly scan for issues of certain types or severity.
The webhint browser extension provides a visual interface that allows you to run and re-run site scans. It provides options to test against all browsers and all hint types, or just a select few. You can also ignore certain cross-origin resources in your scan, letting you focus on the code you care about most.
How does this compare to Chromium’s Audits tab (Lighthouse)?
The webhint extension doesn’t replace the existing audits tab you’ll find in the developer tools for Chrome and the new Chromium-based Edge browser. While there is a little overlap in the information provided, webhint and Lighthouse serve different purposes, and you may find yourself using both. One distinguishing feature of webhint that it’s meant to provide cross-browser insights, including compatibility with Safari, IE, Opera, and so on.
Getting started
To start using webhint from your browser’s DevTools, install the extension for Chrome, Edge (Chromium), or Firefox.
The extension is currently in beta, and we’re actively seeking any and all feedback. Take a look at known issues on GitHub or add your own. You’re also invited to join the conversation via twitter and Gitter.
