Files, Binary & Compression

Decodificador de source mappara llegar a la línea original del error

Pega un archivo .map (o un JS con el map inline) y escribe línea:columna o un stack trace completo para ver el archivo, la línea y el código original.

Decodificador de source map

Ejemplo:

Source map

Se analiza en esta pestaña. Nunca se descargan fuentes remotas ni sourceMappingURL externos.

Resultado

La entrada cambió; se analiza automáticamente…

El reporte de error de producción solo dice app.3f2a.js:1:20931: línea uno, columna veinte mil de un bundle minificado. El archivo .map de JavaScript que salió del mismo build sabe exactamente qué línea de qué archivo .ts o .jsx era, pero sus mappings están codificados en Base64 VLQ y no se pueden leer a simple vista. Este decodificador de source map hace la decodificación y la búsqueda por ti, sin escribir un script desechable con la librería source-map.

Úsalo cuando el sistema de seguimiento de errores no tiene los maps, cuando solo tienes los artefactos del CI o cuando necesitas comprobar que un map corresponde de verdad al bundle publicado. También sirve para decodificar un source map y revisar el archivo en sí: qué sources lista, cuáles traen sourcesContent, cuáles están en la ignoreList y si la cadena mappings es válida. A diferencia de los servicios que procesan el map en un servidor, no se sube nada ni se consulta ninguna URL remota.

Por qué usar este decodificador de source map

Sirve para encontrar la línea original de cada frame a la vez en código minificado, y avisa cuando la respuesta es solo aproximada.

Pega el stack trace entero, no una posición cada vez

Cada línea que termina en :línea:columna se busca en el map: archivo, línea y columna originales, el nombre del identificador original y unas líneas de código alrededor. Los frames que vienen de un archivo distinto al que describe el map se marcan, para que un frame del bundle de vendor no se resuelva en silencio con el map de tu aplicación.

Leer las reglas de búsqueda
Un stack trace minificado a la izquierda y, a la derecha, cada frame resuelto a un archivo TypeScript original con su línea y el código correspondiente resaltado.

Ver y recuperar las fuentes que trae el map

La vista Fuentes lista cada entrada de sources con el sourceRoot aplicado, marca cuáles tienen sourcesContent y cuáles están en la ignoreList, y muestra el código incrustado con números de línea. Con un clic guardas un archivo, o todas las fuentes incrustadas en un zip que conserva las carpetas: útil cuando el map es la última copia del código original.

Probar en la herramienta
La lista de archivos fuente de un map, algunos marcados sin contenido, junto a un archivo TypeScript restaurado con números de línea y un botón para descargar el zip.

Tres detalles para dar con la línea correcta

01

Entrega el map en la forma que lo tengas

Pega el JSON del .map, abre o suelta el archivo, o pega directamente el archivo JS o CSS compilado: si termina con un comentario //# sourceMappingURL=data:…, se extrae y decodifica el map inline (Base64 y codificación URL). Si el comentario apunta a una URL normal, se muestra pero no se descarga: abre ese archivo .map aquí.

  • La primera línea anti-XSSI )]}' y el BOM UTF-8 se eliminan solos, así que un map guardado desde una respuesta del servidor se pega tal cual.
02

Comprueba desde qué número cuentan las columnas

