Mantenha o código do lado do cliente legível e depurável mesmo depois de combinado, minificado ou compilado. Use mapas de origem para mapear seu código-fonte para o código compilado no painel Fontes.
Introdução aos pré-processadores
Os mapas de origem de pré-processadores fazem com que o DevTools carregue os arquivos originais, além dos minificados.
O Chrome executa o código minimizado, mas o painel Fontes mostra o código que você criou. É possível definir pontos de interrupção e percorrer o código nos arquivos de origem, e todos os erros, registros e pontos de interrupção serão mapeados automaticamente.
Isso dá a você a aparência de depuração do código que foi escrito, ao contrário do código disponibilizado pelo servidor de desenvolvimento e executado pelo navegador.
Para usar mapas de origem no painel Origens:
- Use apenas os pré-processadores que podem produzir mapas de origem.
- Verifique se o servidor da Web pode exibir mapas de origem.
Usar um pré-processador com suporte
Os pré-processadores comuns usados em combinação com mapas de origem incluem, entre outros:
- Transpiladores: Babel
- Compiladores: TypeScript e Dart
- Minificadores: terser
- Bundlers e servidores de desenvolvimento: Webpack, Vite, esbuild e Parcel
Para uma lista estendida, consulte Mapas de origem: idiomas, ferramentas e outras informações.
Ativar mapas de origem nas Configurações
Em 
Configurações > Preferências > Fontes, marque 
Ativar mapas de origem JavaScript.
Verificar se os mapas de origem foram carregados
Consulte Recursos para desenvolvedores: visualizar e carregar mapas de origem manualmente.
Como depurar com mapas de origem
Com os mapas de origem prontos e ativados, você pode fazer o seguinte:
- Abra as fontes do seu site no painel Fontes.
Para se concentrar apenas no código que você criou, agrupe os arquivos criados e implantados na árvore de arquivos. Em seguida, expanda a seção
Criado e abra o arquivo de origem no Editor.
Defina um ponto de interrupção normalmente. Por exemplo, um logpoint. Em seguida, execute o código.
Observe que o Editor coloca um link para o arquivo implantado na barra de status, na parte de baixo. Da mesma forma, isso é feito para arquivos CSS implantados.
Abra a gaveta Console. Neste exemplo, ao lado da mensagem do logpoint, o console mostra um link para o arquivo original, não para o implantado.
Mude o tipo de ponto de interrupção para um normal e execute o código novamente. A execução pausa desta vez.
Observe que o painel Call Stack mostra o nome do arquivo original, não o implantado.
Na barra de status na parte de baixo do Editor, clique no link para o arquivo implantado. O painel Sources leva você ao arquivo correspondente.
Quando você abre qualquer arquivo implantado, o DevTools avisa se encontrou o comentário //# sourceMappingURL e o arquivo original associado.
Observe que o Editor editou automaticamente o arquivo implantado. Na realidade, ele contém todo o código em uma única linha, exceto o comentário //# sourceMappingURL.
Nomear chamadas eval() com #sourceURL
O #sourceURL permite simplificar a depuração
ao lidar com chamadas eval(). Esse auxiliar é muito semelhante à propriedade //# sourceMappingURL. Para mais informações, consulte a especificação do mapa de origem V3.
O comentário //# sourceURL=/path/to/source.file instrui o navegador a procurar o arquivo de origem quando você usa eval(). Isso ajuda a nomear suas avaliações e scripts e estilos inline.
Faça o teste nesta página de demonstração:
- Abra o DevTools e acesse o painel Sources.
- Na página, insira um nome de arquivo arbitrário no campo de entrada Nomeie seu código:.
- Clique no botão Compile. Um alerta é exibido com a soma avaliada da origem do CoffeeScript.
- Na árvore de arquivos no painel Página, abra um novo arquivo com o nome personalizado que você digitou. Ele contém o código JavaScript compilado que tem o comentário
// #sourceURLcom o nome original do arquivo de origem. - Para abrir o arquivo de origem, clique no link na barra de status do Editor.
