Click here to Skip to main content
13,149,756 members (81,137 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

22K views
1 bookmarked
Posted 5 Sep 2013

How to Enable Source Maps in Firefox?

, 5 Sep 2013
Rate this:
Please Sign up or sign in to vote.
This post shows how to enable source maps in Firefox.

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 the 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 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Talking Dotnet
Technical Lead
India India
I am an experienced Software Developer with 8+ years of hands-on experience working with Microsoft .NET technology (ASP.NET, C#, VB.NET,SQL Server).

Visit Talking Dotnet
Read Difference between Angular 1.x and Angular 2
For ASP.NET Core, read ASP.NET Core Articles
For Entity Framework Core, read Entity Framework Core Articles

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.170924.2 | Last Updated 5 Sep 2013
Article Copyright 2013 by Talking Dotnet
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid