google-chrome chrome - Using ECMAScript 6




es6 module (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

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?


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.


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.


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.




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.


Another solution that currently works in Chrome (54) is to add an event listener for the 'touchstart' event and call preventDefault() based on the length of the targetTouches or touches on the event.

This solution prevents a pinch (any two fingered gesture for that matter), but still provides flexibility with how you want to respond to the event. It's a nice solution because it doesn't require you to disable touch events altogether (as required if you want to disable pinch using the chrome flags, since chrome://flags/#enable-pinch no longer exists).

window.addEventListener('touchstart', function(e) {
  if (e.targetTouches.length === 2) {
    e.preventDefault();
  }
}, false);
Some text that you can't pinch zoom on Chrome (tested in 54)




google-chrome google-chrome-extension userscripts ecmascript-6