Rachel Simone Weil
Jul 22 · 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 and best practices for the web

Thanks to Tony Ross

Rachel Simone Weil

Written by

ɳɵ ɓɑɖ ɱɛɱɵʀɩɛʂ 💾 Design, 6502 ASM, Node.js, glitch, vintage tech + toys. See also: @femicommuseum. Whimsical PM at @Microsoft.

webhint

webhint

News about https://webhint.io and best practices for the web

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade