Jak wyświetlić błędy javascript aplikacji PhoneGap w Xcode?

Chcę debugować moją aplikację PhoneGap w Xcode, ale jej Konsola nie może wyświetlać błędów JavaScript.

Najbardziej eleganckim sposobem przeglądania i debugowania błędów JavaScript w aplikacji Cordova / PhoneGap jest dołączenie inspektora sieci z przeglądarki Safari do widoku internetowego w aplikacji na iOS (ale jak już wspomniał Tom Clarkson, będziesz potrzebować co najmniej iOS 6 ).

• Na iPadzie lub iPhonie użyj aplikacji Ustawienia, aby włączyć Inspektora sieci w ustawieniach zaawansowanych przeglądarki Safari
• Podłącz urządzenie do komputera Mac przez USB (pojawi się wtedy w menu Develop w Safari)
• Uruchom aplikację
• Przejdź do widoku internetowego, który chcesz debugować
• Na komputerze Mac z menu Safari Develop wybierz nazwę swojego urządzenia i aplikacji (jej stronę HTML) z jej podmenu
• Otworzy się okno Inspektora sieci, w którym możesz przeglądać DOM, ustawiać punkty przerwania itp.

Dokumentacja jabłek na temat konfiguracji

Dokładny samouczek dla osób trzecich

Alternatywnie możesz podłączyć przeglądarkę internetową Chrome do urządzeń iOS po zainstalowaniu serwera proxy debugowania iOS WebKit . Otwiera to również możliwość przeprowadzenia inspekcji w systemie Linux lub Windows.

Zdalny dostęp do kodu HTML, CSS i JavaScript w systemie iOS stał się obecnie jeszcze bardziej elastyczny, ponieważ można zainstalować adapter RemoteDebug iOS WebKit na wyżej wymienionym serwerze proxy do debugowania. Ponieważ ten adapter przekłada WebKit zdalne debugowanie Protocol do Protokołu Chrome debugowania , to (na wszystkich swoich obsługiwanych platform) stają się dostępne jako alternatywne narzędzia do debugowania i inspekcji:

• Visual Studio Code
• Chrome DevTools
• Mozilla Debugger

BTW, zdalne debugowanie za pomocą Safari Web Inspector działa nawet w połączeniu z symulatorem iOS.

Minimalna wersja Desktop Safari na wersję iOS

Dla każdej wersji iOS będziesz potrzebować określonej minimalnej wersji Safari na komputer, aby móc korzystać ze zdalnej inspekcji sieciowej, zobacz poniższą listę.

iOS 6

Safari 6+

iOS 7

Safari 6.1+

iOS 8

Safari 7.1+

iOS 9

Safari 8+

iOS 10

Safari 9 + / 10 +? Proszę skomentuj; zawsze wypróbuj Safari Technology Preview

iOS 11

Safari 11+

iOS 12

Safari 12+

Wklej poniższy kod w pobliżu początku dokumentu, aby został wykonany przed jakimkolwiek innym JavaScriptem.

<script type="text/javascript">
    window.onerror = function(message, url, lineNumber) {
        console.log("Error: "+message+" in "+url+" at line "+lineNumber);
    }
</script>

I ciesz się przeglądaniem szczegółów błędów Javascript w oknie konsoli Xcode.

AKTUALIZACJA: Powyższa technika rejestruje błędy, takie jak niezdefiniowane zmienne. Ale błędy składniowe, takie jak brakujące przecinki, nadal powodują uszkodzenie całego skryptu bez rejestrowania czegokolwiek.

Dlatego na początku funkcji onDeviceReady należy dodać następujące elementy :

console.log('Javascript OK');

Jeśli po uruchomieniu aplikacji w oknie dziennika nie pojawia się komunikat „JavaScript OK”, oznacza to, że występuje gdzieś błąd składni.

Aby uniknąć szukania brakujących przecinków, najłatwiej wkleić kod do walidatora Javascript, takiego jak ten:

http://www.javascriptlint.com/online_lint.php

i pozwól mu znaleźć błąd za Ciebie.

Miejmy nadzieję, że rozwiąże to trochę bólu związanego z debugowaniem.

Zwróć uwagę, że w wersji 0.9.2 (wydanej dzisiaj) console.log została ustandaryzowana na wszystkich platformach do rejestrowania (z debug.log przestarzałym).

