Dicas do DevTools: o que são mapas de origem?

Sofia Emelianova
Sofia Emelianova

Os mapas de origem permitem que você mantenha o código legível e depurável mesmo depois de combiná-lo e minificar, sem afetar o desempenho.

Ao usar vários transpiladores, minificadores e agrupadores, o código implantado é diferente do código criado. Para melhorar o desempenho da rede, essas ferramentas comprimem o código em uma única linha, removem caracteres desnecessários e encurtam variáveis.

Código minificado e o original.

Muitas ferramentas podem gerar mapas de origem para acompanhar seu código.

Um mapa de origem.

O Chrome DevTools lê o código implantado e os mapas de origem e permite depurar seu código normalmente, mesmo com pontos de interrupção.

Usar pontos de interrupção nas Ferramentas do desenvolvedor em um arquivo de origem criado.

Para entender melhor como os mapas de origem funcionam, consulte o visualizador de mapas de origem.

Além disso, os mapas de origem podem ter extensões. Se você cria ferramentas e frameworks, considere oferecer suporte a eles. Confira este estudo de caso: Melhor depuração do Angular com o DevTools, em que a equipe do DevTools e o Angular melhoraram a experiência de depuração no DevTools com suporte à extensão x_google_ignoreList.

Para saber mais, veja: