In the Apps Team we develop a wide variety of SPAs. Do not think about any nice hot-springs resort, SPA stands for Single Page Applications. The main reason why SPAs have been gaining a lot of popularity these past few years is because they provide a more appealing user experience. Just take a quick look at Gmail, Official Gmail Blog, The New York Times to name a few. The content is retrieved in a single page load. This means that page sections get dynamically changed.

Since SPAs strive to provide a fluid App experience, developers must use the latest techniques to boost performance. A key element to achieving this goal is to use a JavaScript code compiler. And there are a lot of them out there: YUI Compressor, Closure Compiler, Dojo Compres, Mascara JS Compiler, JSMin, UglifyJS and much more.

In our team we use Closure Compiler. In advanced mode, no other compiler can do better in terms of dead code removal, optimizations and semantic checks. Moreover, it is supported in Eclipse and it is the only one that provides support for source maps and makes debugging less annoying.

What Do Compilers Do

JavaScript compilers do a great job. They rely on ‘magic tricks’ that:

• reduce the size of JavaScript code to such an extent that it visibly increases the user satisfaction on page loads
• perform type checking and code checking, helping the developer write JS code with fewer bugs that are also easier to maintain
• remove code that is never executed

And even more, they cut down costs by reducing the bandwidth.

But there are bugs that seem to appear only on compiled versions of the JS code. They might frustrate developers so much that they are willing to give up and leave their code uncompiled in production. Errors such as “x is undefined” leave us clueless as to where the problem is or who “x” is.

Fortunately, we can now rely on source maps to solve this mess.

Source Maps

Basically, a source map provides a way to map a compiled file to its original state. While compiling a file for production, you may also generate a source map that includes information about the original files. This way, the meaning of x is becoming more clear. You can query the line and column number in the minified source code and look up the source map to find its original location.

Developer tools (WebKit nightly builds, Google Chrome Canary) can even parse the source code automatically. For developers, it’s as if they were debugging on a developer machine with full source code access and the possibility to enter breakpoints.

Using Source Maps In Chrome

In Chrome the source map feature is disabled by default. To enable it, start the Developer Tools, go to the General Settings tab and check the Enable source maps option.

For the time being, Closure Compiler is the only compiler that supports source maps. Therefore, we will show how you can use it to compile code and generate the source map. The compiler must be used with the –create_source_map option.

At this point, you need to inform the Developer Tools about the generated source map. The Closure Compiler does not automatically embed the path to the source map in the compiled source code. You need to manually add a special comment at the end of the myapp.min.js file. Here’s an example:

Another way to enable the Developer Tools to map back to the original source is to set a special header in the compiled JS File:

Once you have set up the source map path, any reload with opened Developer Tools will show you the full list of original files.

If you debug in production, you also have to upload the original files to the production server in the location the source map expects them, so that the original code can get displayed whenever necessary.

Nevertheless, source maps are a great feature of the Chrome Developer Tools. Used properly, they enable you to trace problems and debug complex compiled code in seconds.