Tym artykułem chciałbym pomóc wszystkim tym, którzy podobnie jak ja, tworzą aplikacje cross-platformowe, i mają problem z debugowaniem na urządzeniach z rodziny Apple. Przedstawię jak podsłuchać komunikację przeglądarki uruchomionej na iPhonie, iPadzie albo iPodzie.
Jako developer aplikacji multi-platformowych, często (moim zdaniem za często) poprawiam błędy pojawiające się tylko na jednej platformie. Nie jest to miłe.
JESTEM OGROMNYM ZWOLENNIKIEM SPÓJNOŚCI
...dlatego moim marzeniem byłaby sytuacja taka, że jedno rozwiązanie powinno działać, albo nie działać wszędzie zarazem.
Wolę mieć jasną sytuację, że jeśli na jednej platformie nie działa, to na pozostałych również.
Wtedy wiem, że gdy na jednej zrobię poprawkę, to na wszystkich innych będzie także działało.
Niestety, to rzadkość w tym fachu.
Problem kompatybilności z Apple
Jakiś czas temu w pewnym moim projekcie istniał problem przeglądarki
uruchomionej na iPhonie komunikującej się z serwerem HTTP.
Korzystając z przeglądarki Google Chrome, nie można niestety
wejść w tryb developerski (remote debugging
), czyli mieć
połączenie komputer - urządzenie i weryfikować stan
aplikacji uruchomionej na urządzeniu.
Taki remote debugging działa tylko na urządzeniach z Androidem, które podłączymy do komputera z Windowsem / OSXem / Linuksem.
Wtedy po podłączeniu telefonu z Androidem wchodzimy na komputerze (korzystamy z Google Chrome) na chrome://inspect i wybieramy urządzenie, które chcemy połączyć z naszym komputerem.
Chcę po prostu podłączyć się do iPhona, ale jak? Może... to narysuję.
Kabel podłączam. iTunes wykrywa urządzenie. Na razie wszystko gra. Co dalej?
Tryb remote debugging
działa w Safari (specjalnie nie
nazywam tego programu przeglądarką ze względu na implementację
specyfikacji W3C oraz kiepskie narzędzia developerskie -
Google Chrome to jedyna
słuszna przeglądarka). No dobra, przedstawię kroki jak skorzystać z
remote debugging.
Safari - Remote debugging
Poniżej lista kroków, aby korzystać z DevToolsów (czytaj "narzędzi developerskich") dla Safari.
- Pierwszy krok to konfiguracja sprzętowa: podłączasz kabelkiem iPhona z MacBookiem (to chyba jasne).
- iPhone: Drugim krokiem jest włączenie Inspektora w przeglądarce Safari. Wykonać to należy wchodząc w urządzeniu w: Ustawienia → Safari → Zaawansowane → Inspektor WWW. Przełączamy Inspektora w stan włączenia.
- iPhone: uruchamiasz Safari i wchodzisz na stronę example.org
- MacBook: uruchamiasz Safari i wybierasz z menu górnego Programowanie, a potem iPhone (albo iPad, albo iPod) Jeżeli będziesz w takiej sytuacji: ...to w sekcji FAQ (na dole strony) znajdziesz rozwiązanie.
- MacBook: wybierasz stronę example.org klikając w element menu.
- MacBook: naszym oczom ukazują się narzędzia developerskie znane z typowego debugowania pod Safari na OSX.
- Od teraz jesteśmy podłączeni konsolą do strony otworzonej na iPhonie. Możemy w pełni debugować naszą aplikację.
Co jeśli jednak chcielibyśmy podłączyć się Wiresharkiem? Tutaj pojawia się problem, ponieważ nie wykrywa on podłączonego urządzenia!
Wireshark podsłuchuje iPhona
Wireshark to najlepszy sniffer (analizator pakietów) na rynku. Każdy kto uważa się za programistę sieciowego, a Ty jako programista aplikacji internetowych należysz do takich, to na pewno wiesz jak sobie poradzić z Wiresharkiem.
Jeśli nie korzystałeś nigdy z tego programu, to polecam książkę pt. "Praktyczna analiza pakietów" autorstwa Chrisa Sandersa. Książka jest dostępna po polsku w księgarni internetowej Helion: helion.pl/ksiazki/praktyczna-analiza-pakietow-....htm Wkrótce na blogu pojawi się recenzja tej książki. Jeśli kogoś temat interesuje, to zachęcam do śledzenia mojego bloga.
Na powyższym zrzucie ekranu nie widać połączenia (odpowiedni interfejs) z iPhonem. Rozwiązanie zagadki jest proste. Do komunikacji z tym urządzeniem brakuje odpowiedniego interfejsu! Dodajmy go!
Dodajemy interfejs do komunikacji z iPhone
-
Za pomocą narzędzia
rvictl
, czyliRemote Virtual Interface Tool
możemy zarządzać interfejsami. Zobaczmy jak wygląda pełny opis narzędzia: -
Skorzystamy z opcji
-s
, aby uruchomić kanał komunikacyjny między MacBookiem a iPhonem. Potrzebujemy do tegoUUID
urządzenia (dowolnego z rodziny Apple: iPhone, iPad, iPod).Jeśli nie wiesz co to jest
UUID
, to odpowiedź znajdziesz w FAQ.Żeby to zrobić uruchamiamy program iTunes:
-
Następnie wybieramy nasze urządzenie:
-
Klikamy w "Numer seryjny" aby pokazał nam się UUID urządzenia:
-
Klikamy prawym przyciskiem myszy, pokazuje nam się menu kontekstowe z jedną opcją "kopiuj".
-
Przechodzimy do terminala i wpisujemy polecenie:
...zastępując
[UUID]
skopiowanym ciągiem znaków. -
Resetujemy Wiresharka, a w nowej sesji programu widzimy listę interfejsów z nowym
rv0
: -
Wybieramy interfejs
rv0
(klikając 2x w daną pozycję) i od teraz możemy nasłuchiwać wszelką komunikację telefonu ze światem zewnętrznym!
Przykład poniżej:
Dzięki takiemu nasłuchiwaniu pakietów jesteśmy w 100% pewni jakie zapytania generuje urządzenie, oraz tym samym jakie dostaje odpowiedzi z serwera.
FAQ
- Nie widzę w Safari na MacBooku żadnej strony na moim iPhonie?
- Zerknij na iPhone, czy przypadkiem nie zgasł Ci ekran. Aby korzystać z Remote debugging, musisz ciągle mieć otwartą aplikację Safari na pierwszym planie (musi być widoczne).
- Co to jest UUID urządzenia?
-
Pełne rozwinięcie akronimu to
Universally unique identifier
. Jednoznacznie identyfikuje urządzenie, które podłączyliśmy do komputera. Ciąg znaków jest 128-bitowy, więc ma 2128 kombinacji. Więcej szczegółów dostępnych na Wikipedii (hasło: Universally_unique_identifier).
Podsumowanie
Jak widać wystarczy kilka minut, aby podsłuchiwać dowolne narzędzie z rodziny Apple, czy to będzie iPhone, iPad czy iPod. Trzeba posiadać "kompatybilny" komputer z rodziny Apple. Po podłączeniu kabelkami możemy podglądać co tam "lata w tle".
Na oficjalnej stronie firmy Apple, w sekcji dla developerów, znajduje
się wyjaśnienie po angielsku, może dla kogoś będzie to przystępniejsza
forma pozyskania wiedzy.
Zapraszam do oficjalnego manuala na
developer.apple.com.