Files, Binary & Compression

Decodificador de source mappara chegar à linha original do erro

Cole um arquivo .map (ou um JS com o map inline) e digite linha:coluna ou um stack trace inteiro para ver o arquivo, a linha e o código original.

Decodificador de source map

Exemplo:

Source map

Analisado nesta aba. Fontes remotas e sourceMappingURL externos nunca são baixados.

Resultado

Entrada alterada — analisando automaticamente…

O relatório de erro de produção diz apenas app.3f2a.js:1:20931: linha um, coluna vinte mil de um bundle minificado. O arquivo .map de JavaScript gerado no mesmo build sabe exatamente qual linha de qual arquivo .ts ou .jsx era, mas os mappings estão codificados em Base64 VLQ e não dá para ler a olho nu. Este decodificador de source map faz a decodificação e a busca por você, sem precisar escrever um script descartável com a biblioteca source-map.

Use quando a ferramenta de monitoramento de erros não recebeu os maps, quando você só tem os artefatos do CI ou quando precisa conferir se um map é mesmo do bundle publicado. Ele também serve para decodificar um source map e olhar o arquivo em si: quais sources ele lista, quais trazem sourcesContent, quais estão na ignoreList e se a string mappings é válida. Diferente de serviços que processam o map num servidor, nada é enviado e nenhuma URL remota é acessada.

Por que usar este decodificador de source map

Ele responde à pergunta que importa — qual é a linha original — para todos os frames de uma vez, e avisa quando a resposta é só aproximada.

Cole o stack trace inteiro e desminifique todos os frames

Cada linha que termina em :linha:coluna é buscada no map: arquivo, linha e coluna originais, o nome do identificador original e algumas linhas de código em volta. Frames que vêm de um arquivo diferente do descrito no map são sinalizados, para que um frame do bundle de vendor não seja resolvido em silêncio com o map da sua aplicação.

Ler as regras de busca
Um stack trace minificado à esquerda e, à direita, cada frame resolvido para um arquivo TypeScript original com a linha e o código correspondente destacado.

Ver e recuperar as fontes que o map carrega

A visão Fontes lista cada entrada de sources com o sourceRoot aplicado, marca quais têm sourcesContent e quais estão na ignoreList, e mostra o código embutido com números de linha. Com um clique você salva um arquivo, ou todas as fontes embutidas num zip que mantém as pastas — útil quando o map é a última cópia do código original.

Testar na ferramenta
A lista de arquivos-fonte de um map, alguns marcados sem conteúdo, ao lado de um arquivo TypeScript restaurado com números de linha e um botão para baixar o zip.

Três detalhes para cair na linha certa

01

Entregue o map do jeito que você tiver

Cole o JSON do .map, abra ou solte o arquivo, ou cole direto o arquivo JS ou CSS compilado: se ele terminar com um comentário //# sourceMappingURL=data:…, o map inline é extraído e decodificado (Base64 e codificação URL). Se o comentário apontar para uma URL comum, ela é mostrada mas não baixada — abra esse arquivo .map aqui.

  • A primeira linha anti-XSSI )]}' e o BOM UTF-8 são removidos automaticamente, então um map salvo direto de uma resposta do servidor pode ser colado como está.
02

Confira a partir de qual número as colunas contam

