Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

A guest post by Joe Lennon, a technology leader from Ireland who works for Core International, one of Ireland’s leading enterprise software companies, where he leads the technology and engineering teams.

If you build Web applications with a large amount of client-side JavaScript code, you are probably familiar with the process of combining, minifying and optimizing your source code for production. These techniques can radically speed up your application by cutting down on the size of your JavaScript files, and minimizing the number of HTTP requests your app makes. The primary drawback of this optimization is that it makes debugging your JavaScript code a nightmare, since the browser’s developer tools will show you code that is virtually unreadable and does not point to the original location in your uncompressed source files. Source Maps are designed to make this problem a thing of the past.

At the time of writing this post, Source Maps were available in the developer tools of the latest versions of Google Chrome, Mozilla Firefox and Apple Safari browsers.

What are Source Maps?

Source Maps are essentially a way of mapping the lines and columns of your compressed, production source code, back to their original locations in the corresponding uncompressed source files. Modern browsers that support Source Maps can then continue to load the page as normal using the production file, but when you launch developer tools it will also download the Source Map and uncompressed source. When an error occurs, it will then show the line numbers and code from the uncompressed, development source – making debugging as easy as pie.

Source Maps in action

The best way to learn how Source Maps work is to see them in action. Let’s debug some broken jQuery code to see the difference Source Maps make. First, let’s see what debugging looks like without Source Maps. In the figure below, I’ve loaded the compressed, production jQuery release, but the Source Map and the uncompressed, development code is not available.


The error in this example points to a problem on line 6 of jquery-2.0.3.min.js. When you click on the link to drill into the source, you are taken to the unreadable minified code, which makes debugging pretty difficult:


Let’s see what happens when we provide a Source Map and the original source code to the browser. To do this, I downloaded the uncompressed, development version of jQuery and the map file from The browser will continue to load and use the production version to render the page, but when you use developer tools to debug the app, it will also load the development version and use the Source Map to translate the location of the error in the production file to its corresponding location in the development file.


As you can see, the error now points to a problem on line 7,845 of jquery-2.0.3.js. Drilling into the source, you can see the original source line where the problem occurred, as shown here:


With Source Maps, you can see exactly where in the original source code the error occurred, and this makes debugging and solving the problem much more straightforward.

Note: If you load jQuery from their Content Delivery Network (CDN), the Source Maps will be made available by default. If you load jQuery locally, you will need to make sure that you download the Source Map and both the production and development versions of jQuery in order to get the benefits of Source Maps.

Next steps

In a future post, I will explore Source Maps in more detail and show you how to create Source Maps for your own JavaScript (and even CoffeeScript) source code. In another future post, I’ll delve into CSS source maps, which provide similar functionality for mapping production CSS code back to its original CSS, Sass or LESS source code.

See below for Source Map and jQuery resources from Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Smashing CoffeeScript is a full-color, practical book that explains CoffeeScript language, syntax, and processes, and Source Maps, and will soon have you producing concise and quality code. Ultimately, you’ll create RIAs and mobile apps faster, with less hassle.
CoffeeScript Application Development gives you an in-depth look at the CoffeeScript language, all while building a working web application. Along the way, you’ll see all the great features CoffeeScript has to offer, and learn how to use them to deal with real problems like sprawling codebases, incomplete data, and asynchronous web requests.
jQuery HOTSHOT walks you step by step through 10 projects designed to familiarize you with the jQuery library and related technologies. Each project focuses on a particular subject or section of the API, but also looks at something related, like jQuery’s official templates, or an HTML5 feature like localStorage.

About the author

photo Joe Lennon is a technology leader from Ireland. He works for Core International, one of Ireland’s leading enterprise software companies, where he leads the technology and engineering teams. He has contributed over 20 articles and tutorials to IBM developerWorks, and is an author of two books, Beginning CouchDB and the forthcoming HTML5 in Action. He can be reached at @joelennon.

Tags: Chrome, client-side, compressing, debugging, Firefox, Javascript, jQuery, Production JavaScript, Safari, Source Maps,

Comments are closed.