Sources: file, breakpoint e debugger
Durata: 50 minuti · Chrome o browser Chromium compatibile
Page, Workspace, Snippets, breakpoints, conditional breakpoints, step over/into/out, Scope e Call Stack. Gli strumenti di sviluppo permettono di osservare ciò che accade nel browser. Le opzioni possono variare tra versioni: se una scheda non compare, cercala nel menu » oppure More tools.
Che cosa osservare e perché
Usa gli strumenti solo su pagine che sei autorizzato a esaminare. La modifica di HTML, CSS o JavaScript in DevTools è in genere locale e temporanea: non equivale a modificare i file del sito. Una richiesta o un dato non presente non è necessariamente un errore.
LABORATORIO
Analizzare sources: file, breakpoint e debugger con Chrome DevTools
Procedura guidata, circa 20 minuti
Obiettivo: applicare le funzioni studiate su una pagina già disponibile nel browser. Occorrente: Chrome, DevTools e una pagina dimostrativa o del corso.
- Apri Sources e individua il riquadro Page.
- Trova uno script JavaScript caricato dalla pagina.
- Apri il file e individua i numeri di riga.
- Aggiungi un breakpoint cliccando sul numero di una riga eseguita da un evento.
- Esegui l’azione che richiama quella riga e osserva Paused.
- Esamina Scope e Call Stack; usa Step over e Resume.
- Disattiva il breakpoint per ripristinare il normale funzionamento.
Esercizio autonomo: ripeti l’analisi su una seconda pagina e produci una tabella con azione, scheda usata, dato osservato e interpretazione.
Verifica dei concetti
Che cosa consente di osservare questa lezione?
Le modifiche effettuate in DevTools vengono pubblicate sul sito?
Perché un pannello può apparire vuoto?
Come si recupera una scheda non visibile?
Che cosa va annotato nel rapporto finale?
Debug di TypeScript e framework con Source Maps
Collegare il codice JavaScript eseguito dal browser ai sorgenti originali di un progetto moderno.
Concetti e strumenti
- Bundler: Vite e Webpack possono trasformare e raggruppare i moduli; il browser esegue JavaScript, non direttamente TypeScript o JSX.
- Source Maps: file di mappatura che associano codice generato e sorgenti originali, quando disponibili e correttamente configurati.
- Breakpoint: si può impostare sul sorgente originale visualizzato in Sources; la posizione effettiva dipende dalla qualità della mappatura.
- Ignore List: evita di entrare durante lo step-debug in script di libreria o framework; alcune versioni rilevano automaticamente script di terze parti.
- Privacy: pubblicare Source Maps può rendere più facilmente consultabili parti del sorgente: la scelta va valutata dal responsabile del progetto.
Debug di TypeScript e framework con Source Maps
Procedura guidata con osservazioni verificabili
Obiettivo: Collegare il codice JavaScript eseguito dal browser ai sorgenti originali di un progetto moderno.
- Apri un’applicazione dimostrativa autorizzata costruita con Vite o un altro bundler e con Source Maps abilitate.
- In Settings → Preferences → Sources verifica che l’uso delle Source Maps JavaScript sia attivo (i nomi delle opzioni possono cambiare).
- Apri Sources, individua la struttura dei file originali, ad esempio un componente
.tsx,.jsxo.ts. - Imposta un breakpoint su un gestore di clic; interagisci con la pagina e verifica il punto in cui l’esecuzione si interrompe.
- Osserva Scope e Call Stack, poi prova Step into e Step over.
- In Settings → Ignore List, se disponibile, aggiungi una regola per i file di dipendenze e confronta il comportamento dello step-debug.
Risultato atteso: Un breakpoint attivo nel sorgente originale e una breve spiegazione della differenza tra codice sorgente e codice generato.
Se non funziona: controlla di aver selezionato la scheda corretta, ricarica la pagina e verifica che la funzione sia disponibile nella tua versione di Chrome. Non tutte le pagine espongono le stesse risorse.
Esercizio autonomo: Confronta lo stack prima e dopo l’Ignore List e descrivi perché il debug diventa più leggibile.