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

Om webpagina's te debuggen en te analyseren in Chrome DevTools, gebruik ik meestal de volgende tabbladen:

• Elements — om de DOM-structuur en CSS-stijlen in realtime te bekijken en te wijzigen.
• Console — om logs weer te geven, JavaScript-code uit te voeren en fouten op te sporen.
• Network — om netwerkverzoeken te analyseren, het laden van bronnen te controleren, responstijden en statussen te bekijken.
• Sources — om JavaScript-code te debuggen, breakpoints te zetten en stapsgewijs uit te voeren.
• Performance — om de prestaties van de pagina te profileren, laadtijden en rendering te analyseren.
• Application — om te werken met lokale opslag, cookies, IndexedDB en cache.
• Security — om de beveiliging van de verbinding en certificaten te controleren.

Voorbeeld: als de pagina lang duurt om te laden, open ik het Network-tabblad, sorteer de verzoeken op tijd en kijk ik welke bronnen het laden vertragen.