Część 1. Chrome DevTools: programisto, odkryj potęgę narzędzi deweloperskich Chrome

Narzędzia deweloperskie przeglądarek są uniwersalnym wsparciem w procesie tworzenia i testowania aplikacji. Służą głównie programistom front-end, jednak ich znajomość usprawni także pracę testerów i programistów back-end, a użytkownikom pozwoli lepiej zrozumieć i zgłaszać błędy. Dobra znajomość narzędzi deweloperskich przeglądarek umożliwia szybkie rozwiązywanie problemów, optymalizację działania aplikacji oraz skuteczniejsze testowanie funkcjonalności. Programiści, którzy biegle posługują się tymi narzędziami, zyskują znaczącą przewagę – mogą pracować bardziej efektywnie, lepiej komunikować się z innymi członkami zespołu i szybciej reagować na zgłaszane błędy.

W tekście przyjęłam założenie, że język przeglądarki (a tym samym narzędzi deweloperskich) ustawiony jest jako angielski. To dobra praktyka, ponieważ często dużo łatwiej jest znaleźć dokumentację i rozwiązania problemów na stronach anglojęzycznych, a same tłumaczenia narzędzi często bywają błędne i mylące. Artykuł będzie się też głównie odnosić do narzędzi deweloperskich dostępnych w przeglądarce Google Chrome, jednak duża część wspomnianych zagadnień jest również dostępna w innych przeglądarkach pod zbliżonymi nazwami.

Czym są narzędzia deweloperskie przeglądarki?

Narzędzia deweloperskie (DevTools) to zestaw funkcji wbudowanych w przeglądarki internetowe, które pozwalają programistom i projektantom analizować oraz debugować strony internetowe. Narzędzia przeglądarek nie są ustandaryzowane, więc ich implementacje mogą się różnić. Przeglądarki oparte na silniku Chromium (takie jak Chrome, Edge, Opera, Arc czy Brave) często mają bardzo zbliżone implementacje narzędzi deweloperskich, jednak w przeglądarkach takich jak Firefox czy Safari będą one się znacznie różnić. Dostępne są też przeglądarki skupiające się na narzędziach deweloperskich i w całości dedykowane programistom, takie jak przeglądarka Polypane. 

Jakie funkcje oferują narzędzia deweloperskie? 

Do głównych funkcji narzędzi deweloperskich należą: 

• Inspektor elementów 

Główny widok narzędzi deweloperskich, zakładka Elements, pozwala na analizowanie i modyfikowanie struktury HTML strony oraz podgląd i edycję stylów CSS. Narzędzie Inspector można uruchomić przy otwartych narzędziach deweloperskich skrótem klawiszowym Cmd + Shift + C lub Ctrl + Shift + C lub klikając na jego ikonę. 

• Konsola JavaScript 

Zakładka Console pokazuje konsolę JavaScript, która umożliwia wykonywanie kodu JavaScript oraz wyświetla błędy i logi w kodzie JavaScript strony. 

• Debugger JavaScript 

Zakładka Sources / Debugger pozwala na dostęp do debuggera JavaScript, który umożliwia zatrzymywanie wykonywania kodu w określonych miejscach (breakpointach) i analizowanie jego działania krok po kroku. 

• Monitorowanie sieci (zakładka Network) 

Zakładka Network pokazuje szczegóły żądań i odpowiedzi HTTP i pomaga określić problemy z wydajnością ładowania strony (np. brakujące pliki, długi czas odpowiedzi serwera czy brak kompresji gzip zasobów). 

• Monitorowanie wydajności (zakładka Performance) 

Zakładka Performance umożliwia analizę czasu ładowania strony, renderowania elementów oraz działania skryptów, a także wykrywanie nieoczekiwanych zmian układu (layout shifts) i zasobów blokujących renderowanie (render-blocking resources). 

• Monitorowanie wykorzystywanej pamięci (zakładka Memory) 

Zakładka Memory pozwala na analizę wykorzystywania pamięci przez stronę i pomaga zlokalizować wycieki pamięci (memory leaks). 

• Podgląd zasobów (zakładka Application) 

Zakładka Application pozwala na dostęp do danych zapisanych lokalnie przez stronę, m.in. w cookies, session storage i local storage czy IndexedDB. 

• Podgląd responsywności 

Widok podglądu responsywności umożliwia sprawdzenie wyglądu strony na różnych rozdzielczościach ekranu, symulując urządzenia mobilne, tablety i komputery. 

• Audyt dostępności, wydajności i SEO strony 

