Какви инструменти и раздели в Chrome DevTools използваш за отстраняване на грешки и анализ на уеб страници?

За отстраняване на грешки и анализ на уеб страници в Chrome DevTools обикновено използвам следните раздели:

• Elements — за преглед и промяна на структурата на DOM и CSS стиловете в реално време.
• Console — за показване на логове, изпълнение на JavaScript код и откриване на грешки.
• Network — за анализ на мрежовите заявки, проверка на зареждането на ресурси, време за отговор и статуси.
• Sources — за отстраняване на грешки в JavaScript кода, задаване на точки на спиране и стъпково изпълнение.
• Performance — за профилиране на производителността на страницата, анализ на времето за зареждане и рендериране.
• Application — за работа с локално хранилище, бисквитки, IndexedDB и кеш.
• Security — за проверка на сигурността на връзката и сертификатите.

Пример: ако страницата се зарежда бавно, отварям раздела Network, сортирам заявките по време и виждам кои ресурси забавят зареждането.