Learning jQuery

With jQuery 1.9 release, Source Map support was introduced with jQuery as well. It's a pretty useful and handy feature in terms of debugging on production servers. I have already posted about All you need to know about jQuery Source Maps. When jQuery 1.9 released, then the source map feature was supported by Chrome only. And finally the latest version of Firefox 23.0.1, also supports this feature.

If you are still using deprecated/old features and want to switch to jQuery 1.9, Read How to migrate older jQuery code to jQuery 1.9+

How to enable it?

To enable it, right click in Firefox browser window and select Inspect Element(Q) or Go to Tools Menu -> Web Developer -> Select Debugger.

Once you click Inspect Element(Q), you will find a window appear in Firefox, which has all the controls and features to inspect your page. It is similar to Firebug but Firebug is an addon where this is inbuilt. Now in the window, there is a button named "Debugger", click on it.

When debugger is clicked, you can see a list of js files referred in your code and also the code of your file. As you can see from the below image, the code is referring to jquery.min.js from CDN, and same file name appears on the right side. (See Highlighted part)

Now, to enable Source Maps, click on Setting (Gear like Icon) icon, as shown in the image. A Menu will appear and from this menu, click on "Show original sources".

Once you click on "Show original sources", the debugger will reload the code and this time you will find the jquery.js appears in right side window, instead of jquery.min.js. Where the code is still referring to minified version of the library.

So now, when you debug your code and click Step in, the debugger tool will take you to jquery.js.

Source Map is indeed a very useful feature as it allows to debug minified version against an un-minified version. And it can help you to investigate production issues.

Feel free to contact me for any help related to jQuery, I will gladly help you.CodeProject