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 JavaScript no DevTools, em vez de precisar trabalhar com a versão compilada e reduzida do código retornada pelo servidor Web, use mapas de origem.

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

Para usar mapas de origem, você deve usar uma ferramenta ao criar seu código que possa produzir mapas de origem. Existem 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.
• Crie 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 compilação. Para saber mais sobre como publicar mapas de origem para o servidor de símbolos do Azure Artifacts, consulte Depurar com segurança o código original publicando mapas de origem no servidor de símbolos do Azure Artifacts.

Mapas de origem no DevTools

Os mapas de origem das ferramentas de build fazem com que o DevTools carregue seus arquivos originais, além dos arquivos minificados, 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 os nomes de função originais no gráfico de degradê.
• Na ferramenta Console , você pode ver os nomes de arquivo originais e os 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 apenas para exibir o código-fonte aos desenvolvedores.

O 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 ao 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 sã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. No DevTools, clique em Personalizar e controlar o DevTools () >Configurações () >Preferências.

3. Na página Preferências , na seção Fontes , verifique se as caixas de seleção Ativar mapas de origem JavaScript e Habilitar mapas de origem CSS estão marcadas:

   

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

Habilitar o carregamento de mapas de origem de caminhos de arquivos remotos

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 e file:// direciona um arquivo que não está no dispositivo atual.

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

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

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

Depurar 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 locais:

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

• Ao percorrer o código na ferramenta Códigos-fonte , 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 na Pilha de Chamadas do painel Depurador abrem os arquivos de origem originais.

• Na ferramenta Desempenho , o gráfico de degradê 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 de Mapas de Origem

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.