I’d like to share with you and hear your thoughts on something I’d love to see added to Firefox DevTools.
The way most of us tackle this is by doing extensive cross-browser testing at various stages of the project, but still it isn’t trivial to understand how compatible a new piece of code is with the various platforms we want to cater for unless there’s a comprehensive set of automated cross-platform regression tests in place that run continuously as new code is added. This is difficult and complex.
To help developers with that challenge, I propose a tool that constantly looks at the code of a project and generates a compatibility report, highlighting in real time what parts of the code are problematic for certain platforms and painting a picture of what the overall mininum browser requirements are.
In a nutshell, it would need to:
- Read/parse source files (CSS and JS) attached to a page;
- Match the code against a list of features on a compatibility table (e.g. caniuse.com or MDN).
This would allow us to generate information like “this site requires IE10 because it’s using Flexbox”. Taking it a step further, we could help developers solve some of the compatibility issues by linking to polyfills on MDN or polyfill.io.
There’s a lot of scope for improvement over time, such as being smart about detecting fallbacks (e.g. not flag the use of rem units as a compatibility issue if we identify a px fallback).
I have worked on a very crude proof of concept that implements this by looking at the caniuse.com API, but I think it would be interesting to make this part of DevTools because:
MDN is a gold mine of information and, from what I understand, the team is moving towards making compatibility information available programatically. I think this would be another great opportunity to link the two projects.
I think this idea plays nicely with the path DevTools is taking towards becoming the go-to browser-agnostic set of development tools, in the sense that it’d acknowledge the existence of the other browsers and help developers with the challenges of working with them.
This tool does not intend to replace any cross-browser testing, of course, which will always be the ultimate way of understanding how something works across the various environments, but I believe it would warn developers of potential issues as they arise, allowing them to test, tackle or dismiss them with more confidence.
I’d love to hear your thoughts on whether you think this would be an interesting addition to DevTools. Please let me know if something wasn’t clear and I’ll be more than happy to explain in more detail.