Analiza strony internetowej narzędziem DevTools (Chrome)

9 minut czytania

Niezależnie od tego czy jesteś webowym programistą, grafikiem czy specjalista SEO powinieneś znać podstawowe funkcje narzędzi DevTools wbudowanych w przeglądarkę Chrome. Przedstawione możliwości możesz wykorzystać analizując stronę internetową, treść, kod, zdjęcia, responsywność czy szybkość strony. W tym artykule przedstawię kilka ciekawych i pomocnych funkcji, z których na co dzień korzystam podczas optymalizowania, audytowania stron i wdrażania prostych korekt. Mam nadzieję, że znajdziesz przydatne dla siebie funkcje i wskazówki.

Z tego artykułu dowiesz się:

  1. Co to jest DevTools
  2. Jak otworzyć narzędzie
  3. Przydatne narzędzia i ich funkcje, z których korzystam przeprowadzając audyt i optymalizację stron internetowych:
    1. Elements
    2. Inspect
    3. Sekcja CSS
    4. Edycja kodu i CSS
    5. Wyszukiwarka
    6. Analiza wersji mobilnej strony
    7. Konsola
    8. Ruch sieciowy
    9. Audyt
  4. Ciekawostka
  5. Podsumowanie

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.

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).

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.

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.

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.

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.

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;

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).

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.

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.

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.

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.

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.

Podsumowanie

Teraz już znasz podstawowe funkcje narzędzia DevTools, z których najczęściej korzystam podczas pracy jako specjalista SEO. 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.

 

Zajmujący się optymalizacją stron internetowych, przeprowadzaniem audytów technicznych i UX. Dodatkowo wdraża zmiany na stronach internetowych, nadzoruje projekty i odpowiada za kontakt z klientami. Z wykształcenia informatyk lubiący nowinki techniczne i łamigłówki.

 
(5/5), głosów: 9
Ocena strony:
Szanowni Państwo, nasz serwis stosuje pliki cookies. Możecie określić warunki przechowywania lub dostępu do plików cookies w przeglądarce. Więcej.