How to Read Minified JavaScript: Unminify, Beautify, or Deobfuscate?

You're inspecting a webpage, analyzing a third-party script, or debugging a production issue — and all the JavaScript is a dense, single-line wall of text. No spaces. No line breaks. Variable names that might be a, b, c. You can't make sense of any of it.

This is minified JavaScript, and it's everywhere on the modern web. Every major JavaScript library ships a minified version (react.min.js, jquery.min.js). Your own build tools are probably minifying your code too. The good news: minified code is one of the easiest things to make readable again. Here's exactly how.

What Is JavaScript Minification?

Minification is the process of removing everything from JavaScript source code that isn't strictly necessary for the browser to execute it. This includes:

• All whitespace — spaces, tabs, newlines
• All comments
• Unnecessary semicolons
• Sometimes: shortening variable names (called mangling)

The result is code that's functionally identical to the original but takes fewer bytes to download. For large codebases, this can mean a difference of 30–70% in file size — which translates directly to faster page loads.

Here's a simple example of code before and after minification:

Before (readable source):

// Calculate the total price including tax
function calculateTotal(price, taxRate) {
  const tax = price * taxRate;
  const total = price + tax;
  return total;
}

const finalPrice = calculateTotal(49.99, 0.08);
console.log("Final price: $" + finalPrice.toFixed(2));

After minification:

function calculateTotal(e,t){const a=e*t;return e+a}const finalPrice=calculateTotal(49.99,.08);console.log("Final price: $"+finalPrice.toFixed(2));

Notice: the logic is completely intact. The function still works exactly the same. But the comments are gone, the whitespace is stripped, and variable names price, taxRate, and tax have been shortened to e, t, and a. If you squint, you can almost read it — but it's painful.

Three Tools for Making Minified Code Readable

People often use "unminify," "beautify," and "deobfuscate" interchangeably when talking about minified code. But they're different tools and work differently. Here's what each one actually does:

1. Unminify — Reverse the Compression

An unminifieris designed specifically to reverse minification. It adds back whitespace, line breaks, and indentation. A good unminifier understands JavaScript syntax deeply enough to format code correctly even when it's been aggressively compressed.

Running the minified example above through our JavaScript Unminifier produces:

function calculateTotal(e, t) {
  const a = e * t;
  return e + a;
}

const finalPrice = calculateTotal(49.99, .08);
console.log("Final price: $" + finalPrice.toFixed(2));

Much better. You can follow the logic now. The variable names are still e, t, a— unminifiers don't restore names because that information simply isn't in the file anymore — but the structure is readable.

2. Beautify — Format the Code

A JavaScript beautifier is similar to an unminifier but typically uses a more opinionated formatter (like Prettier) to apply consistent style rules on top of the formatting pass. Where an unminifier tries to restore the original structure, a beautifier may rewrite spacing, quote style, and semicolons to match a standard style guide.

In practice, for most uses, unminify and beautify will give you very similar output. The main difference shows up in edge cases where the original code had unusual formatting or stylistic choices.

3. Deobfuscate — Restore Meaning

A deobfuscatorgoes further than either of the above. It doesn't just fix formatting — it reverses intentional obfuscation: decoding encoded strings, resolving string array lookups, renaming variables where possible, and removing dead code inserted to confuse analysis.

You need a deobfuscator when the code isn't just minified — when it's been deliberately scrambled. If variable names are_0x1a2b instead of e, if strings are hex-encoded, if there are large arrays of encoded values at the top of the file — that's obfuscation, not just minification.

So Which One Do You Actually Need?

Here's a practical decision guide. Look at the code you're trying to read:

Not sure? Use a deobfuscator. It's a superset — it handles both minified and obfuscated code and will produce clean output either way.

Real-World Example: Reading a Production Bundle

Let's say you're debugging a production React app and all the source maps are missing. You open the browser's DevTools and find a bundle that looks like this:

!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){...

You can see meaningful names like exports, enumerable, Module, __esModule. This is minified, not obfuscated. A beautifier or unminifier is all you need. Paste it into our JavaScript Beautifierand you'll get structured, indented code that you can actually navigate.

The Fast Way: Use Your Browser First

Before reaching for an online tool, know that your browser already has a built-in unminifier. In Chrome or Firefox:

1. Open DevTools (F12 or Cmd+Option+I)
2. Go to the Sources tab
3. Open the JavaScript file you want to read
4. Click the { } button (Pretty print) at the bottom of the editor

Chrome will instantly add formatting and indentation. This works great for quick inspection. The downside: it's not easy to copy out or analyze extensively, and it won't help with obfuscated code at all.

For anything more serious — saving the output, running multiple files, or dealing with obfuscation — an online tool is faster.

What About Source Maps?

Source maps are .mapfiles that ship alongside production JavaScript to map compressed code back to the original source. If a site has source maps available, you don't need any of these tools — your browser will automatically show you the original, unminified source in DevTools.

To check: in DevTools Sources tab, look for files with a .map extension, or look for a comment at the bottom of a JS file like //# sourceMappingURL=app.js.map. If it's there, use it. If not, reach for an unminifier.

Quick Tips for Reading Minified Code

• Don't try to read it raw. Always run it through a formatter first. Even 10 seconds of formatting saves minutes of eye strain.
• Follow the entry point.Don't try to understand the whole file. Find the main function, the event listener, or the export — and trace forward from there.
• Use search aggressively. Once formatted, search for function names, string literals, or API calls you recognize to navigate to the relevant section.
• Rename as you go. If you're spending time in a section, manually rename e to event,t to taxRate etc. in your editor. It makes the session dramatically more productive.
• Check for comments in the unminified version. Some libraries leave comments even in minified builds — license headers, version strings, and debug strings are often preserved. Search for /* after formatting.

Try It Right Now

Paste your minified JavaScript into one of our free tools and get readable code in seconds: