#7 Debugowanie Webview

Tomasz Piątek -

Cześć!

Debugowanie aplikacji webowych, które są umieszczone w aplikacjach mobilnych jako webview jest dość problematyczne, szczególnie dla iOS i na tym skupię się dzisiaj.

Debugowanie w Androidzie

Zacznę od robocika, bo jest to znacznie łatwiejsze.

W przypadku Androida wystarczy:

  • telefon z zainstalowaną aplikacją w wersji z włączoną opcją debugowania - po odpowiednią wersję lub telefon z zainstalowaną wersją musisz się zgłosić do naszych testerów 😎
  • odpowiedni kabel 😀
  • aktywacja Debugowanie USB w opcjach programistycznych w ustawieniach

Następnie w Chrome wpisujemy chrome://inspect i zobaczysz webview, który masz włączony w aplikacji. Klikasz Inspect i… gotowe. Rób co chcesz, jak ze zwykłą stroną 😀

Debugowanie w iOS

Z 🍎 jest trochę gorzej. Niestety Safari pozwala na debugowanie tylko i wyłącznie stron, które mamy otwarte w przeglądarce.

Potrzebujesz:

  • komputer z systemem Apple 😈
  • xcode wraz z symulatorami, na których chcesz sprawdzić. Domyślnie jest zainstalowany symulator z najnowszą wersją iOS.
  • aplikację, w której jest odpalany webview

Od razu nasuwa się na myśl pytanie skąd wezmę aplikację? Są co najmniej dwa wyjścia: możesz napisać sam 🙉 lub użyć gotowca 🥷. Zdecydowanie łatwiejsza wydaje się druga ścieżka i jeśli nie masz doświadczenia z xcode to wystarczy. Poniższy tutorial oparłem o aplikację, która jest dołączona do maila 🙂

Po załadowanie projektu do xcode musisz ustawić minimalną wymaganą wersję iOS:

Jeśli już masz przygotowane środowisko do pracy to zaczynamy od ustawienia URL w pliku ViewController.swift jaki ma się otworzyć w webview:

override func viewDidLoad() {
        super.viewDidLoad()
        let url = URL(string: "<https://google.pl>")!
        webView.load(URLRequest(url: url))
        webView.allowsBackForwardNavigationGestures = true
    }

Następnie klikasz w ikonkę ▶️. Po chwili zobaczysz urządzenie z odpalaną aplikacją i swoją stroną.

Najtrudniejsze masz za sobą, teraz tylko z górki ;)

Kolejny krok to włączenie Safari, wybranie webview z zakładki Programowanie (jeśli jej nie masz to musisz aktywować narzędzia developerskie w Safari, ale zakładam że jako developer już to masz zrobione).

I… to tyle 🙂 Od teraz masz możliwość debugować webview w Safari. Oczywiście nie jest to idealnie, bo to nie docelowa aplikacja, ale większość problemów jakie są specyficzne dla iPhone możesz w ten sposób wykryć i rozwiązać.

Problemy z CORS

Czasem jeśli korzystasz z zewnętrznego API mogą się pojawić problemy z CORS. W normalnej przeglądarce rozwiązaniem jest instalacja wtyczki.

Ale jest na to lepszy sposób - proxy. Dla Angulara opis znajdziesz w dokumentacji i to wszystko 🙂

#bonus

Na koniec ciekawostka Angularowa - operator memo, który może dodać duży boost do wydajności, może chcesz sprawdzić? 😊