{"id":551,"date":"2012-12-31T14:17:51","date_gmt":"2012-12-31T21:17:51","guid":{"rendered":"http:\/\/10kdev.ivystreetinc.com\/?p=551"},"modified":"2012-12-31T14:18:17","modified_gmt":"2012-12-31T21:18:17","slug":"reroute-your-production-static-javascript-to-debug-deminified","status":"publish","type":"post","link":"http:\/\/10kdev.net\/?p=551","title":{"rendered":"Reroute Your Production Static JavaScript To Debug DeMinified"},"content":{"rendered":"

We deploy our javascript code minified and obfuscated to most of our environments. \u00a0Only at the localhost level does anyone really see the full form of the code. \u00a0Sometimes this creates difficult debug scenarios;\u00a0environments\u00a0vary from localhost, to dev, to test, to production. \u00a0Fortunately 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.<\/p>\n

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), \u00a0and Burp (which works well). \u00a0But this method is as about as simple as can be and almost every developer runs Fiddler now days.<\/p>\n

There are a couple of prerequisites:<\/p>\n

    \n
  1. You have the source code. \u00a0If not, you can still de-minify the code with a Firebug un-minify plugin but unfortunately the variables will remain obfuscated.<\/li>\n
  2. Have FireFox with Firebug installed so that you can set breakpoints, etc.<\/li>\n<\/ol>\n

    Ok here’s what you do:<\/p>\n

      \n
    1. Download and install Fiddler (from fiddler.com).<\/li>\n
    2. Start up Fiddler.<\/li>\n
    3. Hit your site in Firefox. \u00a0At this point, when you pull your javascript files across they will be minified\/obfuscated.<\/li>\n
    4. Click on the AutoResponder tab on Fiddler. \u00a0Make sure auto responses is enabled.<\/li>\n
    5. No you can debug, either:<\/li>\n
    6. 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).<\/li>\n
    7. Many files at once in a directory. \u00a0Go to your local directory and drag it directly into the Autoresponder rule window in Fiddler. \u00a0It will enter all the files!<\/li>\n<\/ol>\n

      Now you can make local changes, debug, whatever you need. \u00a0To disable the routing simply shut down Fiddler or uncheck the enable autoresponse checkbox.<\/p>\n","protected":false},"excerpt":{"rendered":"

      We deploy our javascript code minified and obfuscated to most of our environments. \u00a0Only at the localhost level does anyone really see the full form of the code. \u00a0Sometimes this creates difficult debug scenarios;\u00a0environments\u00a0vary from localhost, to dev, to test, to production. \u00a0Fortunately there is a very easy was to reroute the javascript requests on […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/10kdev.net\/index.php?rest_route=\/wp\/v2\/posts\/551"}],"collection":[{"href":"http:\/\/10kdev.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/10kdev.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/10kdev.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/10kdev.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=551"}],"version-history":[{"count":2,"href":"http:\/\/10kdev.net\/index.php?rest_route=\/wp\/v2\/posts\/551\/revisions"}],"predecessor-version":[{"id":553,"href":"http:\/\/10kdev.net\/index.php?rest_route=\/wp\/v2\/posts\/551\/revisions\/553"}],"wp:attachment":[{"href":"http:\/\/10kdev.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/10kdev.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=551"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/10kdev.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}