Z tego artykułu dowiesz się:

Czym jest narzędzie DevTools

Chrome DevTools jest zestawem narzędzi wbudowanych w przeglądarkę, które pozwalają w szybki sposób przeanalizować i edytować stronę. Łatwo możemy również zdiagnozować występujące problemy oraz np: sprawdzić implementacje wybranego elementu, modułu czy sekcji. Alternatywę tego narzędzia możemy znaleźć w innych przeglądarkach np: FireFox, Safari czy Opera.

developer tools chrome

E-book

Odkryj sekret swoich rywali. Analiza konkurencji w małej firmie

Pobierz bezpłatny praktyczny przewodnik dla właścicieli małych firm, którzy chcą sprawdzić, jak konkurencja działa w Internecie.

Pobierz e-booka

Uruchomienie narzędzia

Otworzyć DevTools możemy na kilka sposobów. Klikając prawy przycisk myszy na stronie, po czym klikając w Inspect / Zbadaj. Możemy skorzystać ze skrótu klawiszowego Ctrl + Shift + C (Windows, Linux, Chrome OS) lub Command + Option + C (Mac). Jest jeszcze możliwość uruchomienia narzędzia poprzez rozwinięcie menu przeglądarki, więcej narzędzi i wybranie “narzędzia dla deweloperów”.

Przydatne narzędzia i ich funkcje

Elements

Jest jedną z najczęściej używanych przeze mnie zakładek. Pozwala w prosty sposób przeanalizować wyrenderowany kod strony (drzewo DOM), gdyż jest on wyświetlany w przyjaznej dla użytkownika formie. Łatwo możemy zbadać strukturę strony, sekcje head, body, czy konkretne znaczniki i ich zagnieżdżenie w kodzie. Wystarczy, że klikniemy w wybrany element w kodzie np: znacznik i w rezultacie otrzymamy pełną ścieżkę zagnieżdżenia tego elementu, a po prawej listę stylów CSS odpowiedzialnych za jego wygląd (więcej o sekcji ze stylami w dalszej części artykułu).

zakładka elements

Wskazówka

Nie wiesz gdzie na stronie internetowej znajduje się element, który analizujesz w kodzie? Wystarczy, że klikniesz PPM na znacznik w kodzie i wybierzesz opcję “scroll into view”, w efekcie automatycznie strona zostanie przesunięta w miejsce, gdzie znajduje się analizowany kod.

scroll into view

Inspect (zbadaj element)

Z kolei to narzędzie pozwala analizować komponenty na stronie w odwrotny sposób. Czyli po kliknięciu w inspect, kierujemy kursor myszy na element znajdujący się na stronie internetowej i klikamy w niego. W efekcie narzędzie wskaże nam fragment kodu, który go dotyczy oraz listę stylów.

funkcja inspect

I tak oto możemy przeanalizować:

  • rodzaje nagłówków (H1-H6),
  • sposób osadzenia zdjęcia (jako img, czy background w CSS),
  • teksty alternatywne dla obrazków i ich format,
  • źródło wczytywania filmików, animacji, grafik,
  • występowanie paragrafów dla akapitów treści,
  • typy linków (nofollow, follow, względne, bezwzględne, _blank, itd.),
  • kolory elementów, tła, treści, ich krój i rozmiar czcionki,
  • i wiele więcej.

Sekcja CSS

Pozwala przeglądać i dynamicznie edytować style opisujące wygląd oraz zachowanie analizowanego elementu na stronie. Ciekawą opcją jest wymuszanie pewnych zachowań badanego komponentu, np: hover, active, visited czy focus, dla których mogą być określone inne style, bądź zachowania.

zakładka CSS - możliwości

Wskazówka

W zakładce “Styles” wyświetla się wiele klas i identyfikatorów zawierające style, które często są przeciążone przez inne. W takiej sytuacji warto przejść do zakładki “Computed” w sekcji CSS, gdzie znajdują się tylko aktywne style badanego elementu. Dodatkowo po kliknięciu w strzałeczkę przy atrybucie zostajemy przeniesieni w miejsce, gdzie reguła się znajduje.

aktualne style dla badanego elementu

Edycja kodu i CSS

DevTools umożliwia dynamiczną edycje kodu i CSS strony, czyli po odświeżeniu strony wszystkie zmiany wracają do początkowych ustawień. Nie mniej jednak jest to fajny sposób na dodawanie, usuwanie, ukrywanie, czy edycję elementów na stronie (znaczników, tekstu, anchorów, kolorów, fontów, rozmiarów itd.). Przydatne, gdy chcemy zmienić, dodać coś na stronie lub przygotować Screenshota. Taka możliwość pozwala nam przetestować bez konsekwencji wprowadzane zmiany. Później wystarczy zmiany wprowadzić w plikach strony lub systemie CMS. W przypadku edycji CSS pomocna jest informacja w jakim pliku i linii kodu znajduje się dana reguła stylów.

Wyszukiwarka - Nie wyobrażam sobie pracy bez możliwości przeszukiwania w kodzie istotnych dla pozycjonowania elementów. Dzięki wyszukiwarce możemy wyszukiwać:

  • dowolny ciąg znaków,
  • kwerendy CSS np: .nazwa klasy, czy #identyfikator i określić ile występuje danych elementów, bądź też sprawdzić jakie inne elementy,
  • korzystają ze stylów analizowanej klasy CSS,
  • konkretne znaczniki, np: //h1, //p, //img, //a, itp.

Jednym ze sposobów lokalizacji ukrytych elementów na stronie jest szukanie np: display: none, czy visibility: hidden;

wyszukiwarka w kodzie i stylach CSS

