Desminificar JS y CSS: depurar código minificado en producción

Traces ilegibles y maps ausentes: JS y CSS legibles en el navegador con unminify y beautify — solo formato, nombres mangled perdidos.

02.09.2026

10 min de lectura

Compartir este artículo:

Desminificación

JavaScript

CSS

Depuración

Embellecimiento

Tutorial

Cuando el JS y el CSS de producción caben en una línea ilegible

Un stack trace que apunta a app.min.js:1:18432, o una hoja de estilos de una sola línea de 40 KB, es primero un problema de formato — no de descompilador. La minificación quitó espacios y comentarios. El mangling (Terser mangle, compresión de identificadores de cssnano si está activa) renombró símbolos. El pretty-print restaura la forma. Solo una source map restaura los nombres originales. Cuando faltan las maps y necesitas una copia local, el desminificador JavaScript en línea y el desminificador CSS en línea reindentan en el navegador. No suben el payload. No deshacen el mangling. Para el recorrido DevTools y source maps solo de JavaScript, conserva la guía para depurar JavaScript minificado — este artículo es el flujo de las páginas de herramientas JS y CSS.

Usa source maps cuando existan — los nombres originales ganan a cualquier formateador

Pretty-print en DevTools antes de copiar un bundle fuera de la pestaña

Desminifica JS y CSS en local cuando quieres un archivo indentado y faltan las maps

Límite duro: los identificadores mangled siguen mangled; los comentarios borrados no vuelven

URL unminify para un recorte de producción comprimido, URL beautify para fuente ya legible

Cuándo unminify es el clic correcto — y cuándo no

Este artículo frente a la guía de depuración JavaScript

La guía de depuración de JavaScript minificado es el deep dive: pretty-print de Chrome, sourceMappingURL, maps hidden, y por qué a nunca volverá a ser getUserProfile sin map. Este texto no repite esa visita a DevTools. Responde a otra búsqueda: ya tienes un recorte JS o CSS minificado (ticket, copia CDN, archivo de tema) y quieres las páginas FastMinify que lo formatean. Los formateadores de la familia están en el hub de herramientas unminify.

TypeError de producción en la columna 12 000 de un bundle de una línea — sin archivo .map al lado

Un tema WordPress o Shopify entrega CSS comprimido y necesitas ver qué regla gana

Un archivo de vendor sin map que tienes derecho a inspeccionar

Guardaste app.min.js / styles.min.css y quieres fuente indentada en un editor

Ya hiciste pretty-print en Chrome y aún quieres una copia en disco

Lo que el formato no puede restaurar

Unminify y beautify en FastMinify reindentan. No son descompiladores. Trata estos límites como duros — coinciden con lo que hacen las herramientas (js-beautify en la pestaña, tamaño de indent y espacios vs tabuladores, comprobación de sintaxis primero).

Limitaciones:

Los nombres mangled siguen mangled: a, b, c no se convierten en getUserProfile

Reescrituras del minificador como !0 / !1 (true / false) se quedan como están

Comentarios borrados y código muerto eliminado por el minificador no vuelven

Transforms agresivos (inlining, folding, fusión de reglas) siguen difíciles de leer incluso después del pretty-print

JS o CSS inválido falla en lugar de un «más o menos» — el formateador valida la sintaxis

Qué funciona:

Restaurar indentación, wrapping y una declaración CSS por línea

Espacios alrededor de operadores y llaves para poner breakpoints en líneas legibles

Escanear más fácil if / for / @media

Todo se queda en el navegador — no se sube nada

Indent 2 o 4 espacios, o tabuladores — los mismos controles en unminify y beautify

Flujo: primero maps, luego pretty-print, luego las páginas de herramientas

No empieces pegando en una pestaña

Sigue este orden. Las páginas desminificar JavaScript y desminificar CSS son el paso 3, cuando faltan las maps y necesitas una copia formateada.

1
Busca una source map

En DevTools → Sources, busca archivos originales junto al bundle, un vecino .map, o un comentario //# sourceMappingURL= (JS) / /*# sourceMappingURL= (CSS). Si carga una map, depura ahí y para. Ningún formateador gana a los nombres originales.

2
Pretty-print en el navegador o el editor

Chrome Sources: el control {} Pretty Print formatea el archivo in situ. VS Code: Format Document sobre un .min.js o .min.css guardado. El mismo límite: los nombres siguen mangled. Para un bug de cascada CSS, pretty-print más el panel Styles suele ganar a copiar el archivo fuera.

