Mantenha o código do lado do cliente legível e depurável mesmo depois de combinar, minificar ou compilar reimplantá-lo. 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 dos pré-processadores fazem com que o DevTools carregue seus arquivos originais, além dos minificados.
O Chrome vai executar o código minificado, mas o painel Fontes vai mostrar o código que você criou. É possível definir pontos de interrupção e percorrer o código nos arquivos de origem. Todos os erros, registros e pontos de interrupção serão mapeados automaticamente.
Isso dá a aparência de depuração do código enquanto você o escreve, em oposição ao código que é fornecido pelo seu servidor de desenvolvimento e executado pelo navegador.
Para usar os 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 compatível
Os pré-processadores comuns usados em combinação com mapas de origem incluem, entre outros:
- Transcompiladores: Babel
- Compiladores: TypeScript e Dart
- Minimizadores: terser
- Bundlers e servidores de desenvolvimento: Webpack, Vite, esbuild e Parcel
Para ver uma lista mais ampla, consulte Mapas de origem: idiomas, ferramentas e outras informações.
Ativar mapas de origem em "Configurações"
Em 
Configurações > Preferências > Origens, confira os 
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 Origens.
Para se concentrar apenas no código criado por você, agrupe arquivos criados e implantados na árvore de arquivos. Em seguida, expanda a seção
Authored e abra o arquivo de origem original 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. O mesmo ocorre com 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 regular e execute o código novamente. Desta vez, a execução é pausada.
Observe que o painel Call Stack mostra o nome do arquivo original, e 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.
Ao abrir qualquer arquivo implantado, o DevTools notifica 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.
Nomeie as 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.
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 pelo código do CoffeeScript.
- Na árvore de arquivos do 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.
