Depurar JS minificado: source maps y DevTools

Código de producción ilegible: pretty-print de Chrome, source maps, y desminificar en local solo si faltan las maps. Los nombres mangled se quedan.

22.12.2025

7 min de lectura

Compartir este artículo:

JavaScript

Desminificación

Depuración

Desarrollo

Código

Herramientas

Tutorial

El problema del código minificado en producción

Un TypeError de producción en `main.js:1:245` no es el mismo trabajo que «pegar esto en un desminificador en línea». La minificación quita espacios y comentarios; el mangling renombra las funciones a `a`, `b`, `c`. El pretty-print restaura la forma. Solo una source map restaura los nombres originales. Si faltan las maps y necesitas una copia local, usa el desminificador JavaScript — sabiendo que los identificadores siguen mangled.

Usar las source maps cuando existen — nombres originales y stack traces legibles

Pretty-print en Chrome DevTools (o VS Code) sin salir de la sesión

Saber lo que la desminificación no hace: los nombres mangled no vuelven

Sacar una copia formateada en local solo si faltan las maps

Depurar una biblioteca de terceros minificada apoyándote en las cadenas literales

Cuándo el JavaScript de producción es ilegible

Situaciones de debug que te encontrarás de verdad

Son problemas de depuración. Desminificar es una táctica — no el reflejo por defecto.

La stack trace de producción apunta a la columna 12 000 de una sola línea

Un bundle de proveedor no tiene source map y hay que ver el flujo de control

Un problema de rendimiento solo se reproduce en el build minificado

Inspeccionas un script de terceros que tienes derecho a analizar

Has guardado un `.min.js` y debes leerlo en un editor

Lo que la desminificación no puede restaurar

Formatear no es decompilar. Ten estas limitaciones por definitivas:

Limitaciones:

Los identificadores mangled siguen mangled: `a`, `b`, `c` no volverán a ser `getUserProfile`

Los comentarios eliminados se pierden

El código muerto quitado por el minificador no se puede recuperar

La indentación y los saltos de línea vuelven; los nombres originales no

Algunas transformaciones agresivas (inlining, folding) siguen siendo difíciles de seguir incluso después del pretty-print

Qué funciona:

Restaurar la indentación y el wrapping

Espacios alrededor de operadores y palabras clave

Una instrucción por línea para poner breakpoints legibles

Localizar más rápido los `if` / `for` / `return`

Pretty-print en DevTools sobre el archivo live, sin copiarlo a otro sitio

Cuándo desminificar vs pretty-print

Maps primero, luego pretty-print, luego una copia local

No empieces pegando en una herramienta. Sigue este orden — la página desminificar JavaScript es el paso 3, cuando faltan las maps.

1
Buscar una source map

En DevTools → Sources, comprueba los archivos de origen junto al bundle, un vecino `.map`, o un comentario `//# sourceMappingURL=`. Si se carga una map, depura ahí y párate.

2
Pretty-print en el navegador o el editor

Chrome Sources: el control `{}` Pretty Print formatea el archivo in situ. VS Code: Format Document (formateador JS integrado o Prettier) sobre un `.min.js` guardado. Misma limitación: los nombres siguen mangled.

3
Desminificar en local solo si necesitas un archivo

Sin map, y quieres source indentado en disco: pega en desminificar JavaScript. El procesamiento se queda en el navegador. Tamaño y carácter de indentación son ajustes de formato — no un desofuscador.

4
Navegar con los literales, no con los nombres

Busca cadenas, URLs y mensajes de error únicos. Sigue los patrones `if` / `return` / `.then(`. No esperes que `a` vuelva a ser un identificador real.

Ejemplo:

Antes (minificado):

function a(b,c){return b+c}const d=a(5,3);console.log(d);

Después (desminificado):

function a(b, c) {
  return b + c
}

const d = a(5, 3);
console.log(d);

Un TypeError de producción, sin adivinar

El pretty-print (o una source map) debe preceder al copiar-pegar de un bundle de un megabyte en un editor.

Error: Uncaught TypeError: Cannot read property 'x' of undefined at main.js:1:245

Código minificado:

