Le mappe sorgente ti consentono di mantenere il codice leggibile e di eseguire il debug anche dopo averlo combinato e minimizzato, senza influire sul rendimento.
Quando utilizzi vari transpiler, minificatori e bundler, il codice di cui esegui il deployment è diverso da quello che scrivi. Per migliorare le prestazioni della rete, questi strumenti comprimono il codice in una singola riga, rimuovono i caratteri non necessari e accorciano le variabili.
Molti strumenti possono generare mappe sorgente da associare al codice.
Chrome DevTools legge sia il codice di cui è stato eseguito il deployment sia le mappe di origine e ti consente di eseguire il debug del codice come faresti normalmente, anche con i breakpoint.
Per comprendere meglio il funzionamento delle mappe di origine, consulta il visualizzatore delle mappe di origine.
Inoltre, le mappe di origine possono avere estensioni. Se sviluppi strumenti e framework, valuta la possibilità di supportarli. Consulta questo case study: un debug di Angular migliore con DevTools, in cui il team di DevTools e Angular ha migliorato l'esperienza di debug in DevTools supportando l'estensione x_google_ignoreList.
Per scoprire di più, vedi: