Unminify JS and CSS: Debug Minified Production Code

Unreadable traces, missing maps: recover readable JS and CSS in the browser with unminify and beautify — formatting only, mangled names stay lost.

02.09.2026

9 min read

Share this article:

UnminifyJavaScriptCSSDebuggingBeautifyTutorial

When production JS and CSS are one unreadable line

A stack trace that points at app.min.js:1:18432, or a stylesheet on a single 40 KB line, is a formatting problem first, not a decompiler problem. Minification removed whitespace and comments. Mangling (Terser mangle, cssnano identifier compression where enabled) renamed symbols. Pretty-print restores shape. Only a source map restores original names. When maps are missing, you can get a local copy: the online JavaScript unminifier and the online CSS unminifier re-indent the code in the browser. They do not upload the payload. They do not undo mangling. For the JavaScript-only DevTools and source-map walkthrough, keep the earlier guide to debugging minified JavaScript open. This article is the tool-page workflow for JS and CSS.

Use source maps when they exist: original names beat any formatter

Pretty-print in DevTools before copying a bundle out of the tab

Unminify JS and CSS locally when you need an indented file and maps are missing

Know the hard limit: mangled identifiers stay mangled and deleted comments stay gone

Pick the unminify URL for compressed production snippets, the beautify URL for already-readable source

When unminify is the right choice, and when it is not

This article vs the JavaScript debugging guide

The minified JavaScript debugging guide is the deep dive. It covers Chrome pretty-print, sourceMappingURL, hidden maps, and why a will never become getUserProfile without a map. This piece does not repeat that DevTools tour. It answers a different search. You already have a minified JS or CSS snippet (support ticket, CDN copy, theme file) and want the FastMinify pages that format it. Sibling formatters live on the online unminify tools hub.

A production TypeError on column 12 000 of a one-line bundle, with no .map sibling

A WordPress or Shopify theme ships compressed CSS and you need to see which rule wins

A vendor file has no map, and you are allowed to inspect control flow

You saved app.min.js / styles.min.css and want indented source in an editor

You already pretty-printed in Chrome and still want a file copy on disk

What formatting cannot restore

Unminify and beautify on FastMinify re-indent. They are not decompilers. Treat these limits as hard, because they match what the tools actually do (js-beautify in the tab, indent size and spaces vs tabs, syntax check first).

Limitations:

Mangled names stay mangled: a, b, c will not become getUserProfile

Minifier rewrites such as !0 / !1 (true / false) stay as written

Deleted comments and dead code removed by the minifier cannot come back

Aggressive transforms (inlining, folding, merge rules) stay hard to follow even after pretty-print

Invalid JS or CSS fails with an error instead of partial output, because the formatter validates syntax

What works:

Restore indentation, wrapping, and one-declaration-per-line CSS

Spaces around operators and braces, so breakpoints land on readable lines

Easier scanning of if / for / @media structure

Processing stays in the browser, and nothing is uploaded

Indent 2 or 4 spaces, or tabs, with the same controls on unminify and beautify

Maps first, then pretty-print, then the tool pages

Do not start by pasting into a tab

Walk this order. The unminify JavaScript and unminify CSS pages are step 3, when maps are missing and you need a formatted copy.

1
Look for a source map

In DevTools → Sources, check for original files next to the bundle, a .map sibling, or a //# sourceMappingURL= comment (JS) / /*# sourceMappingURL= (CSS). If a map loads, debug there and stop. Formatters cannot beat original names.

2
Pretty-print in the browser or editor

In Chrome Sources, the {} Pretty Print control formats the file in place. In VS Code, run Format Document on a saved .min.js or .min.css. The same limit applies: names stay mangled. For CSS cascade bugs, pretty-print plus the Styles pane often beats copying the file out.

3
Unminify locally only if you need a file copy

No map, and you want indented source on disk or in a ticket: paste JS into unminify JavaScript or CSS into unminify CSS. Processing stays in the browser. Indent size and character are formatting settings, not a deobfuscator.

4
Navigate with literals, not names

Search for unique strings, URLs, color tokens, and error messages. Follow if / return / @media patterns. Do not wait for a to become a real identifier.

