Unminify JS and CSS: Debug Minified Production Code

When production JS and CSS are one unreadable line

A stack trace that points at app.min.js:1:18432, or a stylesheet that is 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 and you need a local copy, the online JavaScript unminifier and the online CSS unminifier re-indent 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; deleted comments stay gone

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

When unminify is the right click — and when it is not

This article vs the JavaScript debugging guide

The minified JavaScript debugging guide is the deep dive: 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 you 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 — 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 — 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 instead of “best effort” garbage — 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 — nothing is uploaded

Indent 2 or 4 spaces, or tabs — same knobs on unminify and beautify

Workflow: 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

Chrome Sources: the {} Pretty Print control formats the file in place. VS Code: Format Document on a saved .min.js or .min.css. Same limit: 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 format knobs — not a deobfuscator.

4
Navigate with literals, not names

Search for unique strings, URLs, colour 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
};

What you get back: readable shape, not original source

JavaScript: 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 — ignored by minify, used by unminify and beautify

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? online JavaScript minifier — that is a different page

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

CSS: rules and @media become scannable 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 knobs as JS: 2 / 4 spaces or tabs

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

Concat of several files is a minify-page workflow — not available on unminify CSS

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

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

Using the unminify pages: two concrete loops

JavaScript: paste, unminify, 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.

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

Step 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 paste, do not lower the tool’s standards.

Step 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 — a formatted copy on disk does not replace a paused call stack.

CSS: 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.

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

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

Step 3: keep DevTools Styles for the truth

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 — used by unminify and beautify, ignored by minify

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 vs beautify: same formatter, different search intent

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

Hub for formatters: beautify tools; hub for expand-minified: unminify tools

When to stay in VS Code instead

If the file is already on disk and your team runs Prettier or the built-in JS/CSS language services, Format Document is the same class of operation: whitespace, not symbols. Use FastMinify when the snippet lives in a ticket, a CDN response, or 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 knobs 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: source maps if they exist, pretty-print in DevTools if you only need the crashing line, and 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.

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

Unminify JS and CSS: Debug Minified Production Code

When production JS and CSS are one unreadable line

When unminify is the right click — and when it is not

Limitations:

What works:

Workflow: 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:

What you get back: readable shape, not original source

Before

After

Before

After

Using the unminify pages: two concrete loops

Step 1: copy the crashing file, not the HTML page

Step 2: paste into unminify-js

Step 3: search literals, then go back to DevTools

Step 1: copy the stylesheet, not the minified HTML

Step 2: unminify, then search the class or id

Step 3: keep DevTools Styles for the truth

Unminify vs beautify: same formatter, different search intent

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