Quali strumenti e funzioni utilizzi in Chrome DevTools per analizzare e debugare le pagine web?

In Chrome DevTools, per analizzare e debugare le pagine web, utilizzo spesso i seguenti strumenti e funzioni:

• Elements — per visualizzare e modificare il DOM e CSS in tempo reale.
• Console — per eseguire codice JavaScript e visualizzare log, errori.
• Network — per analizzare le richieste di rete, i tempi di caricamento delle risorse, verificare le risposte del server.
• Sources — per debug JavaScript con la possibilità di impostare punti di interruzione.
• Performance — per profilare le prestazioni della pagina, identificare i colli di bottiglia.
• Application — per lavorare con lo storage locale, i cookie, IndexedDB.
• Lighthouse — per audit delle prestazioni, accessibilità e SEO.

Ad esempio, per tracciare un problema di caricamento, apro la scheda Network, filtro per tipo di risorsa e controllo lo stato e il tempo di caricamento di ogni file.