Strumenti per sviluppatori: apertura e utilizzo di DevTools

Ogni browser moderno include un insieme integrato di strumenti per sviluppatori. I DevTools consentono di ispezionare HTML e CSS, eseguire il debug di JavaScript, analizzare le prestazioni, monitorare le richieste di rete e molto altro, tutto senza lasciare il browser.

Apra i DevTools con F12 (Windows/Linux) o Cmd+Option+I (Mac). Può anche fare clic con il pulsante destro del mouse su un elemento e scegliere Ispeziona. La scorciatoia Ctrl+Shift+J / Cmd+Option+J apre direttamente la Console.

Il pannello Elements mostra l'albero DOM in tempo reale. Faccia clic su un elemento per selezionarlo e visualizzarne gli stili calcolati nel riquadro Styles. Può fare doppio clic per modificare HTML o valori CSS in tempo reale: le modifiche sono immediate, ma non vengono salvate nel file.

Nel riquadro Styles, faccia clic sul valore di una proprietà per modificarlo. Aggiunga nuove regole con il pulsante +. Utilizzi le caselle di controllo per disabilitare le regole. È il modo più rapido per creare prototipi CSS senza passare all'editor.

La Console mostra messaggi registrati, avvisi ed errori. È anche possibile digitare direttamente JavaScript ed eseguirlo. Utilizzi console.log(), console.warn(), console.error() e console.table() per visualizzare dati durante il debug.

Il pannello Network mostra ogni richiesta HTTP effettuata dalla pagina. Selezioni una richiesta per visualizzarne le intestazioni, visualizzare in anteprima il corpo della risposta e controllare il diagramma a cascata dei tempi. Filtri per tipo: XHR/Fetch, JS, CSS, Images, Fonts.

Ogni richiesta mostra: Queued, DNS Lookup, Initial Connection, SSL, Request Sent, Waiting (TTFB) e Content Download. TTFB (Time To First Byte) riflette il tempo di risposta del server.

Utilizzi il menu a discesa per la limitazione della velocità nel pannello Network, così da simulare condizioni di rete 3G lenta o offline. In questo modo può individuare problemi di prestazioni invisibili con una connessione a banda larga veloce e creare esperienze adatte anche agli utenti con connessioni lente.

Faccia clic sull'icona del dispositivo (Ctrl+Shift+M / Cmd+Shift+M) per accedere alla Modalità dispositivo. È possibile simulare viewport mobili, DPR, eventi touch e condizioni di rete. Scelga tra preset come iPhone 14 oppure imposti una larghezza personalizzata.

Il pannello Sources consente di leggere i file JavaScript e impostare punti di interruzione. Un punto di interruzione sospende l'esecuzione, permettendo di esaminare i valori delle variabili e lo stack delle chiamate e di avanzare nel codice riga per riga con F10 (esecuzione oltre) e F11 (esecuzione interna).

Aggiunga un punto di interruzione facendo clic sul numero di riga in Sources. Quando l'esecuzione si interrompe, passi il mouse sulle variabili per visualizzarne i valori oppure le digiti nella Console. Utilizzi il riquadro Call Stack per vedere quali funzioni hanno portato a questo punto.

Quale pannello di DevTools mostra tutte le richieste HTTP effettuate dalla pagina, inclusi i relativi codici di stato e tempi di risposta?

Elements: ispezioni e modifichi il DOM in tempo reale. Console: registri ed esegua JavaScript. Network: monitori il traffico HTTP. Sources: imposti punti di interruzione ed esegua il debug. Device Mode: verifichi i layout responsive. Padroneggiare questi quattro pannelli trasformerà il flusso di lavoro di debugging.