Quali strumenti e schede in Chrome DevTools utilizzi per il debug e l'analisi delle pagine web?

Per il debug e l'analisi delle pagine web in Chrome DevTools, utilizzo di solito le seguenti schede:

• Elements — per visualizzare e modificare la struttura DOM e gli stili CSS in tempo reale.
• Console — per visualizzare i log, eseguire codice JavaScript e individuare errori.
• Network — per analizzare le richieste di rete, verificare il caricamento delle risorse, i tempi di risposta e gli stati.
• Sources — per debug del codice JavaScript, impostare punti di interruzione e eseguire passo passo.
• Performance — per profilare le prestazioni della pagina, analizzare i tempi di caricamento e rendering.
• Application — per lavorare con lo storage locale, i cookie, IndexedDB e la cache.
• Security — per verificare la sicurezza della connessione e dei certificati.

Esempio: se la pagina impiega molto a caricarsi, apro la scheda Network, ordino le richieste per tempo e guardo quali risorse rallentano il caricamento.