!function(e,t){"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return ...

Código desminificado (vista previa):

!function(e, t) {
  "object" == typeof module && "object" == typeof module.exports
    ? module.exports = e.document
      ? t(e, !0)
      : function(e) {
          if (!e.document)
            throw new Error("jQuery requires a window with a document");
          return t(e)
        }
    : t(e)
}("undefined" != typeof window ? window : this, function(e, t) {
  var n = [],
    r = e.document,
    i = n.slice,
    o = n.concat,
    s = n.push,
    a = n.indexOf,
    u = {},
    c = u.toString,
    l = u.hasOwnProperty,
    f = {},
    p = "2.3.1",
    d = function(e, t) {
      return new d.fn.init(e, t)
    },
    h = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
  // ... resto del código formateado
});

Source maps: la mejor vía de debug en producción

Lo que una source map hace de verdad

Un archivo `.map` enlaza las posiciones minificadas con las fuentes originales. DevTools puede entonces mostrar rutas reales, identificadores originales y breakpoints en el código que escribiste — lo que ningún desminificador puede reconstruir.

Terser, Webpack, Vite y los bundlers comparables pueden emitir maps en el build. Cuando el navegador (o un tracker de errores) puede cargarlas, la consola y el debugger se comportan como si el bundle nunca se hubiera minificado.

Nombres de variables y de funciones originales

Breakpoints en tus archivos fuente, no en una línea de 400 KB

Stack traces que nombran las funciones que reconoces

Depurar la producción sin entregar un bundle no minificado a los usuarios

Emitir maps en el build

Webpack 5: configura `devtool` (ya no pases `sourceMap: true` a TerserPlugin — opción retirada). Vite: `build.sourcemap: true` o `'hidden'`. Terser en CLI todavía puede adjuntar un objeto map como abajo.

Terser

const terser = require('terser');

const result = await terser.minify(code, {
  sourceMap: {
    filename: 'app.min.js',
    url: 'app.min.js.map'
  }
});

Webpack

module.exports = {
  mode: 'production',
  devtool: 'hidden-source-map',
};

Un `source-map` vinculado públicamente expone las fuentes en DevTools a cualquiera que abra la página. Prefiere `hidden-source-map` (Webpack) o Vite `'hidden'` si quieres maps para tu tracker de errores, no en el comentario JS entregado.

Depurar con las DevTools del navegador

Pretty Print en Chrome DevTools

Chrome (y las demás DevTools Chromium) pueden formatear el archivo que ya estás inspeccionando. Es más rápido que exportar el bundle si solo quieres leer la línea que falla. Format Document en VS Code sobre un `.min.js` guardado es el equivalente en el editor — sigue sin ser una source map.

Abre DevTools (F12 o Cmd+Option+I)

Abre el panel Sources y selecciona el archivo minificado

Haz clic en el control `{}` Pretty Print (barra de estado del editor)

Salta a la columna indicada por la stack trace en la vista formateada

Si hay una source map, pasa al archivo de origen en su lugar

Pretty Print solo restaura el wrapping. Para los nombres originales, siguen haciendo falta source maps.

Breakpoints una vez el código es legible

Una vez que DevTools (o un editor) ha formateado el archivo, los números de línea se refieren a la vista pretty-print, salvo si hay una map activa:

Consejos:

Pon breakpoints en las líneas formateadas y recarga para el próximo hit

Inspecciona los valores aunque el binding se llame `a` — el valor runtime es real

Usa la consola en la pila en pausa para evaluar expresiones

Avanza línea a línea: el pretty-print hace usable el step-over

Lee la stack: los frames siguen apuntando al archivo minificado si no se carga ninguna map

Cuándo todavía necesitas una copia local formateada

Formateadores vs la URL dedicada desminificar

Estas opciones reindentan el JavaScript. Ninguna restaura los nombres mangled. El trabajo «expandir JS minificado» está en desminificar JavaScript. La página hermana embellecer JavaScript es la URL formateador; minificar JavaScript es la operación inversa.

FastMinify — Desminificar JS

Desminificador local en el navegador: pega un snippet minificado, recupera una salida indentada. Solo tamaño de indentación y espacios vs tabulaciones. No se envía nada al servidor.

Ventajas:

Se ejecuta en el navegador

Sin instalación

URL dedicada desminificar

Controles de indentación

Inconvenientes:

Solo formateo — no es un decompilador

VS Code + Prettier

Guarda el archivo y lanza Format Document. Es el camino habitual «desminificar en VS Code»: misma ganancia de legibilidad que el pretty-print, sigue sin identificadores originales.

Ventajas:

Te quedas en el editor

Prettier es un default de equipo habitual

Funciona sin conexión

Inconvenientes:

Hace falta el archivo en disco

Sin recuperación de nombres

JS Beautifier

Formateador open-source (js-beautify) como biblioteca, CLI y varias UI web. Misma familia de herramienta: espacios y estructura, no los símbolos originales.

Ventajas:

Open-source

CLI para scripts

Reglas de wrap configurables

Inconvenientes:

Sigue sin ser una source map

Lo que hay que hacer a continuación

Depura el JavaScript minificado en este orden: source maps si existen, pretty-print en DevTools o VS Code si solo quieres leer la línea que falla, y un desminificador local solo cuando necesitas una copia formateada y faltan las maps. La herramienta no deshace el mangling. Corrige el build para que el próximo incidente tenga maps.

¿Sin maps y necesitas source indentado en local? Usa el desminificador del navegador — luego vuelve a DevTools.

Emitir source maps en producción (`hidden-source-map` / Vite `'hidden'` salvo si expones las fuentes a propósito)

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

Usar la desminificación para una copia local legible, no como primer clic de debug

Tratar los nombres mangled como perdidos sin maps

Mantener un build de desarrollo no minificado para el debug cotidiano

Compartir este artículo

Compartir este artículo:

Depurar JS minificado: source maps y DevTools

El problema del código minificado en producción

Cuándo el JavaScript de producción es ilegible

Limitaciones:

Qué funciona:

Cuándo desminificar vs pretty-print

1Buscar una source map

2Pretty-print en el navegador o el editor

3Desminificar en local solo si necesitas un archivo

4Navegar con los literales, no con los nombres

Ejemplo:

Source maps: la mejor vía de debug en producción

Terser

Webpack

Depurar con las DevTools del navegador

Consejos:

Cuándo todavía necesitas una copia local formateada

FastMinify — Desminificar JS

Ventajas:

Inconvenientes:

VS Code + Prettier

Ventajas:

Inconvenientes:

JS Beautifier

Ventajas:

Inconvenientes:

Lo que hay que hacer a continuación

Artículos relacionados

1
Buscar una source map

2
Pretty-print en el navegador o el editor

3
Desminificar en local solo si necesitas un archivo

4
Navegar con los literales, no con los nombres