3
Desminifica en local solo si quieres una copia archivo

Sin map, y quieres fuente indentada en disco o en un ticket: pega el JS en el desminificador JavaScript o el CSS en el desminificador CSS. El procesamiento se queda en el navegador. Tamaño y carácter de indent son controles de forma — no un desofuscador.

4
Navega con literales, no con nombres

Busca cadenas únicas, URLs, tokens de color y mensajes de error. Sigue patrones if / return / @media. No esperes a que a vuelva a ser un identificador real.

Ejemplo:

Antes (minificado):

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

Después (desminificado):

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

Lo que recuperas: forma legible, no el source original

JavaScript: saltos de línea e indent, no identificadores originales

Pega una IIFE de una línea o un trozo de bundle Terser. El desminificador JavaScript ejecuta js-beautify en el navegador tras una comprobación de sintaxis. Obtienes wrapping e indent. No obtienes los nombres anteriores al mangle. El !0 del ejemplo es deliberado: muchos minificadores reescriben true así, y el formato no lo convierte de nuevo en true.

Antes

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

Después

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

Barra: indent 2 (por defecto) o 4, espacios o tabuladores — minify los ignora; unminify y beautify los usan

JavaScript inválido lanza error en lugar de emitir un archivo a medias

Los template literals y las cadenas se conservan; el trabajo es el espacio, no el renombrado

¿Necesitas lo inverso después? minificador JavaScript en línea — otra página

Para source maps y el {} de Chrome, quédate en la guía de depuración JS

CSS: reglas y @media vuelven a ser escaneables

El CSS comprimido suele ser una línea con selectores pegados. El desminificador CSS formatea con js-beautify: selectores en sus líneas, declaraciones indentadas, bloques @media anidados visualmente. Especificidad y cascada no cambian — solo los espacios. Si una regla «desaparece» tras formatear, ya no se aplicaba; el formato no la borró.

Antes

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

Después

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

.btn:hover {
  opacity: .9;
}

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

Los mismos controles de indent que JS: 2 / 4 espacios o tabuladores

CSS inválido (bloques sin cerrar, selectores rotos) falla la comprobación de sintaxis

Concatenar varios archivos es un flujo de la página minify — no está en unminify CSS

Los hex y valores cortos como .9 se quedan cortos; no es una herramienta «expand to longhand»

El CSS de un tema WordPress sigue siendo CSS — no PHP serialize(); otro cluster

Usar las páginas unminify: dos bucles concretos

JavaScript: pegar, desminificar, buscar una cadena

Abre el desminificador JavaScript. Pega un solo recorte (una función, un chunk de webpack, un bookmarklet). Pulsa Unminify. La salida queda indentada a la derecha. Cópiala al editor y busca una cadena única del stack trace. Todo se queda en la pestaña.

Paso 1: copia el archivo que falla, no la página HTML

Desde DevTools → Network o Sources, guarda el .js que nombra la traza. Pegar todo el documento HTML en un desminificador JS hará fallar la comprobación de sintaxis.

Paso 2: pega en unminify-js

Deja el indent en 2 espacios salvo que el equipo use tabuladores. Si ves un error de sintaxis, el pegado está truncado o mezclado con HTML — corrige el pegado, no bajes el listón de la herramienta.

Paso 3: busca literales y vuelve a DevTools

Encuentra el mensaje de error o la URL. Anota el flujo de control alrededor. Haz pretty-print del archivo en vivo en Chrome si aún necesitas breakpoints — una copia formateada en disco no sustituye una pila de llamadas en pausa.

CSS: pega la hoja minificada y luego persigue el selector

Abre el desminificador CSS. Pega la hoja comprimida (o el recorte que contiene el selector). Tras formatear, busca la clase del DOM. Compara con Computed de DevTools: el formato no cambia qué regla gana.

Paso 1: copia la hoja de estilos, no el HTML minificado

Panel Network → la petición .css. Los bloques <style> inline también se pegan si solo contienen CSS válido.

Paso 2: desminifica y busca la clase o el id

Una lista de selectores como .btn,.cta se separa en dos líneas. Es legibilidad, no un cambio de cascada.

Paso 3: quédate con el panel Styles para la verdad

El archivo formateado dice lo que se entregó. El panel Styles dice lo que realmente aplica (overrides, layers, !important). Usa ambos.

