Scan Javascript for browser compatibility

Question

Is there a tool out there to scan my Javascript code for functions that may not be present in all browsers?

My library is completely non-UI, so I don't care about how something is "displayed". What I'm looking for is something like in the Javascript MDN from Mozilla. For example, for Array.prototype.indexOf, they warn that it's a recent ECMAScript addition that is not present in all browsers (and typically provide a stub). What I'm looking for is a tool that'd list the functions in my code that would fall into this category.

Answer 1

You can use eslint-plugin-compat, a plugin for the ESlint linting utility. You can even use Browserlist to configure the browsers you want to support.

Installation is very easy. You'll have to install eslint and this plugin:

npm install --save-dev eslint-plugin-compat

or

yarn add --dev eslint eslint-plugin-compat

And add a ESlint configuration file:

// .eslintrc
{
  "extends": ["plugin:compat/recommended"]
}

Add the supported browsers to your package.json file:

// sample configuration (package.json)
{
  // ...
  "browserslist": ["last 2 Chrome versions", "IE 11"],
}

And then run the linter:

eslint yourfile.js

In my case this was the output:

92:9   error  Promise.all() is not supported in IE 11  compat/compat
94:9   error  Promise.all() is not supported in IE 11  compat/compat

Answer 2

UPDATE:

Have a look at the answer from Stephan Vierkant that shows a plugin to solve this problem.

---

There is no such tool, and there are a lot of browsers.

I think there is an alternative approach to scanning your code for compatibility to "all" browsers, although this truly would be a useful thing. Most people do the following two things to assure some degree of cross-browser compatibility.

Use a library

You can use a library like underscore.js, jQuery, Dojo, Modernizr, etc. that wrap browser incompatibilities for you. So you can for example use jQuery.inArray, which will work in all browsers that jQuery covers with a common interface for you to use.

Limit Browser support

Decide which browsers you want to support with your application, state this on your website, and then test in these browsers. Either natively if you have them, or use something like browserstack to do the testing for browsers you dont have. This answer also lists more alternatives for this.

And in the end there are best practices and personal experience to rely on when writing code.