Pular para o conteúdo principal

Decodificador de Mapa de Fonte JavaScript

Decodifique os mapeamentos Base64 VLQ de um arquivo .map para encontrar a fonte original, linha e coluna por trás de uma posição minificada, navegue pela tabela completa de mapeamentos de gerado para original, ou remapeie um rastreamento de pilha inteiro minificado de volta à sua fonte.

Entrada

Drop a file or browse
One file · text
Ou

O conteúdo de um arquivo .map, ou o JSON decodificado de um URI de dados inline //# sourceMappingURL=.

Baseado em 1, como mostrado em um editor de código ou rastreamento de pilha do navegador — o primeiro caractere em uma linha é a coluna 1.

Saída

Posição original
 
Isso foi útil?

Guias

Quando um bundler minifica seu JavaScript, ele produz um arquivo .map ao lado dele — um documento JSON que mapeia cada posição na saída minificada de volta para uma linha e coluna em sua fonte original. Ler esse mapeamento à mão significa decodificar segmentos Base64 VLQ (Variable-Length Quantity) compactados no campo mappings do mapa, que é exatamente o tipo de trabalho binário e algorítmico que esta ferramenta faz por você.

Como usar

Cole o conteúdo de um arquivo .map (ou envie diretamente) no campo do mapa de fonte e escolha um modo:

  • Procurar uma posição — digite uma linha e coluna minificadas (como mostrado no DevTools do seu navegador ou em um visualizador de código minificado) para obter o arquivo original, linha, coluna e um trecho do código-fonte circundante.
  • Tabela de mapeamentos completa — veja cada mapeamento de gerado para original que o mapa de fonte contém, uma linha por segmento.
  • Remapear um rastreamento de pilha — cole um rastreamento de pilha minificado inteiro e obtenha o mesmo rastreamento com cada file:line:column reconhecível reescrito para sua localização original.

Onde encontrar um mapa de fonte

A maioria dos bundlers (webpack, esbuild, Vite, Rollup, Terser) pode emitir um automaticamente — procure por um comentário //# sourceMappingURL= no final do arquivo minificado. Se apontar para uma URL .map, busque o conteúdo desse arquivo; se for um URI inline data:application/json;base64,..., decodifique o Base64 e cole o JSON resultante aqui.

Perguntas Frequentes

Por que a busca de posição precisa de linha/coluna baseada em 1?

Porque é o que você vê em qualquer outro lugar — um indicador de linha/coluna do editor de código, DevTools do navegador e um rastreamento de pilha JavaScript contam desde 1. A ferramenta converte internamente para a coluna baseada em 0 que os mapas de fonte realmente usam, portanto você nunca precisa fazer esse cálculo por si mesmo.

O snippet de contexto sempre aparece?

Apenas quando o mapa de fonte incorpora o conteúdo do arquivo original (sourcesContent). Algumas ferramentas de build a omitem para manter o mapa pequeno — sem ela, a ferramenta ainda pode relatar o arquivo original exato, linha e coluna, apenas sem uma visualização de código.

E se meu rastreamento de pilha abranger vários arquivos?

Esta ferramenta aplica um mapa de fonte colado a cada quadro do qual pode analisar um file:line:column — o próprio nome do arquivo não é correspondido, portanto funciona bem para um rastreamento de pilha inteiramente de um pacote. Para um rastreamento de pilha abrangendo vários arquivos empacotados, remapeie alguns quadros por vez com o mapa de fonte para o arquivo ao qual cada quadro realmente pertence.

Meu código não é minificado — eu apenas quero lê-lo

Para código já legível e não minificado que você deseja reformatar, use o Formatador de Código JavaScript em seu lugar. Para ir na outra direção — encolha sua fonte para o arquivo minificado que um mapa de fonte decodifica de volta — veja o Minificador JavaScript.

Privacidade

Tudo funciona em seu navegador — o mapa de fonte, rastreamento de pilha e qualquer arquivo que você enviar nunca sai do seu dispositivo.

sourcemapvlqwebpackbabelterserminifiedstack traceunminifydebugging

Mais formas de usar esta ferramenta

API REST

curl -X POST https://api.iotools.cloud/v1/tool/source-map-decoder \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "mode": "position",
    "sourceMapText": "{\"version\":3,\"sources\":[\"src.js\"],\"sourcesConten…",
    "minifiedLine": "1",
    "minifiedColumn": "21",
    "contextLines": "1"
  }'

Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.

Peça a um agente de IA

Use the IOTools `source-map-decoder` tool (JavaScript Source Map Decoder) on this input:

YOUR_INPUT_HERE

Cole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.

Widget para incorporar

<iframe
  src="https://iotools.cloud/embed/source-map-decoder/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Decodificador de Mapa de Fonte JavaScript — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Coloque isso na sua própria página — grátis, sem chave, só um link de volta.

Custo por chamadaA partir de 5 créditos

Também disponível via

Ama as ferramentas? Livre-se dos anúncios.

Um único pagamento remove todos os anúncios da sua conta, para sempre. Sem assinatura, sem rastreamento.