Approfondimento facoltativo – 50 minuti. Codice originale, bundler e Ignore List. Questa attività amplia il percorso principale senza sostituire le lezioni obbligatorie.
Concetti e strumenti
Source Maps
I file source map associano il codice JavaScript distribuito a quello sorgente. Possono consentire il debug di TypeScript e JSX originali quando le mappe sono disponibili e correttamente pubblicate.
Bundler
Vite e Webpack possono trasformare e raggruppare moduli. I nomi dei percorsi visualizzati in Sources dipendono dalla configurazione del progetto.
Ignore List
L’Ignore List permette di non fermarsi o non attraversare codice di librerie durante alcuni passaggi del debugger; il comportamento varia secondo la versione di Chrome.
LABORATORIO
Source Maps e debug di TypeScript
Procedura guidata e osservazione dei risultati
Obiettivo: codice originale, bundler e ignore list. Usa esclusivamente pagine, dispositivi e processi per i quali hai autorizzazione.
- Apri un’applicazione dimostrativa che distribuisce source map.
- Apri Sources e cerca i file originali nel navigator.
- Imposta un breakpoint in una funzione sorgente.
- Esegui l’azione nella pagina che richiama la funzione.
- Confronta call stack e file generato; configura Ignore List per una libreria se disponibile.
Risultato atteso: una tabella con azione, pannello usato, evidenza osservata e spiegazione tecnica.
Se non funziona: controlla la versione di Chrome, i permessi e la disponibilità della funzione; non tutte le pagine espongono gli stessi dati.
Esercizio autonomo: ripeti su un secondo esempio autorizzato e confronta due osservazioni, motivando le differenze.