Mantenha o código no lado do cliente legível e depurável mesmo depois de combiná-lo, minificar ou compilar. Use mapas de origem para mapear o código-fonte para o código compilado no painel Origens.
Começar a usar os pré-processadores
Os mapas de origem dos pré-processadores fazem com que as Ferramentas do desenvolvedor carreguem os arquivos originais e minificados.
O Chrome vai executar o código minimizado, mas o painel Sources vai mostrar 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 aparência de depuração do código conforme você o escreveu, em vez de um código que é enviado 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 compatível
Os pré-processadores comuns usados em conjunto 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 mais extensa, consulte Mapas de origem: idiomas, ferramentas e outras informações.
Ativar mapas de origem nas Configurações
Em 
Configurações > Preferências > Fontes, marque 
Mapas de origem do JavaScript.
Verificar se os mapas de origem foram carregados
Consulte Recursos para desenvolvedores: visualizar e carregar mapas de origem manualmente.
Depurar com mapas de origem
Com os mapas de origem prontos e ativados, é possível fazer o seguinte:
- Abra as origens do seu site no painel Origens.
Para se concentrar apenas no código que você criou, agrupe os arquivos criados e implantados na árvore de arquivos. Em seguida, abra a seção
Authored e abra o arquivo de origem original no Editor.