All you need to know about jQuery Source Maps
Related Post:
- How to migrate older jQuery code to jQuery 1.9+
- How to enable source maps in Firefox
- jQuery x.x.x.min.map not found error
What are exactly Source Maps?
In case of jQuery, Source Map is nothing but mapping of minified version of jQuery against the un-minified version. At the moment just Google Chrome is supporting this feature, but Mozilla Firefox is planning support as well. To know more about Source Map, visit this tutorial.
At the time of writing this article, Chrome version is : 24.0.1312.52 m
UPDATED ON SEPTEMBER 5, 2013: Source Map feature is now also supported by Firefox version : 23.0.1 Read "How to enable source maps in Firefox"
Why Source Maps are useful?
Well, imagine that you are using compressed versions of your files on your production site, including a compressed version of jQuery. You get a report that an important customer is running into a problem. Then how do you debug it? You could debug it a lot easier if you had the uncompressed source, but using that on your high-traffic production site isn't an option.
Consider, you are using minified version of jQuery and you are trying to debug particular line of code. (See Image)
Now when you start debugging and you are on the particular line.
And you press (F11 or Click Step into Next Function Call), the debugger tool will take you to jquery.min.js.
And looking at jquery minified version, it is impossible to find out the error.
But with source maps, you can let the browser’s debugger "map" the lines in the compressed file into the uncompressed source. For Source map to work successfully, two things are required.
1. Value of sourceMappingURL exists on your server or locally.
2. Browser Support
If you are using jQuery from any of the CDN (jQuery, Google, Microsoft) then you don't have to worry about sourceMappingURL variable value because it is already set. Below screenshot is of jQuery 1.9.0.min.js and notice that the value is already set to jquery.min.map file.
jQuery team has also confirmed that jQuery final releases will also get matching source maps from now on.
Enable Source Map in Chrome
To enable source maps in chrome, Go to Tools -> Developer Tools. Or right click on the browser area and select "Inspect Element". Once it is open, click on Setting. (See Image)
Now, in Settings -> General Tab, you will find option to "Enable Source Map". So check this option to enable it. If you don't find this option, then please update your Chrome to latest version.
Now when you execute the same line of code again and press (F11 or Click Step into Next Function Call), the debugger tool will take you to jquery.js
Important notes
When hosting your own copy of jQuery, copy the map to your server and use it from there. For simplicity we assume that the compressed and uncompressed copy of jQuery is in the same folder as the map file; this is the case for CDN versions and you should follow the same rule if you make local copies.
The map file name is the same as the compressed version, with .map replacing .js. Do not rename the files when you copy them. So, if you were to use a local copy of jquery-1.9.0.min.js the corresponding map file would be jquery-1.9.0.min.map and the uncompressed file would be jquery-1.9.0.js in the same folder.
And you must be wondering how to I create .map file or what are the content of .map file? Well, you can get all the details here. If you want to take a look at jquery.min.map file then open this URL.
Conclusion
This is indeed a very useful feature as it allows to debug minified version against a un-minified version. And it will become more effective when other browsers also start supporting it.
Feel free to contact me for any help related to jQuery, I will gladly help you.
