Lokalne debugowanie aplikacji webowej na Androidzie

Pracując nad aplikacją webową, sklepem, stroną internetową należy liczyć się z tym, że strona będzie otwierana na różnych urządzeniach, o różnych rozdzielczościach. Do tej pory wystarczyło, że w dowolnej przeglądarce przeszliśmy do narzędzi dewelopera, włączyliśmy opcję przeglądania strony w “rozdzielczości” telefonu, np. S8, Iphone 6 itd. Jednak to nie sprawi, że aplikacja jest wyświetlana w 100% tak jak na telefonie.

Jak sobie z tym poradzić? Czego potrzebujesz?

  • Smartfon z włączoną opcją debugowania
  • Przeglądarka Chrome na Twoim komputerze
  • Przeglądarka Chrome na Twoim smartfonie

Jeśli masz to wszystko to przechodzimy do działania.

Otwieramy Chrome na komputerze, przechodzimy w “DevTools” do “Remote devices”

Gdy Twój smartfon będzie podłączony do komputera zobaczysz jego nazwę między “Devices” i “Settings”.

Nie obawiaj się tego komunikatu “No browsers detected”. Oznacza to, że na Androidzie nie włączyłeś przeglądarki Chrome. Gdy to zrobisz zobaczysz informacje o otwartej przeglądarce.

Jak na razie tylko informacja o samej przeglądarce – bez otwartej strony.

Właściwie na tym można byłoby zakończyć. W “Enter URL” wpisalibyśmy adres produkcyjny i koniec. Chcemy jednak debugować aplikację lokalnie, a nie na produkcji.

Jak debugować aplikację, która działa lokalnie na określonym porcie?

Z pomocą przychodzi “Port forwarding”. Przechodzimy do zakładki “Settings”, zaznaczamy

Jak widać musimy zaznaczyć “Port forwarding” i dodać regułę, która przekieruje ruch na naszą lokalną aplikację.

W moim przypadku będzie to aplikacja JavaScript, w React, którą uruchamiam lokalnie na porcie 3000.

Klikamy ponownie na nasze urządzenie po lewej stronie.

Mamy informacje, że port został przekierowany, że jest odpalona przeglądarka. Pozostaje nam wpisać adres w pole “Enter URL”. W moim przypadku: localhost:3000.

Teraz klikam “Inspect”. Otworzy się nowe okno na Twoim komputerze i jednocześnie zostanie wczytana strona na Twoim smartfonie.

W ten sposób możemy naprawdę debugować na urządzeniu z Androidem i znaleźć błędy, których desktopowa przeglądarka nie wykryje, jak np. przysłanianie elementów przez klawiaturę smartfona.

Więcej informacji możecie znaleźć tutaj https://developers.google.com/web/tools/chrome-devtools/remote-debugging/.

About the Author: Mateusz Dudek

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *