Spędziłem ostatnie dwa dni, próbując dowiedzieć się, jak debugować aplikację HTML5, którą utworzyłem za pomocą Cordova 3.2 i wdrożyłem na urządzeniu z Androidem 2.3. Wszystkie artykuły / posty, które widziałem, zawierają raczej hacki niż rzeczywiste rozwiązania: (i przez większość czasu żaden z nich nie działa w moim przypadku; debuguj style css i kod Angularjs w mojej aplikacji.
Do tej pory testowałem;
debug.phonegap.com
index.html
Wstrzykowałem skrypt do pliku, a następnie odwiedziłem wygenerowany adres URL w debug.phonegap.com, ale nic się nie dzieje; tylko pusta strona.
Weinre
Większość artykułów, które znalazłem, wskazuje na przestarzałe repozytorium Github, które zawiera plik Jar ... ale nie zostało znalezione :(
Kontrola krawędzi
Działa i wyświetla stronę internetową, którą przeglądam na komputerze w telefonie komórkowym. Problem polega jednak na tym, że używa innej zintegrowanej przeglądarki (lub emulatora) niż ta, która obsługuje aplikacje phonegap; więc wyniki nie są dokładne.
Emulator Chrome
To samo, co inspekcja krawędzi; nie pozwala na przeglądanie prawdziwego zestawu internetowego v530, który jest dostarczany z systemem Android 2.3.
Wymarzone rozwiązanie
Idealnym rozwiązaniem byłoby rozszerzenie przeglądarki Google Chrome (komputer stacjonarny), które umożliwia przełączenie przeglądarki na komputer na tę samą, którą można znaleźć na platformach Android 2.3; bez emulacji bez hacków, tylko sama przeglądarka z zestawem web-kit v 530.
Niestety takiego rozwiązania nie ma :( czy się mylę?
Jakieś sugestie?
Odpowiedzi:
DLA ANDROID:
Wystarczy włączyć „zdalny debugger USB” w urządzeniu z systemem Android i podłączyć go za pomocą kabla USB. Następnie otwórz aplikację na urządzeniu. Chrome wykryje zdalną przeglądarkę i możesz zobaczyć konsolę w taki sam sposób, jak widzisz ją, gdy używasz Chrome lokalnie.
Użyj tego linku:
chrome://inspect/#devices
w przeglądarce Chrome (będziesz musiał wkleić go w pasku nawigacyjnym).Jeśli Twoja aplikacja ulegnie awarii na urządzeniu, wystarczy wyświetlić dziennik konsoli w przeglądarce i zobaczyć, co się stanie. Możesz także dodawać funkcje, zmieniać zmienne i nadpisywać funkcje w taki sam sposób, jak robimy to za pomocą naszej lokalnej przeglądarki.
Przeczytaj ten artykuł, aby uzyskać więcej informacji na temat kroków, jakie należy podjąć.
Będzie to działać TYLKO na urządzeniach z Androidem 4.4+.
DLA iOS:
Użyj Safari dla iOS, wykonaj następujące kroki:
1. Na urządzeniu iOS przejdź do Ustawienia> Safari> Zaawansowane> Inspektor sieci, aby włączyć Inspektor sieci
2. Otwórz Safari na swoim urządzeniu iOS.
3. Podłącz go do komputera przez USB.
4. Otwórz Safari na swoim komputerze.
W menu Safari przejdź do Develop i poszukaj nazwy swojego urządzenia.
6. Wybierz kartę, którą chcesz debugować.
źródło
adb start-server
.chrome://inspect
.OGŁOSZENIE
Ta odpowiedź jest stara (styczeń 2014 r.) Od tego czasu dostępnych jest wiele nowych rozwiązań do debugowania.
W końcu udało mi się to! używając weinre i cordova (bez kompilacji Phonegap) i aby uniknąć kłopotów przyszłych programistów, którzy mogą napotkać ten sam problem, zrobiłem samouczek na YouTube ;)
źródło
Jeśli możesz korzystać z urządzenia z Androidem 4.4 lub nowszym, możesz używać zdalnego debugowania Chrome nawet w wewnętrznym widoku sieciowym aplikacji. To znacznie lepszy debugger niż Weinre, ale kluczem jest najnowsza wersja Androida.
Najnowsze kompilacje Cordova automatycznie włączają ten rodzaj debugowania, o ile jest to kompilacja do debugowania (jest wyłączona w kompilacjach --release).
źródło
chrome://inspect
i upewnić się, że jest zaznaczona opcja „Odkryj urządzenia USB”. Spowoduje to wyświetlenie wszystkich możliwych do debugowania WebView na podłączonych urządzeniach.console.log
że nie działa. Musisz przejść przezalerts
co jest naprawdę ciężarem.(it's turned off in --release builds).
to ogłoszenie uratowało mi dzień!Najlepsze dla mnie jest dołączenie debuggera Chrome.
Aby to zrobić, uruchom aplikację w emulatorze lub urządzeniu (używając emulatora $ cordova)
następnie otwórz Google Chrome i przejdź do
chrome://inspect/
Zobaczysz listę z uruchomionymi aplikacjami. Twoja aplikacja powinna tam być. Kliknij „Sprawdź”.
Otworzy się nowe okno z narzędziami programistycznymi. Tam możesz kliknąć „konsola”, aby sprawdzić błędy
źródło
Jeśli Twoja aplikacja działa na Cordova 3.3+, a na Twoim urządzeniu działa Android 4.4+, możesz użyć Chrome Remote Webview Debugging, aby debugować aplikację Cordova.
Aby to zrobić, musisz najpierw włączyć debugowanie USB w telefonie.
Następnie otwórz kartę „Sprawdź urządzenia”. W Chrome przejdź do Ustawienia > Więcej narzędzi > Sprawdź urządzenia .
Jeśli uruchomisz aplikację na swoim urządzeniu, gdy jest ono podłączone do komputera, aplikacja Webview powinna pojawić się na liście urządzeń. Kliknij łącze „Sprawdź” w widoku Webview, a powinno pojawić się narzędzie do debugowania widoku internetowego.
Oto artykuł w pełni wyjaśniający, jak to zrobić: http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/
źródło
Czy próbowałeś „GapDebug” ? Jest wolne.
Wydaje się, że integruje wersje Safari Webkit Inspector i Chrome Dev Tools, aby zaoferować zintegrowane środowisko debugowania w systemach OS X i Windows.
źródło
Inną opcją jest program Visual Studio, który ma obsługę wersji wstępnej do debugowania aplikacji Cordova :
Teraz, gdy firma Microsoft udostępniła bezpłatnie wersję Visual Studio Community , możesz wypróbować ją bezpłatnie. Musisz pobrać zarówno program Visual Studio, jak i Visual Studio Tools dla Apache Cordova .
źródło
O ile mi wiadomo, jedynym wydajnym narzędziem do prawdziwego debugowania w aplikacjach Cordova na platformy Android od 2.2 do 4.3 jest jshybugger . Weinre to inspektor, a nie debugger. JsHybugger instrumentuje Twój kod, umożliwiając debugowanie wewnątrz Android WebView.
źródło
Chcę tylko dodać, że możesz debugować aplikacje na Androida za pomocą Genymotion . To DUŻO szybciej niż standardowy emulator Androida.
źródło
Możesz użyć IDE Intel XDK do programowania i debugowania na emulatorze lub na prawdziwym urządzeniu
Uważam również, że narzędzia Visual Studio 2015 RC dla Cordova są bardzo dobre, z emulatorem ripple
źródło
Jeśli używasz kompilacji phonegap, istnieje opcja włączenia debugowania.
W przypadku kompilacji lokalnych możesz zainstalować weinre za pomocą npm: https://npmjs.org/package/weinre
I link do dokumentów weinre: http://people.apache.org/~pmuellr/weinre/docs/latest/
I jest coś, co nazywa się zdalnym debugowaniem Chrome, ale nie wiem o tym zbyt wiele, możesz rzucić okiem na artykuł Raymonda Camdena: http://www.raymondcamden.com/index.cfm/2014/1/2/Apache- Cordova-33-and-Remote-Debugging-for-Android
Dokumenty do zdalnego debugowania chrome: https://developers.google.com/chrome-developer-tools/docs/remote-debugging (jeśli dobrze zrozumiałem, potrzebujesz urządzenia z Androidem z Chrome jako domyślną przeglądarką) Może najbliżej Twojego marzenia rozwiązanie?
źródło
W systemie Android 4.4+ z zainstalowanym pakietem SDK:
adb logcat chromium:D SystemWebViewClient:D \*:S
źródło
Jeśli używasz Cordova 3.3 lub nowszego, a na Twoim urządzeniu działa Android 4.4 lub nowszy , możesz skorzystać z funkcji „Zdalne debugowanie w systemie Android z Chrome”. Pełne instrukcje są tutaj:
https://developer.chrome.com/devtools/docs/remote-debugging
W podsumowaniu:
Lub , jeśli używasz Cordova 3.3+ i nie masz fizycznego urządzenia z 4.4, możesz użyć emulatora, który używa Androida 4.4+, aby uruchomić aplikację przez emulator na swoim komputerze stacjonarnym.
źródło
Oto rozwiązanie wykorzystujące Phonegap Build. Dodaj poniższy kod do pliku config.xml, aby móc sprawdzić za pomocą zdalnego debugowania Chrome Webview.
Najpierw upewnij się, że tag widżetu zawiera xmlns: android = "http://schemas.android.com/apk/res/android"
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android" id="me.app.id" version="1.0.0">
Następnie dodaj następujące elementy
<gap:config-file platform="android" parent="/manifest"> <application android:debuggable="true" /> </gap:config-file>
U mnie działa na Nexusie 5, Phonegap 3.7.0.
<preference name="phonegap-version" value="3.7.0" />
Zbuduj aplikację w Phonegap Build, zainstaluj pakiet APK, podłącz telefon do USB, włącz debugowanie USB w telefonie, a następnie odwiedź chrome: // inspect.
Źródło: https://www.genuitec.com/products/gapdebug/learning-center/configuration/
źródło
Użyj monitora urządzeń z systemem Android
Monitor urządzeń z systemem Android jest dostarczany z pakietami z pakietem SDK systemu Android, który byłby wcześniej zainstalowany. W monitorze urządzenia możesz zobaczyć cały dziennik urządzenia, wyjątki, wiadomości wszystko. Jest to przydatne do debugowania awarii aplikacji lub innych podobnych problemów. Aby to uruchomić, przejdź do folderu tools / wewnątrz zestawu SDK systemu Android „/ var / android-sdk-linux / tools”. Następnie wykonaj następujące czynności
chmod +x monitor ./monitor
Jeśli korzystasz z systemu Windows, otwórz bezpośrednio plik monitor.exe. Pod „LogCat” znajduje się zakładka, w której zobaczysz wszystkie komunikaty dotyczące urządzenia. Zobaczysz tutaj wszystkie wiadomości, w tym wyjątki urządzeń z Androidem, które nie są widoczne, sprawdź urządzenie Chrome. Upewnij się, że utworzyłeś filtry za pomocą zakładki logowania „+” w logcat, dzięki czemu zobaczysz komunikaty tylko dla swojej aplikacji.
Źródło: http://excellencenodejsblog.com/phonegap-debugging-your-android-application/
źródło
monitor
.Możesz także debugować za pomocą Chrome swoje aplikacje HTML5
Tworzę .bat, aby otworzyć chrome w trybie debugowania
cd C:\Program Files (x86)\Google\Chrome\Application chrome.exe "file:///C:\Users\***.html" --allow-file-access-from-files --disable-web-security
źródło
Możesz zdalnie debugować aplikacje Cordova na Androida, które są zainstalowane w telefonie, z komputera za pomocą kabla USB (możesz też zdalnie kliknąć aplikację internetową tak, jakbyś przeglądał aplikację internetową na swoim komputerze) za pomocą „Chrome Remote Debugging”. W ten sposób możesz również debugować aplikację internetową wyświetlaną w przeglądarce Stock Android lub Chrome na Androida .
Włącz tryb programisty na swoim urządzeniu z Androidem (przejdź do ustawień -> o telefonie -> dotknij 7x numeru kompilacji).
Połącz komputer z telefonem za pomocą kabla USB.
Uruchom Chrome na komputerze i przejdź do chrome: // inspect i kliknij przycisk „Sprawdź” obok urządzenia zdalnego, które chcesz debugować (na karcie „Urządzenia”). LUB kliknij prawym przyciskiem myszy w Chrome na swoim komputerze -> Sprawdź -> Dostosuj i kontroluj DevTools (3 pionowe kropki - prawy górny róg narzędzi programistycznych) -> Więcej narzędzi -> Urządzenia zdalne -> w obszarze Urządzenia po lewej stronie kliknij urządzenie, do którego jesteś podłączony przez USB -> kliknij przycisk Sprawdź dla żądanej aplikacji.
Następnie kliknij „Konsola” i możesz debugować JavaScript w taki sam sposób, jak w przypadku zwykłej aplikacji internetowej z narzędziami programistycznymi Chrome.
źródło
Kochałem weinre! Jak tego użyć:
Najpierw załóż swoje
index.html
(upewnij się, żeapp.settings.debugUrl
jest ustawione przed tym):<!-- Weinre debugging --> <script type="text/javascript"> if (app.settings.debugUrl) { document.addEventListener("DOMContentLoaded", function(event) { var s = document.createElement("script") s.setAttribute("src", app.settings.debugUrl+"/target/target-script-min.js#anonymous") document.getElementsByTagName("body")[0].appendChild(s) }); } </script>
Następnie:
sudo npm install -g weinre
weinre --boundHost -all-
Na podstawie http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/
źródło
Urządzenia z Androidem <= 4.0.4 muszą dodać wtyczkę https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt
źródło