Narzędzia deweloperskie przeglądarki Chrome pozwalają na przeprowadzenie audytu strony przy użyciu narzędzia Lighthouse. To narzędzie sprawdza dostępność strony pod kątem osób z niepełnosprawnościami, a także analizuje i sugeruje poprawki związane z SEO, wydajnością i użytecznością. 

Jak otworzyć narzędzia deweloperskie? 

Narzędzia deweloperskie można otworzyć skrótem F12 lub klikając prawym klawiszem myszki w dowolnym miejscu na stronie internetowej i wybierając „Inspect” z menu kontekstowego. W przeglądarce Safari narzędzia deweloperskie są domyślnie ukryte dla użytkownika i muszą być włączone w ustawieniach zaawansowanych. 

Jak korzystać z Command Menu w Chrome DevTools? 

Command Menu pozwala na szybki dostęp do funkcjonalności i ustawień narzędzi deweloperskich w przeglądarce Google Chrome. Command Menu jest dostępne pod skrótem klawiszowym Cmd+Shift+P lub Ctrl+Shift+P. Aby zobaczyć wszystkie możliwości Command Menu, należy usunąć z wiersza polecenia znak większości (>) odpowiedzialny za uruchamianie komend i wpisać znak zapytania (?), który wyświetla pomoc. 

Jak korzystać z Chrome DevTools do debugowania? 

Jak używać konsoli do sprawdzania błędów w JavaScript? 

Błędy wyświetlane w konsoli pokazują miejsce w kodzie, gdzie wystąpił wyjątek. Aby przeanalizować szczegóły błędu wyświetlanego w konsoli, należy kliknąć w odnośnik, który otworzy panel Sources z miejscem wywołania błędu. Ważnym elementem analizy błędu jest stack trace, czyli ciąg funkcji prowadzących do błędu. Dzięki temu można prześledzić działanie programu przed wystąpieniem błędu. 

Jak analizować elementy HTML i reguły CSS w Chrome DevTools? 

Narzędzia zawarte w panelu Elements pozwalają na analizowanie i modyfikowanie struktury HTML strony oraz podgląd i edycję stylów CSS. Narzędzie Inspector można uruchomić skrótem klawiszowym Cmd + Shift + C lub Ctrl + Shift + C lub klikając na jego ikonę. 

Aby zrozumieć, w jaki sposób element otrzymał daną regułę, należy go zaznaczyć i w prawej części panelu Elements otworzyć zakładkę Computed. Po najechaniu myszką na wybraną regułę, wyświetli się ikonka strzałki, która otwiera fragment arkuszu stylów odpowiedzialny za nadanie elementowi danej reguły. 

Debugowanie znikających elementów 

Zdarza się, że używana biblioteka zawiera komponent, w przypadku którego dostęp do danego elementu przy próbie debugowania albo stylowania jest utrudniony – na przykład w przypadku tooltipów czy innych elementów widocznych warunkowo. 

Dobrym przykładem jest popularna biblioteka React Select, w której opcje mogą mieć skomplikowaną budowę, a są ukryte przy utracie stanu focused. Aby mieć do nich dostęp przy debugowaniu, należy ustawić narzędzia deweloperskie tak, aby nie zabierały stronie stanu focused. W tym celu należy otworzyć Command Menu (Cmd+Shift+P lub Ctrl+Shift+P) i wpisać „Show Rendering”. W liście opcji narzędzia Rendering należy zaznaczyć „Emulate a focused page”. 

Innym rozwiązaniem może być też używanie debuggera. Kiedy panel Sources / Debugger jest otworzony, naciskając klawisz F8 można w dowolnym momencie zatrzymać wykonywanie kodu i uruchomić debugger. Przy zapauzowanym stanie strony można wtedy użyć narzędzia Inspector i zbadać właściwy element. 

Warto też wiedzieć o możliwości ustawiania breakpointów przy zmianach w strukturze DOM. W widoku Elements należy wybrać właściwy element HTML i otworzyć prawym klawiszem myszki menu kontekstowe. Opcja „Break on” pozwala na utworzenie trzech rodzajów breakpointów: 

• subtree modifications – pauzuje kod przy modyfikacji struktury DOM danego elementu (ale nie atrybutów), 
• attribute modifications – pauzuje kod przy modyfikacji atrybutów HTML danego elementu, 
• node removal – pauzuje kod przy usunięciu danego elementu z drzewa DOM. 

Korzystanie z widoku warstw 3D w panelu Layers 

Dosyć ciekawą funkcją narzędzi deweloperskich Google Chrome jest widok warstw 3D. Aby go uruchomić, należy otworzyć Command Menu (Cmd + Shift + P lub Ctrl + Shift + P) i wpisać „Show Layers”, a następnie wybrać ikonę oznaczającą „Rotate mode”. Tym sposobem można debugować kolejność nakładania się elementów na stosie według parametru z-index, debugować zagnieżdżenie elementów w drzewie DOM czy znaleźć elementy DOM wykraczające poza okno. 

