Mantieni il codice lato client leggibile e di cui è possibile eseguire il debug anche dopo averlo combinato, minimizzato o compilato. Utilizza le mappe sorgente per mappare il codice sorgente al codice compilato nel riquadro Origini.
Inizia a utilizzare i preprocessori
Le mappe di origine dei preprocessori fanno sì che DevTools carichi i file originali oltre a quelli minimizzati.
Chrome eseguirà effettivamente il codice minimizzato, ma nel riquadro Origini verrà visualizzato il codice che hai creato. Puoi impostare punti di interruzione e analizzare il codice nei file sorgente; tutti gli errori, i log e i punti di interruzione verranno mappati automaticamente.
Questo dà l'aspetto di eseguire il debug del codice così come lo hai scritto, al contrario di quello che viene pubblicato dal tuo server di sviluppo ed eseguito dal browser.
Per utilizzare le mappe di origine nel riquadro Origini:
- Utilizza solo i preprocessori in grado di produrre mappe di origine.
- Verifica che il server web sia in grado di pubblicare mappe di origine.
Utilizza un preprocessore supportato
I preprocessori comuni utilizzati in combinazione con le mappe di origine includono, a titolo esemplificativo:
- Transpiler: Babel
- Compilatori: TypeScript e Dart
- Minificatori: terser
- Bundler e server di sviluppo: Webpack, Vite, esbuild e Parcel
Per un elenco esteso, consulta la sezione Mappe di origine: lingue, strumenti e altre informazioni.
Attiva le mappe di origine nelle Impostazioni
In 
Impostazioni > Preferenze > Origini, assicurati di selezionare 
Attiva mappe di origine JavaScript.
Controlla se le mappe di origine sono state caricate correttamente
Consulta la sezione 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 fonti del tuo sito web nel riquadro Fonti.
Per concentrarti solo sul codice che crei, raggruppa i file creati e distribuiti nell'albero dei file. Quindi, espandi la sezione
Creato e apri il file di origine originale nell'Editor.
Imposta un punto di interruzione come faresti abitualmente. Ad esempio, un punto di log. quindi esegui il codice.
Nota che l'Editor inserisce un link al file di cui è stato eseguito il deployment nella barra di stato in basso. Lo stesso avviene per i file CSS di cui è stato eseguito il deployment.
Apri il riquadro a scomparsa Console. In questo esempio, accanto al messaggio del punto di log, la console mostra un link al file originale, non a quello di cui è stato eseguito il deployment.
Modifica il tipo di punto di interruzione in uno normale ed esegui di nuovo il codice. Questa volta l'esecuzione viene messa in pausa.
Nota che il riquadro Stack chiamate mostra il nome del file originale e non quello di cui è stato eseguito il deployment.
Nella barra di stato nella parte inferiore dell'Editor, fai clic sul link al file di cui è stato eseguito il deployment. Il riquadro Origini ti porta al file corrispondente.
Quando apri un file di cui hai eseguito il deployment, DevTools ti avvisa se rileva il commento //# sourceMappingURL e il file originale associato.
Nota che l'Editor ha eseguito automaticamente la stampa preliminare del file di cui è stato eseguito il deployment. In realtà, contiene tutto il codice in un'unica riga, ad eccezione del commento //# sourceMappingURL.
Assegna un nome alle chiamate eval() con #sourceURL
La #sourceURL consente di semplificare il debug
per la gestione delle chiamate eval(). Questo helper sembra molto simile alla proprietà //# sourceMappingURL. Per ulteriori informazioni, consulta la specifica della mappa di origine V3.
Il commento //# sourceURL=/path/to/source.file indica al browser di cercare il file di origine quando utilizzi eval(). In questo modo puoi assegnare un nome alle valutazioni, agli script e agli stili incorporati.
Testalo su questa pagina dimostrativa:
- Apri DevTools e vai al riquadro Origini.
- Nella pagina, inserisci un nome file arbitrario nel campo di immissione Assegna un nome al codice:.
- Fai clic sul pulsante Compila. Viene visualizzato un avviso con la somma valutata dall'origine CoffeeScript.
- Nella struttura ad albero dei file nel riquadro Pagina, apri un nuovo file con il nome file personalizzato che hai inserito. Contiene il codice JavaScript compilato che contiene il commento
// #sourceURLcon il nome originale del file sorgente. - Per aprire il file di origine, fai clic sul link nella barra di stato dell'Editor.
