Explorador de Source Maps

Qué registra realmente un source map

Un archivo .map no contiene tu código original. Casi siempre contiene una sola cosa: una tabla compacta de posiciones — "la línea 2, columna 4110 generada viene de app.js línea 88, columna 12, y el identificador allí se llamaba total". Algunos mapas van más allá e incrustan también el texto completo del archivo original (sourcesContent), pero ese campo es opcional, y muchos mapas de producción — incluido, da la casualidad, el propio de jQuery — se publican sin él.

Esta herramienta lee esa tabla directamente, en tu navegador, para que puedas comprobarla contra la realidad en lugar de confiar en lo que una herramienta de build afirma haber generado.

Qué puedes hacer aquí

• Cargar un archivo .map. Verás de inmediato cada ruta de origen que enumera, organizada en árbol, y un recuento de cuántos mapeos contiene.
• Añadir el .js generado al que pertenece (opcional, pero merece la pena). Con él presente, una búsqueda de línea/columna también muestra el código generado exacto alrededor de la posición consultada, y hacer clic en una línea de ese fragmento rellena el campo de línea por ti.
• Buscar cualquier posición generada. Las líneas son de base 1 y las columnas de base 0, exactamente como especifica el estándar de source maps — la misma convención que usan internamente Chrome DevTools y cualquier herramienta JS. No todos los bytes de un bundle están mapeados: el código de arranque, el envoltorio de módulos y la salida del minificador entre tokens a menudo no tienen mapeo alguno, y esta herramienta lo dice claramente en vez de adivinar.
• Leer el origen, cuando está disponible. Haz clic en cualquier archivo del árbol para ver su sourcesContent incrustado. Cuando un origen no tiene texto incrustado — el mapeo existe, pero no el texto — verás un aviso explícito en lugar de un panel vacío fingiendo que no había nada que mostrar.

Por qué importa

Los source maps son lo que convierte una traza de error que apunta a bundle.min.js:2:184031 en una que apunta a src/components/Cart.jsx:41. Cuando esa traducción parece incorrecta — un error reportado en una línea sin sentido, un depurador que entra en el archivo equivocado — la forma más rápida de saber si el mapa está roto o es tu modelo mental el que falla es preguntarle directamente al mapa. Eso es lo que hace esta herramienta.

Privacidad

Ambos archivos se analizan por completo en tu navegador. No se sube nada a ningún sitio.