Are there any scripts and/or online tools that can reverse the effects of minification?
I'm specifically looking to unminify a minified JavaScript file. Variable renaming is not a big issue, I want it sufficiently readable to be able to analyze the execution.
I'm specifically looking to unminify a minified JavaScript file. Variable renaming is not a big issue, I want it sufficiently readable to be able to analyze the execution.
Your question title indicates merely reversing minified code, and not necessarily understanding it. But if you are attempting to gain an understanding of it, Opera Dragonfly sounds like a tool you may find very useful...
I have always used Dragonfly for analyzing minified code. In addition to having a pretty printer, it also has incredibly handy analysis functionality.
Here is jQuery.min in all it's minified glory...
The button I circled here is the pretty printer which suddenly turns the code into something like this:
Which is a nice start, but it is still very difficult to understand without some idea of what it looks like during execution.
First you need to determine what part of a minified file's functionality you are trying to understand. Event breakpoints are incredibly handy for this because you can set them for almost any user input, or on an element's load. For example, if I wanted to see what happens in jQuery when a mouseover event occurs, I could add an event breakpoint for "mouseover". That way I can see where the entry point into the code is when I move my mouse over a specific element.
When your code hits a breakpoint, you get into a mode where you can, like in many DOM debuggers, interact with the current state of the code you are inspecting. But you are able to do it by hovering the mouse over sections of code so it's really quite easy to keep the code context in mind.
You can also inspect scope and who references what from the "State" sub-tab in the Scripts tab in the same way as you can with the source window. So you can see if a variable overrides another, or if fancy closure magic is happening somewhere, or what scope a variable actually originated from. Also if you look at a DOM element, you can mouse over that to highlight it on the page. (See last picture.)
The Dragonfly console also has this mouseover functionality... Also everything has tab completion, so you can execute any code from any state, inspect at any level of execution, reassign variables, run tests, or just navigate around with [Tab] completion to do just about anything to figure out what the code you are looking at does.
Opera's inspector will definitely aid in reversing and understanding minified or obfuscated code.
I prefer to use the pretty printer inbuilt in Google Chrome's Developer Tools.
Here is the minified Code:
On pressing the pretty print button, you get the following:
A good place to start is JSBeautifier. In general, it depends on the minify method that was used. This one formats the code and has lots of options. It can also unpack "packed" scripts (packed with Dean Edward's packer). A handy variant of this code is available as a Firefox plugin Javascript Deminifier.
I recently tried http://www.jsnice.org/ on 50+KB of a single minified JavaScript file containing lots of dynamic modification code that Cordova's runtime refused to execute (for an app targeted at Windows Phone 8.1 and Windows 10). The results were amazing as it recognises matching code fragments that are available unminified from thousands of opensource projects. I hope it helps you and others in future.
