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ę.
Ryc. 1. Połączenie MacBook z iPhonem albo iPadem.
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
Ryc. 2. Otworzona strona example.org na iPhone.
MacBook: uruchamiasz Safari i wybierasz z menu górnego Programowanie, a potem iPhone (albo iPad, albo iPod)
Ryc. 3. Otwieramy zakładkę Programowanie → iPhone i widzimy wszystkie otwarte strony.
Jeżeli będziesz w takiej sytuacji:
Ryc. 4. Otwieramy zakładkę Programowanie → iPhone i nie widzimy otwartych stron.
...to w sekcji FAQ (na dole strony) znajdziesz rozwiązanie.
MacBook: wybierasz stronę example.org klikając w element menu.
Ryc. 5. Klikamy w konkretną stronę otwartą na Safari na iPhone.
MacBook: naszym oczom ukazują się narzędzia
developerskie znane z typowego debugowania pod Safari na OSX.
Ryc. 6. Otwarte DevToolsy (narzędzia developerskie),
które są podłączone do Safari uruchomionego na iPhone.
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.
Ryc. 7. Wireshark z listą interfejsów.
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, czyli Remote Virtual Interface Tool możemy zarządzać interfejsami.
Zobaczmy jak wygląda pełny opis narzędzia:
Ryc. 8. Program rvictl.
Skorzystamy z opcji -s, aby uruchomić kanał komunikacyjny między MacBookiem a iPhonem.
Potrzebujemy do tego UUID 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:
Ryc. 9. Program iTunes.
Następnie wybieramy nasze urządzenie:
Ryc. 10. Wybieramy iPhona w programie iTunes.
Klikamy w "Numer seryjny" aby pokazał nam się UUID urządzenia:
Ryc. 11. Wyświetlony UUID urządzenia iPhone.
Klikamy prawym przyciskiem myszy, pokazuje nam się menu kontekstowe z jedną opcją "kopiuj".
Przechodzimy do terminala i wpisujemy polecenie:
rvictl -s[UUID]
...zastępując [UUID] skopiowanym ciągiem znaków.
Resetujemy Wiresharka, a w nowej sesji programu widzimy listę interfejsów z nowym rv0:
Ryc. 12. Wireshark z dłuższą listą interfejsów (pojawił się interfejs 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:
Ryc. 13. Request HTTP do strony example.org widziany w programie Wireshark.
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.