Ce instrumente și funcții folosești în Chrome DevTools pentru analiza și depanarea paginilor web?

În Chrome DevTools, pentru analiza și depanarea paginilor web, folosesc adesea următoarele instrumente și funcții:

• Elements — pentru vizualizarea și editarea DOM și CSS în timp real.
• Console — pentru executarea codului JavaScript și vizualizarea jurnalelor, erorilor.
• Network — pentru analizarea cererilor de rețea, timpii de încărcare a resurselor, verificarea răspunsurilor serverului.
• Sources — pentru depanarea JavaScript cu posibilitatea de a seta puncte de oprire.
• Performance — pentru profilarea performanței paginii, identificarea punctelor slabe.
• Application — pentru lucrul cu stocarea locală, cookie-uri, IndexedDB.
• Lighthouse — pentru auditul performanței, accesibilității și SEO.

De exemplu, pentru a urmări o problemă de încărcare, deschid fila Network, filtrez după tipul de resursă și verific starea și timpul de încărcare al fiecărui fișier.