Analiza wersji mobilnej

Jest świetnym narzędziem, które wykorzystuje do analizowania zachowania badanej strony w różnych rozdzielczościach. Między innymi, dzięki temu jestem w stanie określić, czy strona jest responsywna oraz czy poszczególne jej elementy wyświetlają się w prawidłowy sposób na urządzeniach przenośnych. Często wspomagam się testem Mobile Friendly i analizą mobilną w GSC. Jak dobrze wiemy, strony przyjazne smartfonom i tabletom są niezbędne dla SEO, gdyż generują sporo ruchu. Podczas analizy mamy do wyboru dostępne urządzenia z listy, możliwość skonfigurowania własnego lub wybrania opcji “responsive”, która pozwala w dowolny sposób zmieniać szerokość i wysokość okna ze stroną. Istnieje również możliwość wprowadzenia ręcznych wartości (szerokość i wysokość) oraz zmiana rotacji z pionowej na poziomo. Kolejną ciekawą funkcją jest opóźnienie wczytywania strony, gdzie mamy do wyboru (no throttling, mid-tier mobile, low-tier mobile i offline).

analiza wersji mobilnej strony

Wskazówka

Podczas analizy mobilnej głównie zwracam uwagę na sprawnie działające menu, łatwość poruszania się po strukturze, elementy klikalne, wyświetlane zdjęcia, występowanie sekcji, które pojawiają się w wersji desktopowej, działanie formularzy, modułów itd.

Console

To zakładka, z której korzystam głównie podczas audytowania stron internetowych, a dokładniej mówiąc, gdy występują jakieś błędy lub ostrzeżenia. Niektóre z problemów wymagają konsultacji z działem Web Development, co pozwala upewnić się, że nie wpływają negatywnie na działanie strony, SEO/UX.

Analiza sieciowa

Czyli zakładka “Network”. Pozwala szczegółowo badać ruch sieciowy pomiędzy serwerem, a przeglądarką użytkownika. Łatwo możemy sprawdzić:

  • jakie zasoby otrzymujemy od serwera,
  • metodę przesyłania pakietów (np: http/1, http/2),
  • status odpowiedzi na zapytanie,
  • typ i rozmiar przesyłanego pliku,
  • czas odpowiedzi i dostarczenia zasobu,
  • itd.

A co za tym idzie, możemy wychwycić kilka elementów, które wydłużają czas ładowania strony. Sprawdź 14 wskazówek jak przyspieszyć stronę internetową.

Wskazówka

Narzędzie pozwala również filtrować zasoby po nazwie i typie plików np: XHR, JS, CSS, IMG, czy DOC oraz sortować po wszystkich elementach z dodatkowego menu, które możemy rozszerzać o kolejne parametry. Aby dodać kolejne zakładki, kliknij PPM np: na “Status”, pojawi się lista dodatkowych czynników. Wybierz, kliknij i analizuj.

filtrowanie plików xhr, javascript, css, img, itd.

Podczas podstawowej analizy strony w pierwszej kolejności zaznaczam checkbox “cache”, dzięki czemu po odświeżeniu zasoby załadują się nie z pamięci przeglądarki, a z serwera. W zakładce “status” sprawdzam, czy wszystkie zasoby mają kod 200. W zakładce “Protocol”, określam jaką metodą wysyłane są zasoby z serwera, gdyż ma to wpływ na szybkość ładowania strony. W sekcji “Size” badam wagę przesyłanych plików oraz w kolumnie “Time” zwracam uwagę na czas.

analiza ruchu sieciowego - Network

Audyt

W skrócie, jest to dodatek do przeglądarki Google Chrome o nazwie LightHouse, który kompleksowo audytuje badaną stronę internetową. Głównie zwraca uwagę na jakość witryny, wydajność, SEO i dostosowanie do potrzeb użytkowników. Wynik testu podzielony jest na 5 sekcji (Performance, Accessibility, Best Practices, SEO i Progressive Web App), dla których określany jest osobny wynik z przedziału od 0 do 100 punktów. Wiadomo im wyżej, tym lepiej.

Warto wspomnieć, że narzędzie Google PageSpeed Insights określające szybkość strony internetowej opiera się o analizę z LightHouse.

O tym jak tworzyć szybkie strony możesz przeczytać w artykule: https://ks.pl/blog/tworzenie-i-optymalizacja-szablonu-strony-internetowej.

audyt strony narzędziem LightHouse - zakładka Audits

Ciekawostka z narzędzia DevTools

Jakiś czas temu przypadkiem natknąłem się na fajną opcje. W momencie, gdy mamy uruchomiony DevTools i przytrzymamy przycisk “odśwież stronę” znajdujący się pomiędzy strzałką wstecz, a adresem URL pojawią się 3 opcje:

  • załaduj stronę ponownie (normalnie),
  • wymuś ponowne załadowanie,
  • opróżnij pamięć przeglądarki i wymuś ponowne załadowanie.

ciekawostka z odświeżaniem strony

E-book

Odkryj sekret swoich rywali. Analiza konkurencji w małej firmie

Pobierz bezpłatny praktyczny przewodnik dla właścicieli małych firm, którzy chcą sprawdzić, jak konkurencja działa w Internecie.

Pobierz e-booka

Podsumowanie

Teraz już znasz podstawowe funkcje narzędzia DevTools, z których najczęściej korzystam, gdy wykonuje audyt techniczny strony. Wiesz też jak z nich korzystać analizując stronę internetową. Jeśli znasz inne ciekawe funkcjonalności, o których nie wspomniałem, podziel się nimi zostawiając komentarz pod artykułem.