Welke tools en functies gebruik je in Chrome DevTools voor het analyseren en debuggen van webpagina's?

In Chrome DevTools gebruik ik vaak de volgende tools en functies voor het analyseren en debuggen van webpagina's:

• Elements — om de DOM en CSS in realtime te bekijken en te bewerken.
• Console — om JavaScript-code uit te voeren en logs, fouten te bekijken.
• Network — om netwerkverzoeken te analyseren, laadtijden van bronnen te bekijken, serverantwoorden te controleren.
• Sources — om JavaScript te debuggen met de mogelijkheid om breakpoints te plaatsen.
• Performance — om de prestaties van de pagina te profileren, knelpunten te identificeren.
• Application — om te werken met lokale opslag, cookies, IndexedDB.
• Lighthouse — om de prestaties, toegankelijkheid en SEO te auditen.

Bijvoorbeeld, om een laadprobleem te traceren, open ik het Network-tabblad, filter op type bron en bekijk ik de status en laadtijd van elk bestand.