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

Para ver e trabalhar com o código-fonte original ao depurar o JavaScript em DevTools, em vez de ter que trabalhar com a versão compilada e minificada do código retornado pelo servidor Web, use mapas de origem.

O mapeamento de origem mantém seu código do lado do cliente legível e depurável, mesmo depois que seu processo de build compila e minimiza seu código e o combina em um único arquivo. Mapas de origem mapeiam seu código compilado e minificado para seus arquivos de código-fonte originais. Em DevTools, você pode ler e depurar seu código-fonte original familiar, em vez do código-fonte irreconhecível transformado e compilado.

Para usar mapas de origem, você deve usar uma ferramenta ao criar seu código que pode produzir mapas de origem. Há muitas ferramentas disponíveis, como:

• Sass ou PostCSS, que podem 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 transpilador Babel que pode produzir mapas de origem CSS e JavaScript.
• Criar ferramentas como Webpack, Rollup, Vite e Parcel, que também podem produzir mapas de origem.

Este artigo explica como habilitar mapas de origem no DevTools e como usá-los para depurar seu código. Ele não explica como produzir mapas de origem em seu processo de build. Para saber mais sobre como publicar mapas de origem no servidor de símbolos do Azure Artifacts, confira Depurar código original com segurança publicando mapas de origem no servidor de símbolos do Azure Artifacts.

Mapas de origem em DevTools

Mapas de origem das ferramentas de build fazem com que o DevTools carregue seus arquivos originais além dos arquivos extraídos e substitua o código minificado pelo código original. Por exemplo:

• Na ferramenta Fontes , você pode ver os arquivos originais e definir pontos de interrupção neles.
• Na ferramenta Desempenho , você pode ver seus nomes de função originais no gráfico de chamas.
• Na ferramenta Console , você pode ver seus nomes de arquivo originais e números de linha em rastreamentos de pilha.

Enquanto isso, o Microsoft Edge realmente executa seu código minificado para renderizar a página da Web. Os mapas de origem são usados apenas pelo DevTools e somente para exibir o código-fonte para desenvolvedores.

DevTools sabe como carregar um mapa de origem quando um //# sourceMappingURL= comentário é encontrado em um arquivo compilado. Por exemplo, o comentário a seguir diz a DevTools para carregar o mapa de origem de http://example.com/path/to/your/sourcemap.map:

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

Habilitar mapas de origem no DevTools

Os mapas de origem estão habilitados por padrão.

Para garantir que os mapas de origem estejam habilitados:

1. Para abrir o DevTools, no Microsoft Edge, clique com o botão direito do mouse em uma página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS).

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

3. Na página Preferências , na seção Fontes , verifique se a caixa de seleção Habilitar mapas de origem JavaScript e a caixa de seleção Habilitar mapas de origem do CSS estão selecionadas:

   

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

Habilitar o carregamento de mapas de origem de caminhos de arquivo remoto

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

Para habilitar o carregamento de mapas de origem de caminhos de arquivo:

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

2. Na página Preferências , na seção Fontes , selecione a caixa de seleção Permitir que DevTools carregue recursos, como mapas de origem, de caminhos de arquivo remotos. Desabilitado por padrão por motivos de segurança.

Depuração com mapas de origem

Ao depurar seu código e quando os mapas de origem estão habilitados, os mapas de origem são usados em vários lugares:

• Na ferramenta Console , links de mensagens de log para arquivos de origem vão para os arquivos originais, não para os arquivos compilados.

• Ao passar pelo código na ferramenta Fontes , os arquivos originais são exibidos no painel Navegador à esquerda. Quando você abre um arquivo original, seu código original é exibido e você pode definir pontos de interrupção nele. Para saber mais sobre a depuração com pontos de interrupção na ferramenta Fontes , consulte Pausar código com pontos de interrupção.

• Na ferramenta Fontes , os links para arquivos de origem que aparecem no painel Pilha de Chamadas do Depurador abrem os arquivos de origem originais.

• Na ferramenta Desempenho , o gráfico de chama exibe os nomes de função originais, não os nomes de função compilados.

Confira também

• Depurar com segurança o código original publicando mapas de origem para o servidor de símbolos do Azure Artifacts
• Depurar com segurança o código original usando mapas de origem do servidor de símbolos do Azure Artifacts
• Ferramenta Monitor do Mapas de Origem

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Internacional de Atribuição do Creative Commons 4.0. A página original é encontrada aqui e é de autoria de Meggin Kearney (Technical Writer) e Paul Bakaus (Open Web Developer Advocate, Google: Tools, Performance, Animation e UX).

Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.