Esegui il debug del codice originale anziché il deployment con le mappe di origine

Meggin Kearney

Paul Bakaus

Sofia Emelianova

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.

Nota: ti consigliamo di consultare anche la sezione Mappe di origine CSS.

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

Nota: questo tutorial utilizza questa demo come esempio.

Con le mappe di origine pronte e attivate, puoi:

1. Apri le origini del tuo sito web nel riquadro Origini.

2. 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.

   

3. Imposta un punto di interruzione come faresti normalmente. Ad esempio, un logpoint. Poi esegui il codice.

   

4. Tieni presente che l'editor inserisce un link al file di cui è stato eseguito il deployment nella barra di stato in basso. Analogamente, lo fa per i file CSS di cui è stato eseguito il deployment.

   

5. Apri il riquadro 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.

   

6. Modifica il tipo di punto di interruzione in uno standard ed esegui di nuovo il codice. Questa volta l'esecuzione viene messa in pausa.

   

   Tieni presente che il riquadro Call Stack mostra il nome del file originale e non quello di quello di cui è stato eseguito il deployment.

7. Nella barra di stato in fondo all'editor, fai clic sul link al file di cui è stato eseguito il deployment. Il riquadro Origini ti indirizza al file corrispondente.

Quando apri un file di cui è stato eseguito il deployment, DevTools ti avvisa se ha trovato il commento //# sourceMappingURL e il file originale associato.

Tieni presente che l'editor ha eseguito automaticamente la stampa in formato leggibile del file di cui è stato eseguito il deployment. In realtà, contiene tutto il codice in una singola riga, tranne il commento //# sourceMappingURL.

Assegnare un nome alle chiamate di eval() con #sourceURL

#sourceURL ti consente di semplificare il debug quando gestisci le chiamate eval(). Questo helper è 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 sorgente quando utilizzi eval(). In questo modo puoi assegnare un nome alle valutazioni e agli script e agli stili in linea.

Provalo in questa pagina dimostrativa:

1. Apri DevTools e vai al riquadro Origini.
2. Nella pagina, inserisci un nome file arbitrario nel campo di immissione Assegna un nome al codice.
3. Fai clic sul pulsante Compila. Viene visualizzato un avviso con la somma valutata dal codice sorgente CoffeeScript.
4. 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 con il commento // #sourceURL e il nome originale del file sorgente.
5. Per aprire il file di origine, fai clic sul link nella barra di stato dell'editor.