ECMA Script 6 is probably the most talked topics in the JavaScript world today. The feature set draft is almost frozen. Many of those features are appearing in the browsers slowly but steadily. Many blogs have already covered all those upcomming awesome features of ES6. But how to test, experiment and play with your ECMA 6 code at this point of time when most of the features are not available on browser by default? This article contains some of the good solutions for this.

Online playgrounds:

Though browsers don't have full support for ES6, but there are few tools which converts your ES6 codes to equivalent ES5 vanilla code; which runs fine in browsers. The online playgrounds below does the same and help you to test ES6.

Babel

Babel Repl is a playground for ECMA script 6; where you can write ES6 code, check the relevant code in ES5; and also the output. Babel is probably the best and easiest solution to test your ES6 code today.

Traceur

Traceur is a product by Google. It provides an online repl too to experiment with ES6. Unlike Babel, here you need to open your developers tool's JavaScript console to see the console output.

Command line solutions:

You can also test ES6 in your command prompt or terminal. Just like using the node command. Few of the solutions are given below.

babel-node

Babel also has a npm module; installing which you can easily rum ES6 codes in your command window. Below are the steps to make your terminal ready for ES6 with babel.

$ npm install --global babel

$ babel-node
// write your ES6 code here

traceur-cli

Traceur provides a command line interface too for experimenting with ES6 codes. The name of the npm module is traceur-cli. Below are the steps.

$ npm install --global traceur-cli

$ traceur-cli
traceur> //write your code here

ECMA Script 6 on browsers

Though browsers don't have full support of ES6, but they have started implementing the same. You can find which browser support what features of ES6 from here.

Run ES6 on Mozilla Firefox

Open firefox developer tools and you can test certain ES6 properties/features of ES6.

Run ES6 on Google Chrome

Chrome's experimental JavaScript features are disabled by default. To play with ES6 code in Chrome you have to enable Experimental JavaScript from chrome://flags/ Once you enable it and restart chrome, you will be able to test your ES6 code in Chrome console (only the features implemented by chrome). However, most of the features are reserved for only "scrict mode". So, you have to run your code in scrict mode only. Below is a code example to run in strict mode.

(function(){
  "use strict";

  let x = 10;

  function testX(condition){
    if(condition){
      let x = 1;
    }
    return x;
  }

  console.log("Condition true output: "+testX(true));

})();

Scratch JS

Scratch JS is a browser extension available for Chrome and Opera. This plugin internally uses Babel and Trecure (you can select any of them from the setting of that plugin) and runs your script right there in your developer tools.

Now why to use a plugin when we can directly use babel or traceur from their site itself? The answer is, generally developers read some blog and try to test their JavaScript code right there opening up the developers tools. Using Scratch JS, you can keep going with this habit of yours, even for ES6.