Explorador de source maps

Pega el JSON del source map y consulta una posición del código generado. El resultado indica el archivo, la línea y la columna originales.

Se ejecuta localmente en tu navegador
Esta herramienta procesa todos los datos localmente en tu navegador.
JSON Source MapPega un source map v3 estándar. Busca una línea y columna generadas sin subir archivos fuente.
Fuentes
Buscar

Cómo buscar una posición generada en un source map

Pega un source map de versión 3 y pulsa Analizar localmente. La cadena mappings se decodifica con base64 VLQ dentro de la página; no se descarga nada, no hace falta el archivo generado y el mapa no sale del navegador.

El informe muestra version, file, sourceRoot, el número de sources, de names y de mappings decodificados, una tarjeta por cada recuento y una fila por fuente con el tamaño de su sourcesContent incrustado.

  1. Pega el mapa en el cuadro JSON Source Map o pulsa Cargar ejemplo: un mapa de cinco segmentos de src/index.ts con un archivo incrustado y el nombre "answer".
  2. Pulsa Analizar localmente. Cargar ejemplo analiza la muestra al momento.
  3. Revisa las tres tarjetas: cuántas fuentes y nombres declara el mapa y cuántos mappings decodifica la cadena VLQ.
  4. Escribe una línea generada (desde 1) y una columna generada (desde 0) en Buscar y pulsa Buscar: el resultado indica el archivo original, su línea, su columna y el nombre cuando el segmento lo lleva.
  5. Lee la tabla Fuentes: una fila por fuente, con el tamaño del contenido incrustado en bytes o "sin incrustar" cuando no hay sourcesContent. Copiar pone el JSON del informe en el portapapeles.

Qué cuenta el informe y qué devuelve la búsqueda

Qué decodifican los mappings

Cada línea de la cadena mappings es una lista de segmentos base64 VLQ separados por comas, y los valores de un segmento son incrementos: la columna generada vuelve a empezar en cada línea, mientras que la fuente, la línea, la columna original y el nombre siguen acumulándose en todo el archivo.

Un segmento que solo lleva la columna generada no tiene posición original: avanza la columna y no suma al recuento. Todo lo demás se muestra tal cual, así que el número del informe son los segmentos que realmente llevan posición.

Qué devuelve la búsqueda

La búsqueda toma el mapeo con la mayor columna generada que no supere la columna indicada, en la línea indicada. Es el segmento que usaría el depurador del navegador para esa posición.

Las líneas empiezan en 1 y las columnas en 0, igual que en la consola del navegador y en la propia cadena mappings. Si la línea no tiene ningún segmento en esa columna o antes, la herramienta lo dice en lugar de buscar en una línea vecina.

Límites

El explorador solo lee el texto del mapa. No descarga el archivo generado ni los archivos originales, no comprueba que el mapa corresponda a una compilación y no reconstruye archivos a partir de sourcesContent: muestra las cadenas incrustadas en el mapa.

Los mapas de índice (con sections) no se decodifican: pega uno de los mapas de sección. sourceRoot se muestra pero no se antepone a las filas, y un mapa con mappings vacío o con VLQ mal formado se reporta en lugar de repararse.

Herramientas recientes: