Explorador de Source Maps

O que um source map realmente registra

Um arquivo .map não contém seu código original. Quase sempre contém apenas uma coisa: uma tabela compacta de posições — "a linha 2, coluna 4110 gerada veio de app.js linha 88, coluna 12, e o identificador ali se chamava total". Alguns mapas vão além e também incorporam o texto completo do arquivo original (sourcesContent), mas esse campo é opcional, e muitos mapas de produção — incluindo, por acaso, o próprio do jQuery — são publicados sem ele.

Esta ferramenta lê essa tabela diretamente, no seu navegador, para que você possa conferi-la contra a realidade em vez de confiar na afirmação de uma ferramenta de build sobre o que ela gerou.

O que você pode fazer aqui

• Carregar um arquivo .map. Você verá imediatamente cada caminho de origem que ele lista, organizado em árvore, e uma contagem de quantos mapeamentos o arquivo contém.
• Adicionar o .js gerado ao qual pertence (opcional, mas vale a pena). Com ele presente, uma busca de linha/coluna também mostra o código gerado exato ao redor da posição consultada, e clicar em uma linha desse trecho preenche o campo de linha para você.
• Localizar qualquer posição gerada. As linhas são de base 1 e as colunas de base 0, exatamente como a especificação de source maps define — a mesma convenção usada internamente pelo Chrome DevTools e por qualquer ferramenta JS. Nem todo byte de um bundle está mapeado: código de inicialização, o invólucro de módulos e a saída do minificador entre tokens frequentemente não têm mapeamento algum, e esta ferramenta diz isso claramente em vez de adivinhar.
• Ler a origem, quando disponível. Clique em qualquer arquivo da árvore para ver seu sourcesContent incorporado. Quando uma origem não tem texto incorporado — o mapeamento existe, mas não o texto — você verá um aviso explícito em vez de um painel vazio fingindo que não havia nada para mostrar.

Por que isso importa

Source maps são o que transforma um rastro de erro apontando para bundle.min.js:2:184031 em um apontando para src/components/Cart.jsx:41. Quando essa tradução parece errada — um erro relatado numa linha sem sentido, um depurador entrando no arquivo errado — a forma mais rápida de descobrir se o mapa está quebrado ou se é seu modelo mental que está errado é perguntar diretamente ao mapa. É isso que esta ferramenta faz.

Privacidade

Ambos os arquivos são analisados inteiramente no seu navegador. Nada é enviado a lugar nenhum.