Example:

Before (minified):

function greet(n){return"Hi, "+n;}const cfg={retry:2,debug:!0};

After (unminified):

function greet(n) {
  return "Hi, " + n;
}
const cfg = {
  retry: 2,
  debug: !0
};

You get a readable shape back, not the original source

JavaScript gets newlines and indent, not original identifiers

Paste a one-line IIFE or a Terser bundle slice. The JavaScript unminifier runs js-beautify in the browser after a syntax check. You get wrapping and indent. You do not get the pre-mangle names. The !0 in the example is deliberate: many minifiers rewrite true that way, and formatting will not turn it back into true.

Before

function greet(n){return"Hi, "+n;}const cfg={retry:2,debug:!0};

After

function greet(n) {
  return "Hi, " + n;
}
const cfg = {
  retry: 2,
  debug: !0
};

Toolbar: indent size 2 (default) or 4, spaces or tabs. Minify ignores them; unminify and beautify use them

Invalid JavaScript throws instead of emitting a half-formatted file

Template literals and strings are preserved; the job is whitespace, not renaming

Need the inverse later? The online JavaScript minifier is a different page

For source maps and Chrome {}, stay on the JS debugging guide

CSS rules and @media become easy to scan again

Compressed CSS is usually one line with selectors jammed together. The CSS unminifier formats with js-beautify: selectors on their own lines, declarations indented, @media blocks nested visually. Specificity and cascade do not change, only whitespace. If a rule “disappears” after format, it was already not applying; formatting did not delete it.

Before

