Depurando aplicativos JavaScript com mapas de origens
Você está depurando um aplicativo da Web para um cliente, mas a versão reduzida do código JavaScript e CSS torna impossível entender quais instruções o navegador está realmente executando.
É aqui que você pode se beneficiar ao adotar o uso de mapas de origem como uma ferramenta útil no desenvolvimento. Assim como o nome indica, os mapas de origem oferecem uma maneira de mapear o código dentro de um arquivo JavaScript compactado de volta à posição original em um arquivo de origem e também oferecem ajuda no departamento de depuração. Essa é uma maneira útil, rápida e direta de descobrir como depurar um navegador, além de ler facilmente scripts compilados.
Então, como exatamente funcionam os mapas de origem?
Source Map é um arquivo que mapeia o código transformado de volta para a fonte original. Ele permite que os desenvolvedores depurem o código em ferramentas de desenvolvedor, como Chrome Developer Tools ou Firefox Developer Tools, observando o código-fonte original, incluindo os números de linha originais, números de coluna, nomes de função e identificadores que podem ter sido alterados durante a minificação ou transpilação.
Após compilar o código, ele ficará ilegível para humanos, pois foi adaptado para que o computador ocupe menos espaço para transferência pela rede e melhore o desempenho de execução.
Quando os arquivos JavaScript ou CSS compactados são vinculados de volta à sua fonte original, o navegador poderá mostrar a linha de código precisa na qual o erro está ocorrendo.
Isso torna a depuração muito mais fácil.
Existem três tipos de mapa de origem que você pode gerar, que satisfaça necessidades diferentes.
Mapa de origem embutido
Os mapas de origem inline são simplesmente URLs de dados que contêm o objeto JSON codificado em base64.
Mapa de origem externa
Um mapa de origem também pode ser colocado em um arquivo separado. É útil para uso em produção, pois o carregamento de mapas de origem é opcional.
Talvez você não queira gerar um mapa de origem para seu pacote de produção, pois isso facilita a inspeção de seu aplicativo. Ao desabilitar os mapas de origem, você está realizando uma espécie de ofuscação.
Mapa de origem oculto
Os mapas de origem ocultos fornecem apenas informações de rastreamento de pilha. Você pode conectá-los a um serviço de monitoramento para obter rastreamentos à medida que o aplicativo trava, permitindo que você corrija as situações problemáticas.
Como usar mapas de origem
Todos os navegadores modernos oferecem suporte completo para mapas de origem.
Se você estiver usando o Google Chrome, poderá ver facilmente os mapas de origem disponíveis clicando na guia "Fontes" nas ferramentas de desenvolvimento do Chrome.
Como visto na imagem abaixo, você pode inserir um ponto de interrupção em seu código original e as ferramentas de desenvolvimento do Chrome mapearão automaticamente esse ponto de interrupção para a linha minificada do arquivo de origem durante a execução.
As ferramentas de desenvolvedor para Chrome e Firefox têm suporte integrado para mapas de origem, tornando ainda mais fácil rastrear os arquivos compactados e depurar quaisquer erros.
Mapas de origem e Google Chrome
O Chrome é configurado de forma muito eficiente quando se trata de mapas de origem, pois o Google teve uma grande participação na especificação do mapa de origem. É bastante voltado para depuração e isso lhe dá uma ligeira vantagem nesse aspecto. O Chrome oferece uma extensão de depuração para mapas de origem inline e externos.
Mapas de origem e Mozilla Firefox
Ao usar as ferramentas de desenvolvedor do Firefox para mapeamento de origem, o processo é um pouco semelhante sem a adição da extensão diretamente no navegador. Isso permitiria o processo de ver o script não combinado e tornar a depuração muito mais fácil, da mesma forma que no Chrome.
Resumo dos mapas de origem
Os mapas de origem são realmente uma ferramenta útil para poder depurar o código de maneira fácil e eficiente, enquanto ainda é possível vincular de volta aos arquivos de origem originais e ver com mais clareza o que o navegador está executando.
Quando você combina o uso de mapas de origem e as ferramentas de desenvolvedor que o Chrome e o Firefox possuem, fica ainda mais fácil depurar e visualizar problemas diretamente.
