Debugging minified/obfuscated javascript on production

What is minified or packed JS

 Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced. Two popular tools for minifying JavaScript code are JSMin and YUI Compressor.

 YUI compressor to minify a js

 java -jar yuicompressor*.jar inputFile.js -o inputFile-min.js

 Obfuscation

 Obfuscation is an alternative optimization that can be applied to source code. Like minification, it removes comments and white space, but it also munges the code. As part of munging, function and variable names are converted into smaller strings making the code more compact as well as harder to read.

 Debugging minified js

 Following the best practices, the javascript files in production are minified/obfuscated. This speeds up the website performance by reducing the load time. However, it is a pain for developers to debug when facing issues on js errors. Since the js is minified, the browser's debug plugins will not help here.

 There are ways to debug the minified js. This involves following tools.

 1.Firefox
 2.Firebug plugin for firefox
 3.Fiddler
 4.Phoenix Editor Add on for Firefox

Fiddler
Fiddler is a web debugger tool, it allows to inspect all http/https calls, in addition using auto responder, can replace server resources with any proxy resource.
Phoenix Editor
Phoenix is an editor with real time syntax highlighting which allows edit, run and test CSS, HTML, JS
Step by step instructions to debug the minified js

1. Install the following
• Install Fiddler from http://www.fiddler2.com/fiddler2/
• Install Firebug http://getfirebug.com/
• Install Firefox Phoenix Editor https://addons.mozilla.org/en-us/firefox/addon/phoenix/
2. Open the web page to debug in firefox
3. Click 'Phoenix Editor' in firefox status bar and click on the javascript file you intend to debug
4. In Phoenix editor that opens up, click 'Format code' that deobfuscates the minified javascript file and save it locally.
5. In firefox status bar click the fiddler icon, and select "use fiddler automatically"
6. Launch Fiddler form installed location
7. Go to Autoresponder tab in the right pane of the fiddler, then check
      
   Enable automatic responses
   • Permit passthrough for unmatched requests
8. Click 'Add' to add a rule, this rule lets fiddler to replace the production js sent by server with the local js you saved using phoenix.
9. Save the rule
10. Clear the firefox cache, and reload the page, start firebug, you will see the formatted js locally saved using phoenix. Start debugging!

Note: Enable fiddler on https traffic.
To enable fiddler on https traffic,
Tools -> Fiddler Options -> HTTPS and check 'Decrypt HTTPS traffic' checkbox. Add the certificate generated by fiddler.