Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News Mozilla, WebKit To Support Debugging Minified JS As Well As CoffeeScript and other JS Languages

Mozilla, WebKit To Support Debugging Minified JS As Well As CoffeeScript and other JS Languages

This item in japanese

Modern Web and Javascript debuggers are powerful and well integrated into the browsers - but only if the code in the debugger is plain, hand written Javascript. Nowadays, a lot of executed and deployed Javascript is generated by software, not developers. The most common case is minified or otherwise compressed code. Setting a breakpoint in one of those files is tricky or impossible as they tend to be single lines - even if the original source was well formatted.

Another problem: Javascript is gaining popularity as compiler target for languages, mainly due to the ubiquity of Javascript VMs. CoffeeScript is just one example of a new language, the recently introduced ClojureScript is an example of an established language, compiling to Javascript. Debugging code written in these languages means using the generated Javascript code, not the input language for setting breakpoints, console.log() messages and other source related functionality.

The problem's not new; JVM languages had the problem too, which led to JSR-045 - Debugging Support for Other Languages, which is used for various languages compiling to the JVM, like JRuby.

Source Maps (SMAPs) are the solution, ie. files that map between the source language and the target representation. Google's Closure compiler can generate SMAP files for it's minified Javascript files, although currently the only tool that can read the SMAP files is the Closure Inspector, a Firebug extension.

Both the Mozilla and the WebKit projects have started work on supporting SMAPs in their debugging features.

Mozilla has an in-depth planning document for the SMAP and debugging functionality. The document also mentions yet another potential area for source mapping: CSS, which is also used as compilation target by supersets of CSS such as SASS or LESS.
The Mozilla ticket tracking the work is Bug 618650 - Map JS source coordinates to source language that was translated to JS; the planning document lists Firefox 9 as target release.

WebKit is also planning SMAP support, and the actual SMAP format might be an evolved version of the Closure Inspector format, which is considered by Mozilla as well. Bug 63940 - Web Inspector: draft implementation of compiler source mappings support in debugger tracks the development of the feature.

Rate this Article