WebHint in Firefox DevTools: Improve Compatibility, Accessibility and more

Creating experiences that look and work great across different browsers is one of the biggest challenges on the web. It also is the most rewarding part, as it gets your app to as many users as possible. On the other hand, cross-browser compatibility is also the web’s biggest frustration. Testing legacy browsers late in the development process can break a feature that you spent hours on, even requiring rewrites to fix.

What if the tools in your primary development browser could warn you sooner? Thanks to Webhint in Firefox DevTools, we can do exactly that, and more.

The Webhint engine

Webhint provides feedback about your site’s compatibility, performance, security, and accessibility to guide improvements. A key benefit is integration across the development cycle — while you author in VS Code, test in CI/CD automation, or benchmark sites in the online scanner. Having Webhint available in DevTools adds in-page context and inspection capabilities.

Firefox playing Chromium-frisbee with Narwhal Nelli, for real!

Firefox DevTools was happy to collaborate with the Webhint team, which just released version 1.0 of their extension. With the recommendations that the DevTools panel provides, developers on any browser (there is also a Chrome extension) can spend less time looking up cross-browser compatibility tables like caniuse or MDN. The cross-browser guidance for CSS and HTML, a core part of the 1.0 release, is also one of the first projects to apply MDN’s browser-compat-data on code to detect compatibility.

The foundation to build on

The hints are not rules written in stone. In fact, the hint engine is extensible by design so developers can capture their own expertise and best practices for their projects. We also have plans to tweak the heuristics behind recommendations, especially for new ground like compatibility, based on your feedback. We are also working to integrate recommendations further into DevTools. Everything should be at your fingertips when you need it.

Wrapping up

Install Webhint for Firefox, Chrome or Edge (Chromium) and run it against your old and new projects. Find out how you could further optimize compatibility, security, accessibility, and speed. We hope it will help you to make your site work for as many users as possible.

About Harald Kirschner (digitarald)

Harald "digitarald" Kirschner is a Product Manager for Firefox's Developer Experience and Tools – striving to empower creators to code, design & maintain a web that is open and accessible to all. During his 8 years at Mozilla, he has grown his skill set amidst performance, web APIs, mobile, installable web apps, data visualization, and developer outreach projects.

More articles by Harald Kirschner (digitarald)…


5 comments

  1. Thomas

    The link “Install Webhint for Firefox” leads to a 404 and I cannot find the extension by searching for it on AMO :/

    September 30th, 2019 at 04:30

    Reply

    1. Harald Kirschner (digitarald)

      The issue on AMO got resolved, it should be back online now. Sorry for the downtime!

      October 2nd, 2019 at 08:51

      Reply

  2. jop

    Hey, this feature is incredible, and a really-needed upgrade for firefox, but, most importantly, who did that illustration? It’s so goddamned cute I’m not gonna be able to stop thinking about it all day – this is far more than I expected when I started reading an optimization blog post, thank you so much

    October 8th, 2019 at 07:56

    Reply

  3. maik

    I have added webhint _ removed it and added it again _ where is it?

    October 10th, 2019 at 11:04

    Reply

    1. Harald Kirschner (digitarald)

      Not sure what you mean. Could you file an issue in the repo with more details? https://github.com/webhintio/hint/issues/new/choose

      October 15th, 2019 at 10:55

      Reply

Post Your Comment