Lo que la barra cambia de verdad

En ambas páginas unminify, el tamaño y el carácter de indent son los controles de formato. Minify los ignora. No hay un interruptor «restaurar nombres originales». Para el resto de la familia (HTML, JSON, XML), véase el hub de herramientas unminify.

Tamaño de indent: 2 o 4 — lo usan unminify y beautify, minify lo ignora

Carácter de indent: espacios o tabuladores

La sintaxis debe parsear: JS/CSS inválido es un error, no un pretty-print parcial

En el navegador: el payload no se envía a los servidores de FastMinify

No es un concatenador: unir varios archivos CSS es una acción de la página minify

Unminify vs beautify: el mismo formateador, distinta intención de búsqueda

Dos URL, un motor js-beautify para JS y CSS

En FastMinify, desminificar JavaScript y embellecer JavaScript formatean ambos con js-beautify tras una comprobación de sintaxis. El mismo par existe para CSS: desminificar CSS y embellecer CSS en línea. La división es la intención, no un segundo algoritmo. Las URL unminify apuntan a salida de producción comprimida. Las URL beautify apuntan a fuente que ya consideras legible pero quieres indentar de forma uniforme. El recorrido más largo de formateadores es la guía del code beautifier.

Dump .min.js / .min.css → unminify-js o unminify-css

Fuente ya envuelta pero sucia → beautify-js o beautify-css

Necesitas assets más pequeños → minify-js / minify-css, no estas páginas

Hub de formateadores: herramientas beautify; hub expand-minified: herramientas unminify

Cuándo quedarte en VS Code

Si el archivo ya está en disco y el equipo usa Prettier o los language services JS/CSS, Format Document es la misma clase de operación: espacios, no símbolos. Usa FastMinify cuando el recorte vive en un ticket, una respuesta CDN o una máquina sin tu perfil de editor. Ningún camino restaura nombres mangled.

VS Code Format Document: sin paso de pegar, ajustes del workspace

FastMinify: sin instalar, controles de indent en la barra, nada se sube

Chrome Pretty Print: se queda en el archivo de producción en vivo para breakpoints

Source maps: siguen siendo la única forma de ver identificadores originales

Qué hacer después

Depura JS y CSS minificados en este orden: source maps si existen, pretty-print en DevTools si solo necesitas la línea que falla, y un desminificador en el navegador solo cuando necesitas una copia formateada y faltan las maps. Las páginas unminify y beautify de FastMinify reindentan con js-beautify; no deshacen el mangling. Para el deep dive de Chrome y maps, conserva la guía de depuración JavaScript. Para formatear a diario fuente ya legible, usa las URL beautify.

¿Faltan las maps y necesitas JS o CSS indentado en local? Formatea en el navegador — luego vuelve a DevTools.

Emite source maps en producción (hidden-source-map / Vite 'hidden' salvo que expongas las fuentes a propósito)

Pretty-print en DevTools antes de copiar un bundle fuera del navegador

Usa unminify-js / unminify-css para una copia local legible, no como primer clic de debug

Trata los nombres mangled y las reescrituras !0 / !1 como perdidos sin maps

URL beautify para fuente ya legible; URL minify para volver a comprimir

Compartir este artículo

Compartir este artículo:

Desminificar JS y CSS: depurar código minificado en producción

Cuando el JS y el CSS de producción caben en una línea ilegible

Cuándo unminify es el clic correcto — y cuándo no

Limitaciones:

Qué funciona:

Flujo: primero maps, luego pretty-print, luego las páginas de herramientas

1Busca una source map

2Pretty-print en el navegador o el editor

3Desminifica en local solo si quieres una copia archivo

4Navega con literales, no con nombres

Ejemplo:

Lo que recuperas: forma legible, no el source original

Antes

Después

Antes

Después

Usar las páginas unminify: dos bucles concretos

Paso 1: copia el archivo que falla, no la página HTML

Paso 2: pega en unminify-js

Paso 3: busca literales y vuelve a DevTools

Paso 1: copia la hoja de estilos, no el HTML minificado

Paso 2: desminifica y busca la clase o el id

Paso 3: quédate con el panel Styles para la verdad

Unminify vs beautify: el mismo formateador, distinta intención de búsqueda

Qué hacer después

Artículos relacionados

1
Busca una source map

2
Pretty-print en el navegador o el editor

3
Desminifica en local solo si quieres una copia archivo

4
Navega con literales, no con nombres