Milliseid tööriistu ja vahelehti kasutad Chrome DevTools'is veebilehtede silumiseks ja analüüsimiseks?

Chrome DevTools-iga veebilehtede silumiseks ja analüüsimiseks kasutan tavaliselt järgmisi vahelehti:

• Elements — DOM-struktuuri ja CSS-tyylide reaalajas vaatamiseks ja muutmiseks.
• Console — logide kuvamiseks, JavaScript-koodi käivitamiseks ja vigade tuvastamiseks.
• Network — võrgupäringute analüüsimiseks, ressursside laadimise kontrollimiseks, vastusaja ja oleku kontrollimiseks.
• Sources — JavaScript-koodi silumiseks, peatamispunktide seadmiseks ja samm-sammult käivitamiseks.
• Performance — lehe jõudluse profiili koostamiseks, laadimis- ja renderdamisaegade analüüsimiseks.
• Application — tööks kohaliku salvestusruumi, küpsiste, IndexedDB ja vahemäluga.
• Security — ühenduse ja sertifikaatide turvalisuse kontrollimiseks.

Näide: kui leht laadib kaua, avan Network vahelehe, sorteerin päringud aja järgi ja vaatan, millised ressursid aeglustavad laadimist.