Click here to Skip to main content
15,745,569 members
Articles / All Topics
Technical Blog
Posted 5 Sep 2013

Tagged as


1 bookmarked

How to Enable Source Maps in Firefox?

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
5 Sep 2013CPOL2 min read
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.


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

Written By
Technical Lead
India India
I am an experienced Software Developer with 11+ years of hands-on experience working with Microsoft.NET technology (ASP.NET, ASP.NET Core, C#, SQL Server, Angular).

Visit Talking Dotnet
For ASP.NET Core, read ASP.NET Core Articles

Comments and Discussions

-- There are no messages in this forum --