Le mappe di origine ti consentono di mantenere il codice leggibile e su cui è possibile eseguire il debug anche dopo averlo combinato e minimizzato, senza influire sulle prestazioni.
Quando utilizzi vari transpiler, minifier e bundler, il codice implementato è diverso da quello creato. 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 di origine 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 punti di interruzione.
Per capire meglio come funzionano le mappe di origine, controlla il visualizzatore delle mappe di origine.
Inoltre, le mappe di origine possono avere estensioni. Se crei strumenti e framework, valuta la possibilità di supportarli. Dai un'occhiata a questo Case study: Better Angular Debugging with DevTools, in cui il team DevTools e Angular hanno migliorato l'esperienza di debug in DevTools supportando l'estensione x_google_ignoreList.
Per saperne di più, consulta: