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

Sofia emelianova
Sofia Emelianova

Os mapas de origem permitem manter seu código legível e depurável mesmo depois de combinado e minimizado, sem afetar o desempenho.

Ao usar vários transpiladores, minificadores e bundlers, o código implantado é diferente daquele que você criou. Para melhorar o desempenho da rede, essas ferramentas compactam o código em uma única linha, removem caracteres desnecessários e encurtam as variáveis.

O código e o código original foram reduzidos.

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 o código normalmente, mesmo com pontos de interrupção.

Como usar pontos de interrupção no DevTools em um arquivo de origem criado.

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

Além disso, os mapas de origem podem ter extensões. Se você cria ferramentas e estruturas, pense em oferecer suporte a elas. Confira este Estudo de caso: Better Angular Debugging com DevTools, em que a equipe do DevTools e o Angular melhoraram a experiência de depuração no DevTools oferecendo suporte à extensão x_google_ignoreList.

Para saber mais, veja: