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.
Javascript minify source map 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.