As posições aceitam 12:345, “12 345” ou um frame completo como at n (https://example.com/app.js:1:177). As colunas começam em 1 por padrão, como nos stack traces do Chrome, Firefox e Node. Se a sua coluna veio da biblioteca mozilla/source-map ou de um campo que começa em 0, desligue “Colunas a partir de 1”; senão cada resultado fica um caractere deslocado.

  • Linhas sem linha:coluna, como a mensagem de erro no topo do stack trace, são puladas e contadas em vez de fazer a busca falhar.
03

Veja o tipo de correspondência e depois faça o caminho inverso

Uma correspondência exata significa que um segmento começa naquela coluna; caso contrário, é usado o segmento mais próximo à esquerda e o resultado avisa, a mesma regra do navegador e da biblioteca source-map. “Abrir em Fontes” pula para a linha original, onde o campo Linha original lista todas as posições geradas que apontam para ela.

  • Com a análise automática desligada, Ctrl/Cmd+Enter roda a análise e a busca de qualquer lugar do painel.

O que o decodificador desmonta

Cada segmento de mapping decodificado

A visão Mappings transforma a string VLQ em linhas de linha:coluna gerada → fonte, linha:coluna original e nome, 100 por vez, e exporta a tabela completa em TSV para planilha ou diff.

Da linha original ao código gerado

Escolha uma fonte e uma linha original para listar todas as posições geradas que apontam para ela — ajuda a ver se o minificador fez inline da linha, duplicou ou removeu.

Maps inline, indexados e com ignoreList

Entende URLs data: inline, maps indexados com sections e offset, a junção com sourceRoot, e tanto ignoreList quanto o antigo x_google_ignoreList, para separar o código do framework do seu.

Erros que apontam o segmento quebrado

JSON inválido é informado com linha e coluna; um caractere VLQ inválido, um segmento com número errado de campos ou um índice de fonte ou de nome fora do intervalo indica a linha gerada e o segmento.

O que ele faz e o que não faz

Nada é baixado
Links sourceMappingURL externos, entradas http(s) em sources e seções indexadas que apontam para uma URL são exibidos, mas nunca requisitados. O map, as fontes dentro dele e o seu stack trace ficam nesta aba e não são gravados na URL nem no armazenamento local.
Só versão 3, até 50 MB
Só Source Map v3 é aceito; a versão 2 ou um arquivo sem versão é recusado com uma mensagem. Entradas acima de 50 MB são rejeitadas, e um map muito grande pode travar a página por um instante durante a decodificação.
A busca encosta à esquerda, nunca à direita
Se nenhum segmento começa numa coluna, o resultado usa o mais próximo antes dela e marca como aproximado. Se a coluna cai em código adicionado pelo bundler, a ferramenta informa um segmento sem posição original em vez de chutar uma posição vizinha.
Sem sourcesContent, sem código
Se o map foi gerado sem sourcesContent, a busca ainda informa caminho e posição originais, mas não há trecho, prévia nem entrada no zip — o texto original simplesmente não está no arquivo.
Um map por busca
Cada map descreve só o próprio bundle. Frames de outros arquivos são sinalizados, mas buscados mesmo assim; leia o aviso antes de confiar. Um visualizador de source map colorido segmento a segmento, editar ou mesclar maps fica fora do escopo.

Perguntas frequentes sobre o decodificador de source map

Vale a pena publicar source maps em produção?

Depende de quem pode baixá-los. Um map público com sourcesContent deixa seu código original, comentários incluídos, legível para qualquer pessoa; por isso muitas equipes só enviam os maps para a ferramenta de monitoramento de erros ou os servem com autenticação. Conferir um map aqui não aumenta a exposição: tudo é decodificado localmente.

O que é source map e para que serve?

É um arquivo JSON que liga cada posição do JavaScript ou CSS compilado e minificado a uma posição do código-fonte original. O navegador usa isso para mostrar seu código real no depurador e nos stack traces. Cole um no decodificador de source map acima para ver sources, names e mappings destrinchados.

Como encontrar a linha e a coluna originais de um erro em código minificado?

Digite a linha:coluna ou cole o stack trace inteiro no campo de posições. As colunas começam em 1 por padrão, igual aos stack traces do navegador. Se nenhum segmento começa naquela coluna, é usado o mais próximo à esquerda e o resultado é marcado como aproximado.

O source map expõe o código-fonte original?

Sim, se tiver sourcesContent: esse campo guarda o texto completo de cada arquivo. É isso que permite ver o código na visão Fontes e baixar tudo num zip. Sem sourcesContent o map só tem caminhos e posições, e o código não pode ser recuperado dele.

Como desminificar stack traces de erros JavaScript?

Ferramentas de monitoramento fazem isso sozinhas quando você envia os maps a elas. Sem essa configuração, cole aqui o .map do build e o stack trace: cada frame é traduzido para arquivo, linha e coluna originais, com o nome do identificador e o código em volta, sem enviar nada a um servidor.

Ainda tem dúvida?

Continue com outras ferramentas de arquivo

Outras ferramentas para trabalhar com arquivos e seus bytes.

Ver todas as ferramentas de arquivo

Abra seu map no decodificador de source map

Solte o arquivo .map do último build e cole o stack trace do relatório de bug: o decodificador de source map mostra a linha original em segundos.

Voltar para a ferramenta Ver todas as ferramentas

Tudo roda localmente no seu navegador.