Ostatnia aktualizacja 9 października, 2023
Każdy programista webowy docenia znaczenie narzędzi developerskich (znanych jako DevTools), które są dostępne w przeglądarkach internetowych. Umożliwiają one analizę, testowanie i modyfikację stron internetowych w czasie rzeczywistym. Dzięki nim można szybko zidentyfikować błędy, monitorować wydajność strony czy analizować zachowanie użytkowników. W tym artykule przyjrzymy się, jak otworzyć DevTools i które z jego elementów są najważniejsze w codziennej pracy nad kodem witryny.
Czym są DevTools?
Już początkujący adepci sztuki programowania zetkną się z tymi rozszerzeniami w trakcie swojej nauki. DevTools to zbiór narzędzi dostępnych w przeglądarkach internetowych, które pomagają programistom w analizie i modyfikacji stron internetowych. Google wprowadził te narzędzia w swojej przeglądarce Chrome w 2008 roku i od tego czasu stały się one nieodłącznym elementem pracy wielu developerów.
Jak otworzyć DevTools w Chrome?
Otwarcie DevTools w Chrome jest proste. Istnieje kilka sposobów, aby to zrobić:
- Kliknij prawym przyciskiem myszy na dowolnym elemencie strony i wybierz “Zbadaj” lub “Inspect” z menu kontekstowego.
- Użyj skrótu klawiszowego
Ctrl + Shift + I(na Windowsie) lubcmd + Option + I(na macOS). - W menu Chrome przejdź do “Więcej narzędzi” > “Narzędzia dla deweloperów”.
Każda z tych metod powinna wywołać pojawienie się bocznego panelu po prawej stronie.
Najważniejsze elementy DevTools
Panel Elements
W panelu Elements możemy przeglądać i modyfikować strukturę DOM w czasie rzeczywistym. Każda zmiana dokonana w tym miejscu, odzwierciedla się natychmiast na stronie. Po prawej stronie tego panelu znajdują się style CSS dla aktualnie zaznaczonego elementu. Dzięki temu możemy dodawać, usuwać lub modyfikować style, obserwując jednocześnie, jak wpłyną one na wygląd strony. Na dole panelu umieszczony jest pasek nawigacyjny, który pokazuje hierarchię aktualnie zaznaczonego elementu w strukturze DOM.
Panel Console
Panel Console to miejsce, gdzie wyświetlane są komunikaty błędów, ostrzeżeń, informacji oraz logi. Kolorowe oznaczenia pomagają w rozróżnieniu różnych typów komunikatów. Dodatkowo w konsoli można wpisywać i wykonywać kod JavaScript bezpośrednio, co jest przydatne do testowania fragmentów kodu lub interakcji z bieżącą stroną. U góry konsoli znajdują się opcje filtrowania, które pozwalają wyświetlać tylko określone typy komunikatów.
Panel Network
W panelu Network prezentowane są wszystkie zapytania sieciowe wykonane przez stronę. Obejmuje to zapytania do serwera, obrazy, skrypty i arkusze stylów. Klikając w konkretne zapytanie, można zobaczyć jego szczegóły, takie jak nagłówki, odpowiedź serwera, czas trwania i wiele innych. Panel ten oferuje również możliwość filtrowania zapytań według różnych kryteriów, takich jak typ zasobu, status HTTP czy nazwa domeny.
Panel Sources
W panelu Sources można przeglądać cały kod źródłowy strony, w tym skrypty, arkusze stylów i inne zasoby. Umożliwia on również ustawianie punktów przerwania w kodzie, co pozwala na zatrzymanie wykonywania skryptu w określonym miejscu. Dzięki temu developerzy mogą śledzić zmienne, analizować stos wywołań i diagnozować problemy. Po lewej stronie panelu znajdują się zakładki, które pozwalają na szybki dostęp do różnych części kodu źródłowego.
Dalsza część tekstu znajduje się pod materiałem wideo:
Dlaczego warto wykorzystywać DevTools w przeglądarce Chrome?
Korzystanie z DevTools może znacznie przyspieszyć i ułatwić proces tworzenia i optymalizacji stron internetowych, oferując programistom szeroki wachlarz narzędzi do diagnozy i rozwiązywania problemów. Wśród zalet można szczególnie wyróżnić kilka z nich:
- Interaktywna edycja: Możliwość modyfikacji struktury DOM i stylów CSS w czasie rzeczywistym – oznacza to szybkie testowanie zmian.
- Diagnostyka błędów: Szybkie wykrywanie i rozwiązywanie problemów z kodem dzięki konsoli, która wyświetla komunikaty błędów i ostrzeżeń.
- Analiza wydajności: Monitorowanie i optymalizacja czasu ładowania strony oraz wydajności skryptów.
- Debugowanie kodu: Ustawianie punktów przerwania, śledzenie zmiennych i analiza stosu wywołań w panelu Sources.
- Monitorowanie aktywności sieci: Śledzenie wszystkich zapytań sieciowych, analiza odpowiedzi serwera i optymalizacja ładowania zasobów.
- Emulacja urządzeń: Testowanie responsywności i funkcjonalności strony na różnych urządzeniach i rozdzielczościach ekranu.
- Analiza zasobów: Przeglądanie wszystkich zasobów strony, w tym skryptów, arkuszy stylów, obrazów i innych plików.
- Interakcja z JavaScript: Wykonywanie kodu JavaScript w kontekście bieżącej strony bezpośrednio w konsoli.
- Bezpieczeństwo: Analiza problemów związanych z bezpieczeństwem, takich jak problemy z certyfikatami czy zapytania do niezaufanych źródeł.
- Dostępność: Narzędzia do testowania i poprawy dostępności strony dla użytkowników z różnymi potrzebami.
Czytaj także:
Google Chrome zużywa za dużo pamięci? Pojawią się tryby oszczędzania
