Mantieni il codice lato client leggibile e deboggabile anche dopo averlo combinato, minimizzato o compilato. Utilizza le mappe di origine per mappare il codice sorgente al codice compilato nel riquadro Origini.
Inizia a utilizzare i pre-processori
Le mappe di origine dei pre-processori fanno sì che DevTools carichi i file originali oltre a quelli minimizzati.
Chrome eseguirà effettivamente il codice minimizzato, ma il riquadro Origini mostrerà il codice creato. Puoi impostare i punti di interruzione ed eseguire il codice nei file di origine. Tutti gli errori, i log e i punti di interruzione verranno mappati automaticamente.
In questo modo, hai la sensazione di eseguire il debug del codice così come lo hai scritto, a differenza del codice pubblicato dal server di sviluppo ed eseguito dal browser.
Per utilizzare le mappe delle origini nel riquadro Origini:
- Utilizza solo i pre-processori che possono produrre mappe di origine.
- Verifica che il server web possa pubblicare le mappe di origine.
Utilizzare un preprocessore supportato
I preprocessori comuni utilizzati in combinazione con le mappe di origine includono, a titolo esemplificativo:
- Transpiler: Babel
- Compilatori: TypeScript e Dart
- Minimizzatori: terser
- Bundler e server di sviluppo: Webpack, Vite, esbuild e Parcel
Per un elenco completo, vedi Mappe delle origini: lingue, strumenti e altre informazioni.
Attivare le mappe di origine nelle Impostazioni
In 
Impostazioni > Preferenze > Origini, assicurati di selezionare 
Mappe sorgente JavaScript.
Verificare se le mappe di origine sono state caricate correttamente
Consulta Risorse per sviluppatori: visualizzare e caricare manualmente le mappe di origine.
Debug con le mappe di origine
Con le mappe di origine pronte e attivate, puoi:
- Apri le origini del tuo sito web nel riquadro Origini.
Per concentrarti solo sul codice che crei, raggruppa i file creati e di cui è stato eseguito il deployment nella struttura ad albero dei file. Espandi la sezione
Autore e apri il file di origine originale nell'Editor.