Explorador de source maps

Cole o JSON do source map e consulte uma posição do código gerado. O resultado mostra o arquivo, a linha e a coluna de origem.

Funciona localmente no seu navegador
Esta ferramenta processa todos os dados localmente no seu navegador.
JSON Source MapCole um source map v3 padrão. Pesquise uma linha e coluna geradas sem enviar arquivos-fonte.
Fontes
Pesquisar

Como pesquisar uma posição gerada em um source map

Cole um source map versão 3 e pressione Analisar localmente. A string mappings é decodificada em base64 VLQ dentro da página; nada é baixado, o arquivo gerado não é necessário e o mapa não sai do navegador.

O relatório mostra version, file, sourceRoot, o número de sources, de names e de mapeamentos decodificados, um cartão para cada contagem e uma linha por fonte com o tamanho do sourcesContent incorporado.

  1. Cole o mapa na caixa Source map JSON ou pressione Carregar exemplo: um mapa de cinco segmentos de src/index.ts com um arquivo embutido e o nome "answer".
  2. Pressione Analisar localmente. Carregar exemplo analisa a amostra na hora.
  3. Confira os três cartões: quantas fontes e nomes o mapa declara e quantos mapeamentos a string VLQ decodifica.
  4. Informe uma linha gerada (a partir de 1) e uma coluna gerada (a partir de 0) em Pesquisar e pressione Pesquisar: o resultado mostra o arquivo original, a linha, a coluna e o nome quando o segmento tem um.
  5. Veja a tabela Fontes: uma linha por fonte, com o tamanho do conteúdo incorporado em bytes ou "não incorporado" quando não há sourcesContent. Copiar coloca o JSON do relatório na área de transferência.

O que o relatório conta e o que a busca retorna

O que os mappings decodificam

Cada linha da string mappings é uma lista de segmentos base64 VLQ separados por vírgula, e os valores do segmento são incrementos: a coluna gerada recomeça em cada linha, enquanto a fonte, a linha, a coluna original e o nome continuam acumulando ao longo do arquivo.

Um segmento que traz apenas a coluna gerada não tem posição original: ele avança a coluna e não entra na contagem. O resto é mostrado como está, então o número do relatório são os segmentos que realmente trazem posição.

O que a busca retorna

A busca pega o mapeamento com a maior coluna gerada que ainda seja menor ou igual à coluna informada, na linha informada. É o segmento que o devtool do navegador usaria naquela posição.

Linhas começam em 1 e colunas em 0, como no console do navegador e na própria string mappings. Se a linha não tiver nenhum segmento nessa coluna ou antes, a ferramenta informa isso em vez de procurar em uma linha vizinha.

Limites

O explorador lê apenas o texto do mapa. Não baixa o arquivo gerado nem os originais, não confere se o mapa corresponde a um build e não reconstrói arquivos a partir de sourcesContent: mostra as strings embutidas no mapa.

Mapas de índice (com sections) não são decodificados: cole um dos mapas de seção. sourceRoot é exibido mas não é prefixado nas linhas, e um mapa com mappings vazio ou VLQ malformado é reportado em vez de ser corrigido.

Ferramentas recentes: