Using ECMAScript 6

Question

I'm looking for a way to run ECMAScript 6 code in my browser's console but most browsers don't support functionality that I'm looking for. For example Firefox is the only browser that supports arrow functions.

Is there a way (extension, userscript, etc.) I can run these features on Chrome?

Answer 1

Using ECMAScript Next (ES6, ES7, etc.)

To ensure new features work for all viewers, you'll want to use a transpiler. A transpiler allows you to use the newest ECMAScript features today by transforming your code into code that is compatible across all browsers. Below are some good transpilers.

• Babel (for Gulp, for Webpack, for Grunt, for other frameworks & languages)

• Traceur (for Gulp, for Webpack, for Grunt)

• If you're using TypeScript, TypeScript will transpile code for you.

---

Don't want to setup a transpiler, or do you want to play with features not yet supported by your transpiler?

You can enable experimental ECMAScript features in your browser by going to chrome://flags/#enable-javascript-harmony and enabling the JavaScript Harmony flag. For some features, you may have to use Chrome Canary with that flag enabled.

Using Arrow functions

This question specifically mentioned using arrow functions. Arrow functions are now natively supported in all browsers except IE and Opera Mini. See caniuse.

It used to be a little difficult if you wanted to play with arrow functions. The below history shows what it took at different points in time to play with this feature.

1) At first, arrow functions only worked in Chrome Canary with the chrome://flags/#enable-javascript-harmony flag enabled. It looks like this functionality was at least partially implemented by version 39.

2) Then, arrow functions where made available in Google Chrome behind the JavaScript Harmony flag.

3) And finally, in Google Chrome 45, arrow functions where enabled by default.

You can expect a similar pattern to happen with other new ECMAScript features.

Answer 2

As of 2015 Nov, Firefox and Edge have been leading the ES6 races, use them if you want to experiment functions that Chrome lacks. Edge has class/subclass and Firefox has Proxy; between them you have virtually all ES6 features.

If you must use ES6 in Chrome console, there is one simple, tried and true way:

Be patient.

Browsers are adopting ES6 - even Safari, who has been dragging its feet on most HTML5 standards. Give Google time and they will implement ES6 features one by one. For example arrow functions is now available, in production channel and without flag.

Don't expect extensions; you can't translate ES6 to ES5 line by line, so we can't just extend console with Babel.

It is true that there is an experiment js flag, but it exists for good reasons. V8 has Proxy but in old (non-standard) syntax and has security issue. Its destructuring is also incomplete: you will find that in some case it works, in come cases it doesn't.

If you just want to play ES6, simply play with Edge / Firefox. They both cover almost whole Babel, have console and debugger, and have features that Babel cannot provide.

Answer 3

Just use the use strict mode, into a closure (not needed, but it's a great approach) and Chrome will be able to execute your code as ES6...

(function(){
  'use strict';
  //your ES6 code...
})();

Here an example... http://jsbin.com/tawubotama/edit?html,js,console,output try to remove the use stric mode line, and try again, an error on the console will be logged.

Answer 4

In Chrome, most of the ES6 features are hidden behind a flag called "Experimental JavaScript features". Visit chrome://flags/#enable-javascript-harmony, enable this flag, restart Chrome and you will get many new features.

Arrow functions are not yet implemented in V8/Chrome, so this flag won't "unlock" arrow functions.

Since arrow functions are a syntax change, it is not possible to support this syntax without changing the way how JavaScript is parsed. If you love developing in ES6, then you could write ES6 code and use an ES6-to-ES5 compiler to generate JavaScript code that is compatible with all existing (modern) browsers.

For example, see https://github.com/google/traceur-compiler. As of writing, it supports all of the new syntax features of ES6. Together with the flag mentioned at the top of this answer, you will get very close to the desired result.

If you want to run ES6 syntax directly from the console, then you could try to overwrite the JavaScript evaluator of the console (such that Traceur preprocesor is run before executing the code). If you fancy doing this, have a look at this answer to learn how to modify the behavior of the developer tools.

Answer 5

Babel is a great transpiler for trying out ES6. You can run ES6 in the browser in the "Try it out" section of their website. It functions similarly to jsfiddle.

Arrows for example:

let add = (x,y) => x + y;
let result = add(1,1);
console.log(result);

displays the result 2.

Babel "transpiles", that is translate ES6 into ES5 javascript that can be run by current browser technology. You can install Babel via npm install -g babel. Once installed, you can save the arrows example above into a file. Say we call the file "ES6.js". Assuming you have node installed then at the command line pipe the output to node:

babel ES6.js | node

And you will see the output 2. You can save the translated file permanently with the command:

babel ES6.js --out-file output.js

output.js "transpiled":

"use strict";

var add = function (x, y) {
  return x + y;
};

var result = add(1, 2);

console.log(result);

Which of course can be run in any modern browser.

Example using classes

ES6 is a fast moving target. Refer to the Compatibility Table to find features supported by transpilers such as Traceur and Babel and browser support. You can even expand the chart to see the test used to verify compatibility:

To try out bleeding edge ES6 in a browser try the Firefox nightly build or Chrome release channels