#IDEA JAVASCRIPT FORMATTER OFF PLUS#
The textarea in the demo also allows you to write ES6 which will be compiled on the fly and generate a source map plus the equivalent ES3 code.ĭemo: Write ES6, debug it, view source mapping in action # How does the source map work? Take a look at this demo of ES6 traits and classes being used like they're supported natively in the browser, thanks to the source map. The Traceur compiler also generates a source map. Take a look at this screencast of CoffeeScript being debugged in an experimental build of the Firefox console:Īnother example I've put together uses Google's Traceur library which allows you to write ES6 (ECMAScript 6 or Next) and compile it to ES3 compatible code. Pretty much any language that compiles to JavaScript.In the future we could easily use almost any language as though it were supported natively in the browser with source maps: Right now source mapping is only working between uncompressed/combined JavaScript to compressed/uncombined JavaScript, but the future is looking bright with talks of compiled-to-JavaScript languages such as CoffeeScript and even the possibility of adding support for CSS preprocessors like SASS or LESS. # Real worldīefore you view the following real world implementation of Source Maps make sure you've enabled the source maps feature in either Chrome Canary or WebKit nightly by clicking the settings cog in the dev tools panel and checking the "Enable source maps" option.įirefox 23+ has source maps enabled by default in the built in dev tools. Make sure your console is open so you can see the output. Select "Get original location" will query the source map by passing in the generated line and column number, and return the position in the original code. The demo allows you to right click anywhere in the textarea containing the generated source.
0 kommentar(er)