Las posiciones admiten 12:345, «12 345» o un frame completo como at n (https://example.com/app.js:1:177). Las columnas empiezan en 1 por defecto, como en los stack traces de Chrome, Firefox y Node. Si tu columna viene de la librería mozilla/source-map o de un campo que empieza en 0, desactiva «Columnas desde 1»; si no, cada resultado queda desplazado un carácter.

  • Las líneas sin línea:columna, como el mensaje de error al principio del stack trace, se omiten y se cuentan en lugar de hacer fallar la búsqueda.
03

Mira el tipo de coincidencia y luego ve en sentido contrario

Una coincidencia exacta significa que un segmento empieza en esa columna; si no, se usa el segmento más cercano a la izquierda y el resultado lo indica, la misma regla que aplican el navegador y la librería source-map. «Abrir en Fuentes» salta a la línea original, donde el campo Línea original lista todas las posiciones generadas que apuntan a ella.

  • Con el análisis automático desactivado, Ctrl/Cmd+Enter lanza el análisis y la búsqueda desde cualquier punto del panel.

Lo que el decodificador desarma

Cada segmento de mapping, decodificado

La vista Mappings convierte la cadena VLQ en filas de línea:columna generada → fuente, línea:columna original y nombre, de 100 en 100, y exporta la tabla completa como TSV para una hoja de cálculo o un diff.

De la línea original al código generado

Elige una fuente y una línea original para listar todas las posiciones generadas que apuntan a ella: sirve para ver si el minificador hizo inline de una línea, la duplicó o la eliminó.

Maps inline, indexados y con ignoreList

Entiende URL data: inline, maps indexados con sections y offset, la unión con sourceRoot, y tanto ignoreList como el antiguo x_google_ignoreList, para separar el código del framework del tuyo.

Errores que señalan el segmento roto

Un JSON inválido se informa con línea y columna; un carácter VLQ inválido, un segmento con un número de campos incorrecto o un índice de fuente o de nombre fuera de rango indica la línea generada y el segmento.

Qué hace y qué no hace

No se descarga nada
Los enlaces sourceMappingURL externos, las entradas http(s) de sources y las secciones indexadas que apuntan a una URL se muestran pero nunca se piden. El map, sus fuentes y tu stack trace se quedan en esta pestaña y no se escriben en la URL ni en el almacenamiento local.
Solo versión 3, hasta 50 MB
Solo se acepta Source Map v3; la versión 2 o un archivo sin versión se rechaza con un mensaje. Una entrada de más de 50 MB se rechaza, y un map muy grande puede congelar la página un momento mientras se decodifica.
La búsqueda se ajusta a la izquierda, nunca a la derecha
Si ningún segmento empieza en una columna, el resultado usa el más cercano anterior y lo marca como aproximado. Si la columna cae en código añadido por el bundler, se informa de un segmento sin posición original en vez de inventar una posición cercana.
Sin sourcesContent no hay código
Si el map se generó sin sourcesContent, la búsqueda sigue dando la ruta y la posición originales, pero no hay fragmento, vista previa ni entrada en el zip: el texto original simplemente no está en el archivo.
Un map por búsqueda
Cada map describe solo su propio bundle. Los frames de otros archivos se marcan pero se buscan igualmente, así que revisa el aviso antes de fiarte. Una visualización en colores de cada segmento, editar maps o fusionarlos queda fuera de alcance.

Preguntas frecuentes sobre el decodificador de source map

¿Qué son los source maps?

Son archivos JSON que relacionan cada posición del JavaScript o CSS compilado y minificado con una posición del código fuente original. El navegador los usa para mostrar tu código real en el depurador y en los stack traces. En el decodificador de source map de arriba puedes pegar uno y ver su contenido desglosado.

¿Qué es un archivo .map en JavaScript y para qué sirve?

Es el source map del bundle: sources lista los archivos originales, names los identificadores y mappings guarda las correspondencias codificadas en Base64 VLQ. Sirve para depurar y para traducir errores de producción a la línea original. La vista Mappings muestra esas correspondencias como una tabla legible.

¿Cómo encuentro la línea y columna original de un error en código minificado?

Escribe la línea:columna o pega todo el stack trace en el campo de posiciones. Las columnas empiezan en 1 por defecto, igual que en los stack traces del navegador. Si ningún segmento empieza en esa columna, se usa el más cercano a la izquierda y el resultado se marca como aproximado.

¿Es seguro usar sourcemaps en producción?

Un map público con sourcesContent deja tu código original, comentarios incluidos, al alcance de cualquiera. Por eso muchos equipos solo suben los maps a su herramienta de seguimiento de errores o los sirven detrás de autenticación. Revisarlos aquí no añade riesgo: todo se decodifica localmente en el navegador.

¿Cómo recupero el código fuente original desde un source map?

Es posible si el map incluye sourcesContent, que guarda el texto completo de cada archivo. En la vista Fuentes puedes leer y guardar cada archivo o descargarlos todos en un zip que conserva las carpetas. Sin sourcesContent el map solo tiene rutas y posiciones, y el código no se puede recuperar.

¿Sigues con dudas?

Sigue con otras herramientas de archivos

Otras herramientas para trabajar con archivos y sus bytes.

Ver todas las herramientas de archivos

Abre tu map en el decodificador de source map

Suelta el archivo .map del último build y pega el stack trace del reporte: el decodificador de source map, también visor de source maps, te muestra la línea original en segundos.

Volver a la herramienta Ver todas las herramientas

Todo se procesa localmente en tu navegador.