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?
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.
class syntax, for example. –
Florid --enable-javascript-harmony flag is set: /(?<!a)b/.test('ab') (and throw the next error if the flag is not set: "Uncaught SyntaxError: Invalid regular expression: /(?<!a)b/: Invalid group") –
Unclinch 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);
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.
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
sudo npm install -g --save-dev babel-cli babel-preset-es2015 and $(npm bin)/babel ES6.js --presets es2015 to make it work, rf: babeljs.io/docs/plugins/preset-es2015 –
Grape You're probably looking for one of the following links:
Using Babel in your development pipeline will automatically transpile (convert) your JavaScript to be cross-browser compatible. Or, if you're using TypeScript, you can rest easy; your code is already getting transpiled.
Don't want to setup a transpiler (such as Babel/Typescript), 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 the JavaScript Harmony flag enabled.
New JavaScript APIs are not usually covered by Babel, and will have their own Chrome flag.
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-harmonyflag 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.
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.
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.
© 2022 - 2024 — McMap. All rights reserved.