Debugowanie lokalnego środowiska na urządzeniach mobilnych

Tworząc aplikacje webowe wcześniej czy później spotykamy się z tym problemem: mamy lokalną instancję aplikacji, w rozbudowanym środowisku deweloperskim i nadchodzi moment, kiedy potrzebujemy uruchomić ją na fizycznym urządzeniu mobilnym.

Oczywiście zwykle nie mamy możliwości przenieść całego środowiska deweloperskiego na telefon czy tablet. Jeśli mamy możliwość łatwej i szybkiej publikacji aplikacji na publicznym serwerze, może to być jakiś półśrodek, choć takie rozwiązanie raczej będzie dalekie od ideału, a w wielu przypadkach wręcz zupełnie pozbawione sensu.

Co nam pozostaje? Emulatory, które jak pewnie większość z nas miała okazję się przekonać, niestety przeważnie są dalekie od ideału (co nie znaczy, że bezużyteczne!). Na szczęście jednak są jeszcze inne, znacznie bardziej efektywne metody i jedną z nich postaram się dzisiaj opisać. W stosunkowo łatwy sposób możemy uruchomić aplikację (działającą ciągle w naszym lokalnym środowisku) „zdalnie„, na urządzeniu mobilnym.
Można to oczywiście zrobić na wiele różnych sposobów. Oto jeden z nich, w kilku prostych krokach.

Moje lokalne środowisko deweloperskie było skonfigurowane pod Windows 7, a urządzenia mobilne były wyposażone w różne wersje systemu Android.

1. Na komputerze instalujemy proxy – w moim przypadku był to Charles (program jest płatny, ale gdyby komuś to wystarczyło to przez 30 dni można skorzystać z bezpłatnej wersji próbnej). Można oczywiście użyć innego programu, choć należy mieć na uwadze, że nie każdy z nich obsłuży każdą aplikację. U mnie nie sprawdził się np. Squid, który, choć jest dobrym opensource’owym oprogramowaniem, ma niestety problem z obsługą websocketów – poszedł więc w odstawkę na rzecz wspomnianego Charles’a.
2. Na komputerze uruchamiamy przeglądarkę Chrome i otwieramy: chrome://inspect
   • klikamy „Port forwarding…„,

     

   • na liście portów dopisujemy dowolny (niezajęty) port, np. 9000 i podajemy dla niego IP: localhost:xxxx, gdzie xxxx to port na którym działa nasz proxy (w Charles’ie numer portu możemy sprawdzić w ustawieniach),
   • zaznaczamy „Enable port forwarding” i zatwierdzamy.

     

3. Na urządzeniu mobilnym uruchamiamy tryb debugowania. Wcześniej musimy mieć odblokowane menu programisty („Developer Options Menu”) – w przypadku Androida w wersji od 4.2 w górę, robimy to wchodząc w Ustawienia > Informacje o urządzeniu [ > informacje o oprogramowaniu] i 7-krotnie stukamy w numer kompilacji (Build number).
4. Na urządzeniu mobilnym otwieramy ustawienia sieci (Ustawienia > Wi-Fi). Odnajdujemy naszą bieżącą sieć, przytrzymujemy aby wyświetlić menu i wybieramy: Modyfikuj sieć > Ustawienia zaawansowane, a następnie ustawiamy:
   • Proxy: manual
   • Proxy host: localhost
   • Proxy port: ten sam, który podaliśmy w „Port forwarding” w Chrome (np. 9000)
   • Zapisz
5. Podłączamy urządzenie do komputera za pomocą kabla. Jeśli na komputerze nie mamy sterowników USB dla naszego urządzenia, oczywiście należy je zainstalować. Tutaj znajdziecie wszystkie potrzebne informacje o sterownikach USB: https://developer.android.com/studio/run/oem-usb.html.
6. Jeśli odpowiednie sterowniki są zainstalowane, to po podłączeniu kablem, na urządzeniu powinno wyświetlić się pytanie o pozwolenie na debugowanie, które akceptujemy.
7. Na komputerze uruchamiamy nasze środowisko deweloperskie tak jak zwykle i dodatkowo uruchamiamy proxy (np. Charles).
8. Na urządzeniu mobilnym (w przeglądarce Chrome) wpisujemy adres naszej lokalnej aplikacji, dokładnie ten sam co na komputerze, i… Wreszcie dzieją się czary! Powinniśmy zobaczyć nic innego jak właśnie naszą aplikację.
9. W Chrome na komputerze, pod adresem chrome://inspect, powinno być widoczne nasze podłączone urządzenie mobilne i lista stron, które są na nim otwarte w przeglądarce Chrome.

   

10. Na komputerze, w chrome://inspect klikamy „inspect” pod adresem naszej aplikacji – pojawia się dodatkowe okno, zawierające narzędzia deweloperskie, dzięki którym możemy debugować aplikację na urządzeniu mobilnym dokładnie tak samo jak lokalnie na komputerze. Możemy też obsługiwać stronę (na urządzeniu) zarówno z poziomu urządzenia jak i komputera.

Gotowe! Pamiętajcie, że jeśli po zakończeniu pracy będziecie chcieli zwyczajnie korzystać na urządzeniu mobilnym z tej samej sieci wi-fi, musicie najpierw usunąć wprowadzone w punkcie 4. ustawienia, a przywrócić je, gdy następnym razem będziecie chcieli uruchomić aplikację.

Mam nadzieję, że ten sposób mobilnego debugowania aplikacji webowych sprawdzi się u Was równie dobrze, jak sprawdził się u mnie.