26

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.

  • 2
    Just before anyone goes all downvoty, it's OK to ask and answer your own question. It's cool, actually, and helps the site! Good question, WPrecht :-) – Keelan Mar 20 '13 at 18:21
  • Thanks. I had assumed we were to do stuff like this in the closed beta to help seed the site. – WPrecht Mar 20 '13 at 18:31
  • @Keelan: unfortunately some people disagree. Point in case – 0xC0000022L Mar 23 '13 at 0:13
  • @0xC0000022L Er ... that's deleted. Is that your case? – SamB Jun 5 at 17:24
  • @SamB not the fact that it's deleted. No. It has been deleted within the last six years (in fact it got deleted about one month after it got closed which was approximately at the time of my comment). With enough reputation you'd still be able to see it, though. – 0xC0000022L Jun 6 at 10:45
21

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... jQuery, in all its minified glory.

The button I circled here is the pretty printer which suddenly turns the code into something like this: Beautified jQuery.min

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.

Event breakpoint and analysis.

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.)

State tab.

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. Console tab.

Opera's inspector will definitely aid in reversing and understanding minified or obfuscated code.

13

I prefer to use the pretty printer inbuilt in Google Chrome's Developer Tools.

Here is the minified Code: enter image description here

On pressing the pretty print button, you get the following: enter image description here

8

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.

5

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.

  • jsnice is the best. Minification isn't worth much when the variable names aren't refactored back, and none of the other items on this list will do that for you. – Stuart P. Bentley Jun 26 '17 at 7:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.