Tool to Unminify / Decompress JavaScript
To unminify JavaScript code instantly, use the Pretty Print feature
in Chrome DevTools
or the uglify-js
package if you're on Node.js:
- Hit
F12
to openDevTools
, navigate to the Sources tab. - Choose your minified
.js
file. - Click the
{}
button at the footer to prettify it.
Alternatively, you can use this command in your terminal:
Now, let's move into some unminification in-depth knowledge
.
Detailed Unminification Methods
Handy Online Tools
Numerous online tools like JSBeautifier.org
provide a rapid and easy-to-use solution to turn your minified code into a clean & readable structure:
- Use
JSBeautifier.org
to enter your code and hit the magic 'Beautify' button.
Inside Your Browser
Modern browsers come equipped with features for developers that include unminifying JS:
Firefox
users can use thetoSource
method to unminify JavaScript.IE9
and latter versions also support JavaScript unminification in theirF12 developer tools
.
These features are powerful allies during real-time debugging or routine in-browser development.
Command-line Magic
For those who love the terminal or deal with multiple files, unminification becomes even cooler with JSBeautifier
:
This command unminifies and replaces (-r
) the minified file with the unminified version.
Extra Tidbits to Keep in Mind
Debugging with Source Maps
Source maps allow us to match the minified nightmare to the nice unminified code:
- Developers can use source maps for advanced debugging tasks.
Handling Complex Minifications
Sometimes, minified code can be nastily optimized:
- If you encounter an IIFE (Immediately Invoked Function Expression) that's messing things up, wrap it in
{}
before going for pretty print.
Was this article helpful?