Debugowanie mobilnych aplikacji hybrydowych.

Programowanie aplikacji mobilnych jest bardzo ciekawą pracą. Tematyka tworzonych programów jest bardzo szeroka. Zawsze znajdzie się jakiś interesujący i innowacyjny projekt, który przynajmniej w teorii powinień komuś ułatwić pracę, albo dostarczyć rozrywki.

Programowanie jednak nieodzownie wiążę się z debugowaniem. Nie ma programu bez błędów, zwłaszcza w trakcie jego rozwijania. Aplikacje natywne debuguje się bardzo, bardzo prosto, tzn. bardzo prosto korzysta sie z dostępnych narzędzi, bo sam proces może być długi jeśli mamy akurat do czynienia z jakimś ciężkim problemem. Zarówno na platformie iOS jak i Android, wystarczy aplikację uruchomić w trybie debug i z łatwością możemy analizować działanie programu linijka po linijce. Z aplikacjami hybrydowymi nie jest już tak różowo. Dziś kilka słów na temat narzędzi, jakie są do dyspozycji programisty hybrydowych aplikacji mobilnych.

Debugowanie hybrydowych aplikacji mobilnych można podzielić na 2 grupy:

  • debugowanie części natywnych (tzw. kontenera),
  • debugowanie części napisanej w JavaScript, HTML5, CSS.

Jeśli chodzi o debugowanie części natywnych, to zasada jest ta sama jak w aplikacjach stricte natywnych. Nie ma tu żadnych skomplikowanych rzeczy. Stawiamy breakpoint, uruchamiamy w trybie debug i już. Gotowe.

Gorzej wygląda debugowanie tej drugiej części. Nie jest już to tak trywialną sprawą jak część natywna. Debugowanie części hybrydowej podzieliłbym jeszcze na 2 części:

  • analiza UI i poprawa błędów związanych z wyglądem aplikacji (głownie chodzi mi tutaj o definicje styli CSS)
  • analiza i poprawa błędów związanych z logiką biznesową napisaną w JavaScript.

Obie wyżej wymienione grupy operacji są ważne. W teorii powinno być tak, że skoro aplikacja poprawnie wygląda na iPhone, to na telefonie z Androidem również, bo w końcu to HTML + CSS. A jednak… różnice w implementacji przeglądarek są widoczne (szczególnie na starszych systemach operacyjnych – Android 4.2 i niżej). Te problemy wcale nie są tak mało spotykane jak się może wydawać.

A co z logiką biznesową? Szansa na problem związany z różnicą implementacji silnika JS  w przeglądarce mobilnej jest dużo mniejsza niż z CSS, ale nadal istnieje. Wystarczy przeczytać ten dokument.

W swojej pracy miałem okazje korzystać już z wielu narzędzi ułatwiających debugowanie. Postaram się je poniżej wymienić i w skrócie opisać.

 


Niniejszy post jest częścią serii postów pod tytułem: Jak stworzyć aplikację mobilną? Jeżeli zainteresowała Cię ta tematyka, to zachęcam do przeczytania pozostałych artykułów powiązanych z tworzeniem aplikacji mobilnych.


 

Web Inspector [+ JSHybugger]

Jest to narzędzie bardzo dobrze znane developerom tworzące aplikacje WWW. Jedyna różnica w stosunku do klasycznego zastosowania jest taka, że takiego Inspectora podłączamy sobie nie do okna przeglądarki na komputerze, ale do WebView w naszej aplikacji mobilnej.
Web Inspector
Aby uruchomić Web Inspectora dla platformy iOS musimy uruchomić aplikację hybrydową na iOS Simulator albo na urządzeniu, a następnie wybrać z menu: Develop -> [nazwa urządzenia] -> [instancja web view]

Niestety, ale dla starszych wersji systemu Android (<=4.3.x) nie mamy do dyspozycji tak łatwego sposobu. Musimy użyć zewnętrznych komponentów, aby osiągnąć nasz cel. Z czystym sumieniem mogę polecić narzędzie JSHybugger, z którego korzystam już ponad 1.5 roku. Przez ten czas nie miałem z nim żadnych problemów.

JSHybugger logo

