Sztuczki w DevToolsach, które warto znać
Zorientowałem się, że narzędzi testerskich jest już więcej niż piosenek Taylor Swift.
Obie te rzeczy mają ze sobą trochę wspólnego – nie wszystkie piosenki (jak i narzędzia) trzeba znać i tylko nieliczne są hitem 😉
Na twórczości Taylor Swift znam się tak samo jak labrador na fizyce kwantowej, więc przejdźmy już do gwiazdy dzisiejszego wpisu.
Odkryję przed Tobą kilka możliwości DevToolsów, które do tej pory mogły pozostać nieodkryte, a mogą być… całkiem przydatne. Zaczynamy? 😎
DEVICE EMULATION
Wcale nie musisz mieć w szafie wszystkich modeli iPhone’a i multum tabletów, aby ocenić, jak Twoja apka webowa wygląda na każdym z tych urządzeń.
Nie jest żadną tajemnicą, że czasem strony internetowe rozjeżdżają się przy mniejszej rozdzielczości i zaczynają wyglądać po prostu dziwnie.
Tutaj niczym rycerz na białym koniu z pomocą przychodzi funkcja Device Emulation.
Wyklikanie na przykład takiego Samsunga Galaxy A51 zajmuje w DevToolsach tylko chwilę. Jak już uruchomisz narzędzia deweloperskie, wystarczy, że klikniesz ten guziczek zaznaczony na obrazku:
I teraz zaczyna się magia. Możesz wybrać dowolne urządzenie, wpisać własną rozdzielczość czy nawet symulować obrócenie ekranu:
To rozwiązanie ma jednak swoje ograniczenia…
Choć możesz zobaczyć, jak Twoja aplikacja prezentuje się na wybranych urządzeniach, to wciąż nie mamy pełnego obrazu jej rzeczywistego działania.
Funkcja Device Emulation nie jest w stanie dokładnie odwzorować takich elementów jak: system operacyjny czy procesor danego urządzenia, co skutkuje tym, że nie możemy dokładnie przewidzieć, jak aplikacja będzie się na nim zachowywać.
Niemniej jednak umożliwia nam to wykrycie problemów związanych z designem, a to już coś!
Network Throttling
My testerzy doskonale zdajemy sobie sprawę z tego, jak kluczową rolę we współczesnych aplikacjach odgrywa wydajność. Jest to co najmniej frustrujące, gdy strona ładuje się dłużej niż telefon z rozładowaną baterią.
Jednak problemy z siecią się zdarzają i trzeba być na nie przygotowanym. Niestety w takich sytuacjach zdarza się, że aplikacje zachowują się dość nieoczekiwanie, czego sam miałem okazję wielokrotnie doświadczyć.
Jak wykryć bugi związane z wolnym połączeniem internetowym albo nawet z jego brakiem? To proste!
Zamiast wyłączać router, możemy przejść do zakładki Network i zasymulować takie połączenie internetowe, na jakim chcemy przetestować aplikację:
Choć Network Throttling sprawdza się super, to również nie jest rozwiązaniem idealnym. Nie ma możliwości, żeby to narzędzie idealnie odwzorowało zachowanie sieci w prawdziwym świecie. Szybkość połączenia internetowego to tylko jeden z wielu elementów wpływających na wydajność.
Breakpointy
Czas na moją ulubioną funkcję w DevToolsach 😎
Podczas automatyzacji testów budujemy lokatory do potrzebnych nam elementów, z którymi wchodzimy w interakcję. Tylko co w sytuacji, gdy jakiś element nam znika? Jak go „złapać” i zbudować do niego lokator?
Tutaj na pomoc przychodzą nam breakpointy.
Umożliwiają zatrzymanie aplikacji w określonym momencie – na przykład w takim, gdy wyskakuje nam element, do którego potrzebujemy zbudować lokator. Musimy tylko postawić go w odpowiedniej linijce DOM (Document Object Model).
Wszystko fajnie, tylko jak to zrobić? Już tłumaczę:
- Otwórz DevToolsy i przejdź do zakładki Elements;
- Kliknij prawym przyciskiem myszy na elemencie HTML, na którym chcesz ustawić Breakpoint;
- W menu, które pojawi się po kliknięciu prawym przyciskiem myszy, zobaczysz opcję Break on. Gdy najedziesz myszką na tę opcję, rozwinie się lista z kilkoma opcjami do wyboru:
- Subtree modifications,
- Attribute modifications,
- Node removal.
Nas interesuje opcja Subtree modifications, więc możemy od razu w nią kliknąć:
Nawet jeśli nie wiemy, w którym poddrzewie struktury DOM zachodzą zmiany, które chcemy uchwycić, możemy postawić breakpointa na elemencie <body>. Wtedy wystarczy klikać tę niebieską strzałkę widoczną na screenshocie tak długo, aż ten znikający element pojawi się na ekranie:
I tadam! Element złapany, możemy budować do niego lokator tak długo, jak tylko chcemy.
To nie wszystko!
Artykuł dobiegł końca, ale DevToolsy skrywają dużo więcej „sztuczek”, które tylko czekają, aż je odkryjesz.
Narzędzia deweloperskie stanowią nieocenioną pomoc w mojej codziennej pracy.
Daj znać, jak wykorzystujesz je w swojej i o jakich funkcjach warto napisać? Sekcja komentarzy jest Twoja!
