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

W Chrome DevTools często korzystam z następujących narzędzi i funkcji do analizy i debugowania stron internetowych:

• Elements — do podglądu i edycji DOM i CSS w czasie rzeczywistym.
• Console — do wykonywania kodu JavaScript i przeglądania logów, błędów.
• Network — do analizy żądań sieciowych, czasów ładowania zasobów, sprawdzania odpowiedzi serwera.
• Sources — do debugowania JavaScript z możliwością ustawiania punktów przerwania.
• Performance — do profilowania wydajności strony, identyfikowania wąskich gardeł.
• Application — do pracy z lokalnym magazynem, plikami cookie, IndexedDB.
• Lighthouse — do audytu wydajności, dostępności i SEO.

Na przykład, aby śledzić problem z ładowaniem, otwieram zakładkę Network, filtruję według typu zasobu i sprawdzam status i czas ładowania każdego pliku.