25

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.

Improve this question
12
  • 2
    Bit tricky though, with an untyped language. Commented Mar 29, 2013 at 12:05
  • JSLint will measure the quality of your code and warn you about common mistakes, but I'm not sure it'll accomplish what your after. Commented Mar 29, 2013 at 12:07
  • 3
    To all potential answerers: Just dumping a link to a "can i use x in browser y" site is not an answer! Commented Mar 29, 2013 at 12:07
  • 1
    @ThiefMaster: while those were not good answers, easy on the instant deletions. Let the community have a word, too. With great power comes great moderation... Commented Mar 29, 2013 at 12:08
  • 2
    If there's noch such tool yet, I smell my next project. Ha! Although I'd find it hard to believe that it doesn't exist yet. Commented Mar 29, 2013 at 12:11

4 Answers 4

Reset to default
9

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.

Nice animation about eslint-plugin-compat

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
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

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.

Improve this answer

5 Comments

of course I can limit the support, but especially for non-graphical libraries that just seems like a bad choice. And as far as libraries go, if I want to publish my own code (a library), I'd have to add it as a dependency and if somehow possible I'd want to avoid that. Also they typically come with much more than I need and even if they support customized builds, I'd still have to figure out what exactly it is that I need.
Of course it is possible to avoid dependencies to libraries. You will then have to do their work again / copy code, which imho is worse than a dependency to a well maintained library. But even if you do that I am pretty sure that your library will not support Mosaic browser or some special cases.
But like I said, then I'd still have to figure out which functions exactly I need to cover. And yes, I'm not exactly happy to polyfill myself as it is "dirt" to my own library. But if it's only Array.prototype.indexOf, I'd rather add it myself than require a whole third-party library. Even just for informational purposes a tool of the kind I'm looking for would be interesting to me.
Yes indeed, but as I said there is no such tool. Go ahead, write your library, and test it in as many browsers as you can find.
After a long time and randomly running into this question again, I now feel using a library would be the best way to go. So I'll accept this answer, even if really late :)
1

Update:

New link available for Javascript Compatibility Checker: https://seedmanc.github.io/jscc/

The checker is not available anymore.

Searching for the same question (after this couple of years), I bumped on the Javascript Compatibility Checker.

It gave me a hint on how compatible my script seems to be with the major browsers.

Improve this answer

5 Comments

Thanks! Unfortunately a quick test using arrow notation and the like reports as "no problems found", which I find unlikely.
@IngoBürk Indeed, it has the sense of a fresh start but it may evolve consequently.
@raratiru Link broken.
@crantok Thank you, the service is gone, I updated my answer.
@IngoBürk Finally, the verdict is that the service was too clumsy to evolve.
0

You can paste your code into https://jshint.com/ and it will tell you about any "newish" language features to be careful about. However it does not indicate which browsers are missing which features.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.