Biblioteka JSHybugger umożliwia debugowanie części JS+HTML5 aplikacji mobilnej na systemach Android starszych niż wersja 4.4.x. Od wersji 4.4.x debugowanie dostępne jest już w samym systemie.

JSHybuggera.

Jak widać wyżej, Web Inspector powinien więc obsłużyć przynajmniej 2 najpopularniejsze platformy mobilne: iOS i Android.

Web Inspectora używamy zarówno do debugowania UI jak i logiki biznesowej. Dostarcza nam on maksimum funkcjonalności, tj.:

  • możemy podejrzeć kodu źródłowego plików,
  • mamy możliwość podejrzenia kolejności i zdarzeń sieciowych (np. kiedy który plik jest pobierany, kiedy i jaki asynchroniczny request jest wykonywany do serwera),
  • możemy zobaczyć zdarzenia w JavaScript,
  • możemy ustawić breakpointy w pożądanych miejscach,
  • mamy też sekcję do analizy call stack w momencie zatrzymania wykonywania aplikacji w danym breakpoint
  • możemy ustawić watchery na zmienne
  • mamy do dyspozycji consolę JavaScript, w której wyświetlane są logi oraz w której możemy wykonać dowolny kod w JavaScript (całkowicie nowe funkcje, czy funkcje zdefiniowane w naszej aplikacji)
  • no i w końcu jest też panel do inspekcji DOMu, czyli możemy zapoznać się z aktualną zawartością dokumentu, jego tagami, stylami przypisanymi do elementów, itd, itp.

Jak widać, jedno narzędzie dostarcza nam całą paletę możliwości.

Inne opcje

Oprócz w/w narzędzi mamy do dyspozycji jeszcze kilka innych ciekawych opcji, choć w mojej opinii nie są już one tak bardzo przydatne jak to, co wyżej, gdyż dostarczają jedynie pewien podzbiór możliwości web inspectora. Skorzystanie z nich powinno być raczej wyjątkiem niż regułą i powinno wynikać z problemów i niemożliwości zastosowanie Web Inspectora.

Weinre

Weinre to biblioteka działająca dla przeglądarek bazujących na WebKit. Jest to próba dostarczenia funkcjonalności Web Inspector’a. Napisałem próba, ponieważ Weinre jest napisane w JavaScript i nie jest natywnym komponentem przeglądarki. Z tego powodu posiada szereg ograniczeń w stosunku do Web Inspector’a. Nie będę się rozpisywał nt ograniczeń, ponieważ zasada znowu jest prosta: jeśli tylko Web Inspector jest narzędziem, którego możesz użyć, to użyj go i nie kombinuj 🙂 Jeśli jednak nie, to śmiało możesz spróbować tego narzędzia. Nie jest doskonałe, ale powinno pomóc w problemach.

StacktraceJS

StacktraceJS jest biblioteką, która umożliwia wypisanie stosu wywołań funkcji w miejscu w kodzie, w którym potrzebujemy takie informacje znać. Sam stos wywołań jest widoczny w narzędziu Web Inspector, zarówno w Safari jak i w Google Chrome. Zastosowanie tej biblioteki powinno być uzasadnione tylko niemożliwością użycia Web Inspectora i postawienia breakpointa w wybranym miejscu

SpyJS

Ze SpyJS nie miałem przyjemności korzystać. Na pierwszy rzut oka wygląda ciekawie. W tym poście umieszczone po to, abyś mógł się zapoznać z tą opcją, a być może będzie nawet dla Ciebie przydatna. SpyJS jest zintegrowane z WebStorm, dzięki czemu ułatwia debugowanie kodu JavaScript z poziomu tego IDE.

Na tym koniec na dzisiaj. Wiem, że nie rozpisałem tematu z maksymalną ilością detali, ale na omówienie funkcjonalności każdej z bibliotek poświęcono już bardzo dużo miejsca w dokumentacji stworzonej przez ich autorów 🙂 Mam nadzieję, że zebrane w tym jednym poście odnośniki ułatwią Ci pracę i nakierują na niezbędne zasoby, którę pomogą Ci rozwiązać problemy i przeprowadzić debugowanie Twojej aplikacji.

Dodaj komentarz