DevToolsy w Chrome to zestaw potężnych narzędzi przydatnych każdemu testerowi aplikacji webowych. Poznaj zakładki Elements, Console, Sources. Network, Performance, Memory, Application, Security, a także kilka innych schowanych w menu. Przeglądarka jest dostępna na stronie Google.
Jak się dostać i co tam jest
Wejście do konsoli to podstawa i wejście do tych narzędzi jest szybkie i proste. Skrót klawiszowy to ctrl + shift + i. Możliwe jest też przejście z menu poprzez Menu – Więcej Narzędzi – Narzędzia dla Programistów. Ponadto jest opcja wejścia poprzez prawy przycisk myszy i wybór opcji zbadaj.
Elements
Karta Elements (Elementy): zawiera renderowany kod HTML strony, który różni się od kodu źródłowego. Jeśli podczas wczytywania strony kod JavaScript tworzy lub zmienia jakieś elementy HTML to efekty tych operacji widać w renderowanym kodzie HTML. Źródło strony zawiera kod bez żadnych takich zmian. Z punktu widzenia testerskiego, jest to narzędzie bardzo ważne i bardzo przydatne. Z tego poziomu możemy – usuwać, dodawać elementy, modyfikować rozmiary.
Przykład skopiowania loga w zakładce Elements poprzez copy i paste element.
Zakładka Elements to też doskonałe źródło wspomagające testy automatyczne. Widząc „drzewko” bez problemu stworzymy lokatory jak xpath dla naszych testów automatycznych. W ramach elementów, możemy też wyszukiwać frazy które potrzebujemy, poprzez wciśnięcie CTRL + F. Więcej o tworzeniu xpath znajdziesz tutaj.
Console
Zakładka console jest dostępna i znajduje się tuż obok Elements. Wejść bezpośrednio w tą zakładkę można poprzez CTRL + Shift + J. W tej zakładce znajduje się wiele ciekawych informacji, które w ramach testów możemy zbierać. W tym miejscu mamy stopnie informacji jak:
- Message;
- User message;
- Warnings;
- Error;
- Info;
Również w ramach konsoli jest możliwość tworzenia xpatów. Wystarczy dodać wartości $x i wpisywaniu lokalizacji po otwarciu nawiasu. W trakcie współpracy dewelopersko-testerskiej, możemy poprosić o wrzucanie powiadomień do consoli by badać pewne rzeczy.
Sources
Karta źródła źródła pozwala na możliwość debugowania przy pomocy breakpointów oraz podglądu kodu. Okienko Sources podzielone jest na trzy części. Z lewej strony wybieramy konkretny skrypt js, skrypt rozszerzenia, lub skrypt inline. W środkowym oknie oglądamy zawartość. Z prawej strony udostępnione nam są typowe funkcje debuggera, które pomagają odnaleźć się w chaosie dziesiątek skryptów. Jeżeli tester ma potrzebę, może stawiać breakpointy. Po postawieniu breakpointów i odświeżeniu strony wykonywanie skryptu się zatrzyma. Sama strona zostanie przykryta szarym tłem. Zatrzymane miejsce będzie okraszone niebieską linią w kodzie.
Network
Zakładka “Network” pozwala użytkownikowi szczegółowo badać ruch sieciowy pomiędzy serwerem, a przeglądarką. Łatwo możemy sprawdzić:
- jakie zasoby otrzymujemy od serwera,
- statusy odpowiedzi na zapytanie,
- typ i rozmiar przesyłanego pliku,
- metodę przesyłania pakietów (np: http/1, http/2),
- czas odpowiedzi i dostarczenia zasobu,
W ramach tej rozbudowanej zakładki mamy bardzo wiele innych możliwości jak – możliwość nagrywania logów, wyłączenie cache, filtrowanie czy wyszukiwanie requestów. Poprzez button capture screenshot możemy zobaczyć co i w jakim czasie pojawiało się na witrynie.
Klikając na żądanych request, możemy sprawdzić informację z Headera co również może przynieść nam wiele informacji w trakcie testowania.
Performance
Zakładka Performance pozwala na nagrywanie i weryfikowanie wydajności strony w trakcie jej działania. W obecnych czasach każdy użytkownik oczekuje strony działającej, szybko i płynnie, zatem sprawdzenie działania tego aspektu strony jest niezbędne. Wystarczy wejść do DevTools – nacisnąć record by przeglądarka zarejestrowała całą Twoją aktywność.
W ramach nagrania możemy przebadać wiele różnych elementów, jak również dokonywać zmian by porównywać wydajność strony. Tematyka ciekawa, rozległa i warta by poświęcić jej czas w szerszym aspekcie.
Memory
Kolejna bardzo przydatna zakładka, szczególnie dla deweloperów. Dzięki niej możemy wiedzieć ile pamięci przechowują obiekty, jak ta pamięć jest zwalniana czy nie mamy wycieków pamięci.
Application
Kolejna bogata zakładka to Application. W ramach pracy będziemy mogli wykonywać różne czynności. Możemy czyścić przechowywane w przeglądarce dane, dodawać, modyfikować, usuwać ciasteczka. W ramach sekcji Frames możemy znaleźć załadowane na stronie obrazki, skrypty, czcionki, style i wiele innych rzeczy.
Security
W tym miejscu możemy dowiedzieć się o certyfikatach na stronie na którą wchodzimy a także o użytych elementach czy one również są bezpieczne. Jest możliwość sprawdzenia pełnych informacji o certyfikacie, czy rzucić okiem na przejrzystość certyfikatu – zgodnie z zasadami Chrome.
Settings
Mała ikonka z prawej strony, która pozwala edytować bardzo dużo elementów dzięki którym będzie nam się wygodniej pracować, ale i efektywniej testować. W Preference widzimy wiele ustawień dla zakładek o których pisałem powyżej.
W dalszej kolejności są Workspace, Experiments, Blackboxing, oraz Devices. Dla testera zapewne Devices będzie przydatnym miejscem, gdzie możemy symulować rozmiar okna dla urządzeń mobilnych. Na liście jest wiele propozycji, zaś user może samodzielnie dodać „urządzenie” o wymaganym rozmiarze. Dalej Throttling, Locations, oraz masa pomocy – skróty klawiszowe jako – Shortcuts.
Toogle Device Toolbar
Wejście do tego menu do to szybki skrót klawiszony CTRL + SHIFT + M, lub poprzez naciśnięcie ikony będącej w sąsiedztwie inspect-element. Tutaj właśnie możemy sprawdzać wygląd naszej strony na urządzeniach mobilnych dostępnych w opisanej wyżej sekcji Devices.
More
Ikonka znajdująca się skrajnie z prawej stron. Pozwala ona na zmianę położenia docka, wyszukiwanie, uruchomienie poleceń, otworzenia pliku, przejścia do skrótów czy pomocy. Ponadto znajduje się zakładka More Tools, gdzie możemy jeszcze bardziej rozszerzyć możliwości Google Chrome i przeprowadzanych testów.
Podsumowanie.
DevToolsy w Chrome to potężny zestaw do testowania aplikacji webowych. Z uwagi na ich obszerność w kolejnych wpisach o tej tematyce podzielimy artykuł na części dotyczące poszczególnych zakładek. Celem takiego zabiegu, będzie zwiększenie przejrzystości dla czytelnika a także przekazanie wielu i dokładnych informacji. O innych narzędziach godnych uwagi, szerzej piszemy w niniejszym dziale.
