Mapear o código processado para o código fonte original, para depuração

Para ver e trabalhar com o código fonte original quando estiver a depurar JavaScript em DevTools, em vez de ter de trabalhar com a versão compilada e minimizada do código que é devolvido pelo servidor Web, utilize mapas de origem.

O mapeamento de origem mantém o código do lado do cliente legível e depurável, mesmo depois de o processo de compilação compilar e minimizar o código e combiná-lo num único ficheiro. Os mapas de origem mapeiam o código compilado e minificado para os seus ficheiros de código fonte originais. Em DevTools, pode ler e depurar o código fonte original familiar, em vez do código transformado e compilado irreconhecíveis.

Para utilizar mapas de origem, tem de utilizar uma ferramenta quando criar o código que pode produzir mapas de origem. Existem muitas ferramentas disponíveis, tais como:

• Sass ou PostCSS, que pode produzir mapas de origem para CSS.
• O compilador TypeScript , que compila TypeScript para JavaScript e pode produzir mapas de origem para depurar o código TypeScript original.
• O transpiler Babel que pode produzir mapas de origem CSS e JavaScript.
• Crie ferramentas como o Webpack, Rollup, Vite e Parcel, que também podem produzir mapas de origem.

Este artigo explica como ativar os mapas de origem nas DevTools e como utilizá-los para depurar o código. Não explica como produzir mapas de origem no processo de compilação. Para saber mais sobre como publicar mapas de origem no servidor de símbolos dos Artefactos do Azure, veja Depurar código original de forma segura ao publicar mapas de origem no servidor de símbolos dos Artefactos do Azure.

Mapas de origem em DevTools

Os mapas de origem das ferramentas de compilação fazem com que as DevTools carreguem os seus ficheiros originais para além dos ficheiros minificados e substituam o código mínimo pelo código original. Por exemplo:

• Na ferramenta Origens , pode ver os ficheiros originais e definir pontos de interrupção nos mesmos.
• Na ferramenta Desempenho , pode ver os nomes das funções originais no gráfico de chama.
• Na ferramenta Consola , pode ver os nomes de ficheiro originais e os números de linha nos rastreios de pilha.

Entretanto, o Microsoft Edge executa o seu código minificado para compor a página Web. Os mapas de origem só são utilizados pelas DevTools e apenas para apresentar código fonte aos programadores.

O DevTools sabe como carregar um mapa de origem quando um //# sourceMappingURL= comentário é encontrado num ficheiro compilado. Por exemplo, o comentário seguinte indica ao DevTools para carregar o mapa de origem a partir de http://example.com/path/to/your/sourcemap.map:

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

Ativar mapas de origem em DevTools

Os mapas de origem estão ativados por predefinição.

Para se certificar de que os mapas de origem estão ativados:

1. Para abrir o DevTools, no Microsoft Edge, clique com o botão direito do rato numa página Web e, em seguida, selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS).

2. Em DevTools, clique em Personalizar e controlar DevTools () >Definições () >Preferências.

3. Na página Preferências , na secção Origens , certifique-se de que a caixa de verificação Ativar mapas de origem JavaScript e a caixa de verificação Ativar mapas de origem CSS estão selecionadas:

   

4. No canto superior direito de Definições, clique no botão Fechar ().

Ativar o carregamento de mapas de origem a partir de caminhos de ficheiro remotos

Por predefinição, o DevTools não carrega mapas de origem quando o URL do mapa de origem é um caminho de ficheiro remoto, como quando o URL do mapa de origem começa com file:// e visa um ficheiro que não está no dispositivo atual.

Para ativar o carregamento de mapas de origem a partir de caminhos de ficheiros:

1. Em DevTools, clique em Personalizar e controlar DevTools () >Definições () >Preferências.

2. Na página Preferências , na secção Origens , selecione a caixa de verificação Permitir que as DevTools carreguem recursos, como mapas de origem, a partir de caminhos de ficheiro remotos. Desativado por predefinição por motivos de segurança.

Depurar com mapas de origem

Ao depurar o código e quando os mapas de origem estão ativados, os mapas de origem são utilizados em vários locais:

• Na ferramenta Consola , as ligações das mensagens de registo aos ficheiros de origem vão para os ficheiros originais e não para os ficheiros compilados.

• Ao percorrer o código na ferramenta Origens , os ficheiros originais são apresentados no painel Navegador à esquerda. Quando abre um ficheiro original, o código original é apresentado e pode definir pontos de interrupção no mesmo. Para saber mais sobre a depuração com pontos de interrupção na ferramenta Origens , veja Colocar código em pausa com pontos de interrupção.

• Na ferramenta Origens , as ligações para ficheiros de origem que aparecem na Pilha de Chamadas do painel Depurador abrem os ficheiros de origem originais.

• Na ferramenta Desempenho , o gráfico de chama apresenta os nomes das funções originais e não os nomes das funções compiladas.

Confira também

• Depurar código original de forma segura ao publicar mapas de origem no servidor de símbolos dos Artefactos do Azure
• Depurar de forma segura o código original com os mapas de origem do servidor de símbolos dos Artefactos do Azure
• Ferramenta de Monitorização de Mapas de Origem

Observação

Partes desta página são modificações baseadas no trabalho criado e partilhado pela Google e utilizado de acordo com os termos descritos na Licença Internacional Creative Commons Attribution 4.0. A página original é encontrada aqui e é da autoria de Meggin Kearney e Paul Bakaus.

Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.