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.

Comments

Post a Comment

Popular posts from this blog

Log4j multiple WAR files in single EAR configuration

-
Log4j multiple WAR files in single EAR configuration Problem: When you have multiple WAR files under the same EAR with multiple log4j config files in each of the war files, the logging API will pickup the first available config file and ignores the list. i.e, only a single log4j config file applies to entire EAR. Consider the below app app.ear |__admin.war    |__WEB-INF/classes/log4.xml |__web.war    |__WEB-INF/classes/log4j.xml When you deploy this app to the server all logs of two war files admin.war and web.war will go to admin.war' log. The log4j.xml in web.war has no effect here. There are some complex solutions for this like adding a logback, specifying package level log files in log4j configuration etc. Solution The easiest way is configuring the context param in web.xml In your web.xml add the following context param will send the log4j config locations specific to the contexts and fixes this issue. web.war/WEB-INF/classes/log4j...
More posts »

Java NIO2 - Watching a directory for changes. FileWatcherService.

-
Image
File Watch Service The NIO2 WatchService API provides the ability for java code to watch for file modifications in a directory in the filesystem. A WatchService object watches the folder it is registered with and signals the changes detected through event notifications.  Steps to create a WatchService Create a WatchService object (FileSystem.newWatchService()) Register the directories to be watched with the WatchService (WatchService.register()) Watch for file change events (poll()/take() methods) Retrieve the event keys and process them Rest the key and got to step 3 to watch again. Example code Below is a simple working code. import java.io.IOException; import java.nio.file.Path; import java.nio.file.Paths; import java.nio.file.StandardWatchEventKinds; import java.nio.file.WatchEvent; import java.nio.file.WatchKey; import java.nio.file.WatchService; import java.util.List; import java.util.concurrent.TimeUnit; public class FileWatcherTest { private sta...
More posts »

Ubuntu / kubuntu - Laptop key board cursor jumping issue

-
Image
Ubuntu cursor jumping problem Issue : When you type in Ubuntu/Kubuntu you may get annoyed by cursor jumping here and there in the screen. This happens across all the applications. You might have tried adjusting key board settings, key stroke speed etc. But this is not related to your key board, but the touch pad! Cause: The cause of this issue is your touch pad. Yes, while typing parts of your hand/fingers often touch the keyboard. In windows this touch will not be deducted while typing. But for Ubuntu it is.  So when you type something and un-intentionally unknowingly touch your touch pad will take your cursor to the appropriate mouse position with respect to your touch forgetting you are typing something!!! Solution: Simple. Say your touch pad not to care the touches while I am eagerly typing something important.. How to say that? Open Synaptix Touch pad manager  Check Automatically switch of touch pad on keyboard activity Time to wait before switc...
More posts »