.btn,.cta{color:#fff;padding:8px 16px}.btn:hover{opacity:.9}@media(min-width:768px){.btn{padding:12px 20px}}

After

.btn,
.cta {
  color: #fff;
  padding: 8px 16px;
}

.btn:hover {
  opacity: .9;
}

@media (min-width: 768px) {
  .btn {
    padding: 12px 20px;
  }
}

Same indent settings as JS: 2 / 4 spaces or tabs

Invalid CSS (unclosed blocks, broken selectors) fails the syntax check

Concatenating several files is a minify-page workflow and not available on unminify CSS

Hex colors and short values such as .9 stay short; this is not an “expand to longhand” tool

Theme CSS from WordPress is still CSS, not PHP serialize(); that job is a different cluster

Two concrete loops with the unminify pages

Paste JavaScript, unminify it and search for a string

Open the JavaScript unminifier. Paste a single snippet (a function, a webpack chunk, a bookmarklet). Click Unminify. Output is indented in the right pane. Copy it into your editor and search for a unique string from the stack trace. Everything stays in the tab.

1. Copy the crashing file, not the HTML page

From DevTools → Network or Sources, save the .js that the trace names. Pasting the whole HTML document into a JS unminifier will fail the syntax check.

2. Paste into unminify-js

Leave indent on 2 spaces unless your team uses tabs. If you see a syntax error, the paste is truncated or mixed with HTML. Fix the pasted text; the tool is working as intended.

3. Search literals, then go back to DevTools

Find the error message or URL. Note the surrounding control flow. Pretty-print the live file in Chrome if you still need breakpoints, because a formatted copy on disk does not replace a paused call stack.

Paste the minified stylesheet, then chase the selector

Open the CSS unminifier. Paste the compressed sheet (or the slice that contains the selector). After format, search for the class from the DOM. Compare with DevTools Computed styles: formatting does not change which rule wins.

1. Copy the stylesheet, not the minified HTML

Network panel → the .css request. Inline <style> blocks can be pasted too if they are valid CSS only.

2. Unminify, then search the class or id

A selector list such as .btn,.cta splits onto two lines. That is readability, not a cascade change.

3. Rely on DevTools Styles for the final answer

The formatted file tells you what was shipped. The Styles pane tells you what actually applied (overrides, layers, !important). Use both.

What the toolbar actually changes

On both unminify pages, indent size and indent character are the format controls. Minify ignores them. There is no “restore original names” switch. For the rest of the family (HTML, JSON, XML), see the unminify tools hub.

Indent size: 2 or 4. Unminify and beautify use it; minify ignores it

Indent character: spaces or tabs

Syntax must parse: invalid JS/CSS is an error, not a partial pretty-print

Browser-local: the payload is not sent to FastMinify servers

Not a concatenator: joining several CSS files is a minify-page action

Unminify and beautify share one formatter but serve different search intents

Two URLs, one js-beautify engine for JS and CSS

On FastMinify, unminify JavaScript and beautify JavaScript both format with js-beautify after a syntax check. The same pairing exists for CSS: unminify CSS and CSS beautifier online. The split is intent, not a second algorithm. Unminify URLs target compressed production output. Beautify URLs target source you already consider readable but want consistently indented. The longer tour of formatters is the code beautifier guide.

Have a .min.js / .min.css dump → unminify-js or unminify-css

Have messy but already wrapped source → beautify-js or beautify-css

Need to ship smaller assets → minify-js / minify-css, not these pages

Beautify tools are the hub for formatters; unminify tools are the hub for expanding minified code

When to stay in VS Code instead

If the file is on disk and your team runs Prettier or the built-in language services, Format Document does the same kind of job. It changes whitespace, not symbols. Use FastMinify when the snippet lives in a ticket, a CDN response or on a machine without your editor profile. Neither path restores mangled names.

VS Code Format Document: no paste step, uses workspace settings

FastMinify: no install, indent settings in the toolbar, nothing uploaded

Chrome Pretty Print: stays on the live production file for breakpoints

Source maps: still the only way to see original identifiers

What to do next

Debug minified JS and CSS in this order. Use source maps if they exist. Use pretty-print in DevTools if you only need the crashing line. Use a browser unminifier only when you need a formatted copy and maps are missing. FastMinify’s unminify and beautify pages re-indent with js-beautify; they do not undo mangling. For the Chrome and map deep dive, keep the JavaScript debugging guide. For day-to-day formatting of readable source, use the beautify URLs.

Maps missing, and you need indented JS or CSS locally? Format it in the browser, then go back to DevTools.

Unminify JavaScript Unminify CSS Beautify JavaScript Unminify tools hub Debug minified JS (maps & DevTools)

Emit source maps in production (hidden-source-map / Vite 'hidden' unless you intentionally expose sources)

Pretty-print in DevTools before copying a bundle out of the browser

Use unminify-js / unminify-css for a local readable copy, not as the first debug click

Treat mangled names and !0 / !1 rewrites as lost without maps

Pick beautify URLs for already-readable source; minify URLs to compress again

Share this article

Share this article:

HTTP/2, HTTP/3 and Minification: Is Minification Still Worth It?

HTTP/2 and HTTP/3 change how files travel, not how big they are. Measured sizes, compile times and bundling tests show what minification still saves.

22.10.202615 min read

Unix Timestamps: Convert Epochs and Avoid Time Zone Mistakes

Convert a Unix epoch to a readable date and back, tell seconds from milliseconds, and avoid time zone, JWT and clock change traps, all in your browser.

19.10.202618 min read

Cron Expressions: Read the Syntax and Calculate the Next Runs

Read a cron expression field by field, check its next runs in UTC or local time and avoid traps with steps, time zones and dialects, all in your browser.

16.10.202618 min read

When production JS and CSS are one unreadable line

When unminify is the right choice, and when it is not

Limitations:

What works:

Maps first, then pretty-print, then the tool pages

1Look for a source map

2Pretty-print in the browser or editor

3Unminify locally only if you need a file copy

4Navigate with literals, not names

Example:

You get a readable shape back, not the original source

Before

After

Before

After

Two concrete loops with the unminify pages

1. Copy the crashing file, not the HTML page

2. Paste into unminify-js

3. Search literals, then go back to DevTools

1. Copy the stylesheet, not the minified HTML

2. Unminify, then search the class or id

3. Rely on DevTools Styles for the final answer

Unminify and beautify share one formatter but serve different search intents

What to do next

Related Articles

1
Look for a source map

2
Pretty-print in the browser or editor

3
Unminify locally only if you need a file copy

4
Navigate with literals, not names