The Magic of the jQuery 1.9 Source Map

jQuery 1.9 Supports Source Maps

You may have noticed that the 1.9 version of jQuery was released yesterday. One of the most excited pieces of the version is support for Source Maps!

What are Source Maps?

What is a Source Map? Well, it is a generic way to translate one script format into another. In jQuery's case, it is mapping the minified version of jQuery against the un-minified version. Why would you want to do this? The value is that when you encounter a bug in your production code you can debug against code that doesn't look like a mangled mess!

You can find out much more about Source Maps from Ryan Seddon's HTML Rocks Tutorial titled Introduction to JavaScript Source Maps.

Another slightly different example of for Source Maps is for CoffeeScript. The official CoffeeScript language doesn't support Source Maps as of yet, but there is a rewrite of the project called CoffeeScript Redux that does support them. That means you can debug through CoffeeScript code in your dev tools and it will map to the underlying JavaScript code. For more information about this check out Ryan Florence's article titled CoffeeScript Source Maps.

Enabling Source Maps in Chrome

In stable release of Google Chrome there is a setting in its dev tools to "Enable source maps". You will need to check this option in order to use this feature.

Mozilla Firefox is working on providing Source Map support, but as of yet Google Chrome is the browser to use for this feature.

Add the Minified jQuery 1.9 to Your Project

The minified version of jQuery 1.9 has a special directive at the bottom that tells Google Chrome what Source Map to use when debugging. The end of the minified file looks like the following...


In order to get the Source Map to work you need to make sure the value of sourceMappingURL exists on your server or locally. If you are using the jQuery CDN then this is already setup for you.

The Google CDN is now hosting jQuery 1.9 and its map file as well. It isn't listed on their main CDN page, but you can access it directly http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js.

Debugging Your Project

Once you've completed the above steps then using Source Maps is simple. All you have to do is set a break point, like you would normally, and then debug into it.

For example, on the left I set a breakpoint on the addClass statement. Once I debug into that statement I get dropped into the unminfied version of jQuery NOT the minified version that I included!

Browsers have had a "Pretty print" feature for a while which has formatted minifed script files, but Source Maps brings that to a whole new level!

Conclusion

Source Maps are a powerful new feature of Google Chrome and I look forward to it coming to other browsers in the near future. Being able to debug through minified code could make tracking down production bugs a much easier process.