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 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!
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.
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 //ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js.
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!
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.