Firefox developer edition tutorial how to#
Firefox developer edition tutorial code#
Firefox developer edition tutorial plus#

Like the comment this will tell your source map consumer where to look for the source map associated with a JavaScript file. If you don't like the idea of the weird comment you can alternatively set a special header on your compiled JavaScript file: X-SourceMap : /path/to/file.js.map This syntax change also affects sourceURL. Currently Chrome Canary, WebKit Nightly and Firefox 24+ support the new comment pragma. Previously the comment pragma was but due to some issues with that and IE conditional compilation comments the decision was made to change it to //#. This enables developer tools to map calls back to their location in original source files. Currently, the Closure compiler doesn't add the special comment at the end that is required to signify to a browsers dev tools that a source map is available: //# sourceMappingURL=/path/to/file.js.map

Firefox developer edition tutorial how to#

(I'll explain how to use it later.) Once you've combined and minified your JavaScript, alongside it will exist a sourcemap file. The only JavaScript compiler/minifier that has support, at the moment, for source map generation is the Closure compiler.

Firefox developer edition tutorial 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. See screenshot below.įirefox 23+ has source maps enabled by default in the built in dev tools. # 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. 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 above demo allows you to right click anywhere in the textarea containing the generated source. Developer tools (currently WebKit nightly builds, Google Chrome, or Firefox 23+) can parse the source map automatically and make it appear as though you're running unminified and uncombined files. When you query a certain line and column number in your generated JavaScript you can do a lookup in the source map which returns the original location.

When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files.

Firefox developer edition tutorial code#

P>Have you ever found yourself wishing you could keep your client-side code readable and more importantly debuggable even after you've combined and minified it, without impacting performance? Well now you can through the magic of source maps.īasically it's a way to map a combined/minified file back to an unbuilt state.