Jak monitorować zasoby w zakładce Network? 

Jak analizować zapytania sieciowe w narzędziach deweloperskich? 

Domyślnie w zakładce Network zobaczymy nazwę, typ i rozmiar zasobu, status i czas odpowiedzi oraz miejsce w kodzie inicjujące zapytanie. Nazwa zasobu oznacza, że przykładowo dla obrazu pobieranego z https://example.com/images/image.jpg, zobaczymy samo „image.jpg”. Jak zatem zobaczyć całą ścieżkę pobieranego zasobu albo metodę zapytania? Klikając prawym klawiszem myszki na nagłówek tabeli, możemy dodać lub usunąć potrzebne nam kolumny. 

Dodatkowo możemy też korzystać z filtrów widoku. Oprócz domyślnych filtrów pole tekstowe pozwala na filtrowanie po własnych kryteriach, takich jak status (status-code), typ MIME (mime-type), czy metoda zapytania (method). W tym celu należy wpisać zapytanie w pole tekstowe, które automatycznie powinno zasugerować odpowiednią składnię, na przykład: 

• po statusie 404 Not Found: status-code:404 
• po danych w formacie JSON: mime-type:application/json 
• po metodzie POST: method:POST 

Jak sprawdzić czas ładowania strony w zakładce Network? 

Kolumna „Time” wyświetla czas potrzebny na załadowanie poszczególnych zasobów. Dla bardziej szczegółowego widoku w Google Chrome można jednak też dodać kolumnę „Waterfall”, która w graficzny sposób pozwala na przeanalizowanie ładowania strony. Po najechaniu myszką na dany element w kolumnie „Waterfall” otrzymamy szczegółowe informacje o jego czasie ładowania. 

Lokalne podmienianie zapytań i zasobów 

Narzędzia deweloperskie Chrome pozwalają na lokalne nadpisywanie zapytań i pobieranych zasobów, co pozwala na prototypowanie zmian, zanim zostaną one zaimplementowane na backendzie. Aby nadpisać dane zapytanie, należy kliknąć na nie prawym klawiszem myszki w panelu Network i wybrać z menu kontekstowego „Override headers” lub „Override content”. Wprowadzone zmiany będą zapisywane w wybranym folderze i domyślnie ładowane przy wykonywaniu zapytania. 

Testowanie responsywności stron internetowych 

Jak używać Chrome DevTools do testowania responsywności? 

Aby otworzyć panel pozwalający na testowanie responsywności strony, należy wybrać ikonkę w lewym górnym rogu narzędzi deweloperskich oznaczającą „Toggle device toolbar” lub użyć skrótu klawiszowego Cmd + Shift + M lub Ctrl + Shift + M. Z menu opcji można wybrać domyślne wymiary ustalone na podstawie najpopularniejszych urządzeń lub zdefiniować własne. Z menu dodatkowych opcji określonego ikonką z trzema kropkami, można włączyć też menu określające DPR (device-pixel ratio). 

Menu określające throttling pozwala na przetestowanie strony pod kątem urządzeń mobilnych: 

• mid-tier mobile – symuluje CPU spowolnione czterokrotnie i prędkość połączenia wolnej sieci 4G, 
• low-end mobile – symuluje CPU spowolnione sześciokrotnie i prędkość połączenia sieci 3G, 
• offline – symuluje brak połączenia internetowego. 

Opcje throttlingu CPU i połączenia są też dostępne niezależnie odpowiednio w panelach Performance i Network. 

Jak wprowadzać zmiany w kodzie CSS dla różnych rozmiarów ekranów? 

Przy korzystaniu z media queries, w panelu pozwalającym na testowanie responsywności strony, warto włączyć menu pozwalające na szybkie przełączanie się między szerokościami ekranu na podstawie zadeklarowanych w kodzie breakpointów. W tym celu z menu dodatkowych opcji, określonego ikoną z trzema kropkami, należy wybrać „Show media queries”. Aby wprowadzić zmiany dla szerokości, która nie została jeszcze zadeklarowana w kodzie, należy dodać odpowiednią regułę w arkuszu stylów w panelu Sources. Nowa szerokość zostanie dodana do widoku breakpointów i pozwoli na łatwiejsze prototypowanie stylów. 

Podsumowanie

W pierwszej części artykułu skupiłam się na zaprezentowaniu możliwości narzędzi deweloperskich przeglądarek.
Druga część będzie poświęcona praktycznym wskazówkom w zakresie testowania
dostępności aplikacji.