Istnieje funkcja, która jest dostępna w WebView dla komputerów stacjonarnych, która nie jest ujawniona w UIWebView iOS, która wyłapuje wszystkie błędy (próbuję włamać tę funkcję do wtyczki, która używa prywatnych interfejsów API, ale wtyczka byłaby tylko do programowania ), ale na razie zrób to, co zasugerował Kris powyżej i umieść bloki try catch w kodzie i użyj console.log

Aby szybko wyłapać możliwe błędy składni, podczas programowania mam załadowaną stronę w przeglądarce Safari na pulpicie i szybko ją odświeżam za pomocą konsoli błędów Webkit.

debug.log wyśle ​​wiadomości do konsoli XCode w Phonegap (co pozwala na zapisanie wyniku wyjątku lub wykonanie niektórych debugowania), jednak masz rację, że musisz debugować inne błędy javascript w Safari (na pulpicie lub na telefonie iPhone z włączoną konsolą debugowania). Nie znalazłem jeszcze błędu Javascript, który był spowodowany uruchomieniem na iPhonie i nie był obecny podczas debugowania przy włączonej konsoli w Safari (chociaż wiem, że istnieje kilka różnic między WebView a Safari na iPhonie).

Właśnie natknąłem się na Weinre

To zdalny debugger javascript dla phonegap. Możesz skonfigurować własny serwer Weinre lub użyć tego dostępnego pod adresem http://debug.phonegap.com/

Wygląda na to, że działa dobrze - na razie bardzo pod wrażeniem.

Jeśli używasz iOS 6, możesz po prostu podłączyć inspektora sieci safari (w menu tworzenia safari na komputerze) do swojej aplikacji i uzyskać pełne debugowanie javascript.

Jest kilka obszarów, w których jest to nieco ograniczone - błędy uruchamiania i wywołania wtyczek - ale działa dobrze w prawie wszystkim innym.

Aby wykonać debugowanie javascript w Xcode, chciałbym spojrzeć na następujące.

http://phonegap.com/2011/05/18/debugging-phonegap-javascript/
http://www.daveoncode.com/2010/01/12/debugging-phonegap-applications-using-xcode-console/

Jeśli chodzi o dodatkowe rozwiązywanie problemów ...
Na początek możesz uruchomić aplikację w Safari na swoim komputerze i użyć debugera Safari (lub Chrome, ponieważ oba mają podobne silniki renderujące). Nie wpłynie to na zaawansowane błędy logiczne i wiele problemów z interfejsem API, ale powinno przynajmniej pomóc w rozwiązaniu wielu problemów (podstawowy javascript, HTML5 itp.).

Aby wyświetlić wszystkie błędy w konsoli javascript, wyrażam zgodę na używanie tego nasłuchiwania zdarzeń

<script type="text/javascript">
    window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln );};
    var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error
</script>

Jednak jeśli nie masz zainstalowanej wtyczki cordova, nie będzie ona wyświetlana na „konsoli” XCodes. Przejdź do folderu swojego projektu i wpisz:

? cordova plugin add cordova-plugin-console

Dzięki temu polecenie javascript „console.log („ jakiś ciąg ”) będzie wyświetlane w XCode.

Zauważ, że będziesz potrzebować git, itp ... ale jeśli edytujesz projekt phonegap w xcode, najprawdopodobniej będziesz go mieć!

PS Pamiętaj, aby umieścić wtyczkę skryptu cordova.js przed każdym użyciem console.log

<script type="text/javascript" src="/cordova.js"></script>

Umieść to na początku swojego pliku index.html

<script type="text/javascript">
    window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln);};
    var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error
</script>

Oto prosty sposób, który zadziałał dla mnie:

• cd do katalogu zawierającego plik index.html w terminalu

• Uruchom serwer http za pomocą Pythona, wywołując (użyłem Pythona 2.7):

  python -m SimpleHTTPServer

• Wyświetl stronę w Safari wpisując adres serwera HTTPS w przeglądarce, dla mnie adres URL to:

  http://0.0.0.0:8000/
  

• Otwarte narzędzia programistyczne:

  W chrome jest to alt + command + i. Wyświetl kartę konsoli, może być konieczne odświeżenie strony.

  W Safari: Safari -> Preferencje -> Zaawansowane -> zaznacz „Pokaż menu programowania”. Menu rozwijania -> Pokaż konsolę błędów (lub alt + command + c). Odśwież stronę. Naciśnięcie CTRL + 5 otwiera kartę problemów.