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