Reroute Your Production Static JavaScript To Debug DeMinified
We deploy our javascript code minified and obfuscated to most of our environments. Only at the localhost level does anyone really see the full form of the code. Sometimes this creates difficult debug scenarios; environments vary from localhost, to dev, to test, to production. Fortunately there is a very easy was to reroute the javascript requests on a site to the source code on your local machine using the proxy tool Fiddler.
I’ve tried a few other tools like Wireshark (which is better for complete packet monitoring on a network card), Charles (a great commercial product), and Burp (which works well). But this method is as about as simple as can be and almost every developer runs Fiddler now days.
There are a couple of prerequisites:
- You have the source code. If not, you can still de-minify the code with a Firebug un-minify plugin but unfortunately the variables will remain obfuscated.
- Have FireFox with Firebug installed so that you can set breakpoints, etc.
Ok here’s what you do:
- Download and install Fiddler (from fiddler.com).
- Start up Fiddler.
- Hit your site in Firefox. At this point, when you pull your javascript files across they will be minified/obfuscated.
- Click on the AutoResponder tab on Fiddler. Make sure auto responses is enabled.
- No you can debug, either:
- A single file by adding a rule, putting in a URL (I choose a realtive one like /resources/js/myfile.js) then adding the local file path to the rule (like c:\js\myfile.js).
- Many files at once in a directory. Go to your local directory and drag it directly into the Autoresponder rule window in Fiddler. It will enter all the files!
Now you can make local changes, debug, whatever you need. To disable the routing simply shut down Fiddler or uncheck the enable autoresponse checkbox.