Announcing the webhint browser extension

Rachel Simone Weil
Jul 22, 2019 · 3 min read

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.

Installing the webhint browser extension.

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 running against webhint.io.

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.

Choosing settings for a webhint site scan.

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.

webhint

News about https://webhint.io

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store