Jakie narzędzia i zakładki w Chrome DevTools używasz do debugowania i analizy stron internetowych?

Aby debugować i analizować strony internetowe w Chrome DevTools, zwykle korzystam z następujących zakładek:

• Elements — do podglądu i modyfikacji struktury DOM oraz stylów CSS w czasie rzeczywistym.
• Console — do wyświetlania logów, wykonywania kodu JavaScript i wykrywania błędów.
• Network — do analizy żądań sieciowych, sprawdzania ładowania zasobów, czasów odpowiedzi i statusów.
• Sources — do debugowania kodu JavaScript, ustawiania punktów przerwania i krokowego wykonywania.
• Performance — do profilowania wydajności strony, analizy czasów ładowania i renderowania.
• Application — do pracy z lokalnym magazynem, plikami cookie, IndexedDB i pamięcią podręczną.
• Security — do sprawdzania bezpieczeństwa połączenia i certyfikatów.

Przykład: jeśli strona ładuje się długo, otwieram zakładkę Network, sortuję żądania według czasu i sprawdzam, które zasoby opóźniają ładowanie.