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ónJavaScriptCSSDepuraciónEmbellecimientoTutorial

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

Una traza de pila 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 describe 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 reducidos por el mangling se quedan así y los comentarios borrados no vuelven

URL unminify para un fragmento de producción comprimido, URL beautify para código ya legible

Cuándo unminify es la opción correcta 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 la parte en profundidad. Cubre el pretty-print de Chrome, sourceMappingURL, las maps ocultas y por qué a nunca volverá a ser getUserProfile sin una map. Este texto no repite esa visita a DevTools. Responde a otra búsqueda. Ya tienes un fragmento JS o CSS minificado (ticket, copia de CDN, archivo de tema) y quieres las páginas de 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 solo reindentan. No son descompiladores. Trata estos límites como firmes, porque coinciden con lo que hacen las herramientas (js-beautify en la pestaña, tamaño de indent y espacios o tabuladores, comprobación de sintaxis primero).

Limitaciones:

Los nombres reducidos por el mangling se quedan así: un nombre de una sola letra no vuelve a ser getUserProfile

Reescrituras del minificador, por ejemplo !0 / !1 (true / false), se quedan tal cual

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 dar una salida a medias, porque el formateador valida la sintaxis

Qué funciona:

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

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

Recorrer con más facilidad la estructura if / for / @media

Todo se queda en el navegador, no se sube nada

Indentación de 2 o 4 espacios, o tabuladores, con los mismos controles en unminify y beautify

Primero las maps, luego el 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 archivo .map al lado, 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

En Chrome Sources, el control {} Pretty Print formatea el archivo in situ. En VS Code, usa Format Document sobre un .min.js o .min.css guardado. Sigue valiendo el mismo límite: los nombres siguen reducidos. 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 en archivo

Si no hay map y necesitas código indentado 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. El tamaño y el carácter de indent son opciones de formato, no un desofuscador.

4
Navega con literales, no con nombres

Busca cadenas únicas, direcciones URL, 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
};

Recuperas una forma legible, no el código fuente original

JavaScript recupera saltos de línea e indentación, no los 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 de 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 literales de plantilla (template literals) y las cadenas se conservan; el trabajo es el espacio, no el renombrado

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

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

Las reglas CSS y @media vuelven a ser fáciles de recorrer

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 y 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(); eso es otro grupo de herramientas

Dos bucles concretos con las páginas unminify

Pegar JavaScript, desminificarlo y buscar una cadena

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

1. Copia el archivo que falla, no la página HTML

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

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 texto pegado, la herramienta funciona como debe.

3. Busca literales y vuelve a DevTools

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

Pega la hoja minificada y luego sigue 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.

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.

2. Desminifica y busca la clase o el identificador

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

3. Confía en el panel Styles para el resultado real

El archivo formateado dice lo que se entregó. El panel Styles dice lo que realmente se 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 y minify lo ignora

Carácter de indent: espacios o tabuladores

La sintaxis debe ser válida: 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 y beautify comparten el formateador, pero responden a distintas intenciones 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 diferencia está en la intención, no en 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

Código fuente ya con saltos de línea pero desordenado → beautify-js o beautify-css

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

Las herramientas beautify forman el hub de formateadores y las herramientas unminify el de código minificado

Cuándo quedarte en VS Code

Si el archivo ya está en disco y el equipo usa Prettier o los servicios de lenguaje JS y CSS integrados, Format Document hace el mismo trabajo. Cambia espacios, no símbolos. Usa FastMinify cuando el fragmento está en un ticket, una respuesta de CDN o una máquina sin tu perfil de editor. Ningún camino restaura los nombres reducidos.

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. Empieza por las source maps si existen, pasa al pretty-print de DevTools si solo necesitas la línea que falla, y usa 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 la parte en profundidad sobre Chrome y maps, conserva la guía de depuración JavaScript. Para formatear a diario código ya legible, usa las URL beautify.

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

Desminificar JavaScript Desminificar CSS Embellecer JavaScript Hub de herramientas unminify Depurar JS minificado (maps y 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

Considera perdidos sin maps los nombres reducidos y las reescrituras !0 / !1

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

Compartir este artículo

Compartir este artículo:

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

Cuándo unminify es la opción correcta y cuándo no

Limitaciones:

Qué funciona:

Primero las maps, luego el 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 en archivo

4Navega con literales, no con nombres

Ejemplo:

Recuperas una forma legible, no el código fuente original

Antes

Después

Antes

Después

Dos bucles concretos con las páginas unminify

1. Copia el archivo que falla, no la página HTML

2. Pega en unminify-js

3. Busca literales y vuelve a DevTools

1. Copia la hoja de estilos, no el HTML minificado

2. Desminifica y busca la clase o el identificador

3. Confía en el panel Styles para el resultado real

Unminify y beautify comparten el formateador, pero responden a distintas intenciones 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 en archivo

4
Navega con literales, no con nombres