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

Meggin Kearney

Paul Bakaus

Sofia Emelianova

Fai in modo che il codice lato client sia leggibile e facilmente eseguibile 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 preprocessori

Le mappe di origine dei preprocessori causano il caricamento da parte di DevTools dei file originali, oltre a quelli minimizzati.

Chrome eseguirà effettivamente il codice minimizzato, ma il riquadro Origini mostrerà il codice che hai autore. Puoi impostare punti di interruzione ed eseguire passaggi di codice nei file di origine e tutti gli errori, i log e i punti di interruzione verranno mappati automaticamente.

In questo modo ottieni l'aspetto del debug del codice così come l'hai scritto, a differenza del codice 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 tuo server web possa pubblicare mappe di origine.

Usa 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: terer
• Bundler e server di sviluppo: Webpack, Vite, esbuild e Parcel

Per un elenco esteso, vedi Mappe di origine: lingue, strumenti e altre informazioni.

Attiva le mappe di origine nelle Impostazioni

In Impostazioni > Preferenze > Origini, assicurati di selezionare Attiva le 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:

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

2. Per concentrarti solo sul codice che hai creato, raggruppa i file creati e distribuiti nella struttura ad albero dei file. Quindi espandi la sezione Creato e apri il file di origine originale nell'Editor.

   

3. Imposta un punto di interruzione come faresti normalmente. Ad esempio, un punto di log. 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. Lo stesso vale per i file CSS di cui è stato eseguito il deployment.

   

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

   

6. Modifica il tipo di punto di interruzione impostandolo su normale ed esegui di nuovo il codice. L'esecuzione viene messa in pausa questa volta.

   

   Nota che il riquadro Stack di chiamate mostra il nome del file originale e non di quello di cui è stato eseguito il deployment.

7. 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 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 stampato automaticamente il 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

#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 Source Map V3.

Il commento //# sourceURL=/path/to/source.file indica al browser di cercare il file di origine quando utilizzi eval(). Questo ti aiuta a assegnare un nome alle valutazioni, nonché agli script e agli stili incorporati.

Esegui un test su 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 dall'origine CoffeeScript.
4. Nella struttura dei file del riquadro Pagina, apri un nuovo file con il nome file personalizzato che hai inserito. Contiene il codice JavaScript compilato che include il commento // #sourceURL con il nome originale del file sorgente.
5. Per aprire il file di origine, fai clic sul link nella barra di stato dell'Editor.