Czy istnieje prawdziwe rozwiązanie do debugowania aplikacji Cordova [zamknięte]

132

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.htmlWstrzykował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?

numediaweb
źródło

Odpowiedzi:

140

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/#devicesw 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ć.

wprowadź opis obrazu tutaj

Neotrixs
źródło
3
Widzę konsolę i moją aplikację w chrome na moim komputerze, podczas gdy mój smartfon jest podłączony przez USB. Bardzo fajne rozwiązanie.
emilie zawadzki
Nie znalazł mojego telefonu, dopóki nie pobiegłem adb start-server.
Leukipp
@Leukipp Też mam ten sam problem, ale potem dodaj ADT do startu systemu Windows. mój problem rozwiązany ...
Neotrixs
2
Odpowiedź przedstawia rozwiązanie niewłaściwego problemu - pytanie nie dotyczy debugowania przeglądarki, ale debugowania WebView. Są one nieco inne, co widać w przypadku wielu sfrustrowanych użytkowników zdezorientowanych, ponieważ ich WebViews, w których są wyświetlane ich aplikacje, nie pojawiają się w chrome://inspect.
rano
1
Android 4.4+ :( To jest powód ...
Candlejack
76

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 ;)

numediaweb
źródło
Brakowało mi właściwej konfiguracji adresu IP, teraz działa bez zarzutu, wielkie dzięki!
Juan Carlos Alpizar Chinchilla
8
Weinre nie jest debuggerem, pozwala tylko na inspekcje DOM, nie można debugować jsa, a nawet oglądać wiadomości z konsoli
Bogdan Mart
21
... w jaki sposób link do filmu z YouTube jest akceptowalną odpowiedzią?
Meekohi
2
@Meekohi nakręcił film :)
candlejack
10
Podobnie jak w przypadku wszystkich odpowiedzi typu stackoverflow - łącze do rozwiązania (niezależnie od tego, czy autor stworzył, czy nie), jest źle widziane. Przechowuj rozwiązania tutaj, a nie na zewnątrz, gdzie pewnego dnia mogą zniknąć.
DarkNeuron
56

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).

rdchambers
źródło
Wygląda świetnie - zauważyłem również, że dostępna jest wtyczka do kompilacji telefonu, która umożliwia włączenie tej funkcji.
DavidC
1
Zgodnie z Twoim komentarzem: funkcja jest wyłączona w kompilacjach --release (To nieprawda)
Luckyy
9
Re. to, znalazłem ten link przydatny. Uważnie użyj Chrome, by przejść do chrome://inspecti 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.
Sharadh,
problem z tym rozwiązaniem polega na tym, console.logże nie działa. Musisz przejść przez alertsco jest naprawdę ciężarem.
João Pimentel Ferreira
(it's turned off in --release builds).to ogłoszenie uratowało mi dzień!
maswerdna
32

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

José
źródło
7
Sprawdź dokładnie, czy Twoja odpowiedź będzie działać w warunkach OP. Debugger Chrome działa tylko z Androidem 4.4+.
Chris Neve
21

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/

Mitch
źródło
To jedna z najlepszych i najbardziej kompletnych odpowiedzi w tej sekcji komentarzy, mimo że nie pomaga OP z powodu 4.4+.
Chris Neve
7

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.

Zaxxo
źródło
1
Jest to niezbędne narzędzie, szczególnie dla użytkowników systemu Windows, którzy chcą połączyć się z iPhone'em z krokowym debugowaniem - bardzo je polecam.
mike nelson
7

Inną opcją jest program Visual Studio, który ma obsługę wersji wstępnej do debugowania aplikacji Cordova :

Ujednolicone środowisko debugowania . Programowanie międzyplatformowe często wymaga innego narzędzia do debugowania każdego urządzenia, emulatora lub symulatora. Różne narzędzia oznaczają różne przepływy pracy i utratę produktywności za każdym razem, gdy zmieniasz urządzenie. W programie Visual Studio można używać tych samych światowej klasy narzędzi do debugowania dla wszystkich celów wdrożenia, w tym systemu Windows, emulatora systemu Android, podłączonych urządzeń z systemem Android, urządzeń z systemem iOS i emulatorów oraz emulatora Apache Ripple.

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 .

Josh
źródło
Ponieważ niegdyś niesamowity XDK firmy Intel przestał obsługiwać swój debugger, musiałem poszukać nowej opcji. Visual Studio to jedyne, jakie znalazłem, które jest rozwiązaniem typu „wszystko w jednym” (IDE, debugger, menedżer wtyczek itp.). Konfiguracja zajmuje trochę czasu, ale jest bardzo prosta. Używam Enterprise 2015. Buduje, ale nie jestem pewien, czy jeszcze się opublikuje (nie osiągnąłem tego punktu).
Victor Stoddard
5

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.

sgimeno
źródło
5

Chcę tylko dodać, że możesz debugować aplikacje na Androida za pomocą Genymotion . To DUŻO szybciej niż standardowy emulator Androida.

Victor P
źródło
1
Genymotion pozwala na użycie zdalnego debugowania chrome, ponieważ nie jest traktowany jako emulator, ale jako prawdziwe urządzenie. Kamera i inne funkcje sprzętowe również działają, ale niektóre z nich są płatne.
shirk3y
4

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

Mohamed Selim
źródło
3

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?

Szybka naprawa
źródło
Dzięki za informacje; Wolę korzystać z darmowej cordova;) i teraz działa (sprawdź odpowiedź) dzięki! +1
numediaweb
1
sprawdź moją edycję, wydaje się, że chrome nie jest jednak daleko od twojego wymarzonego rozwiązania
QuickFix
Zauważ, że urządzenie, którego używam, działa pod kontrolą Androida 2.3, podczas gdy zdalne debugowanie Chrome wymaga systemu Android 4.4 lub nowszego. Ale dzięki "QuickFix"; Wszystko już działa ... zobacz mój tutorial;)
numediaweb
3

W systemie Android 4.4+ z zainstalowanym pakietem SDK:

adb logcat chromium:D SystemWebViewClient:D \*:S
Gringo Suave
źródło
2

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:

  • Podłącz urządzenie do komputera stacjonarnego za pomocą kabla USB
  • Włącz debugowanie USB na swoim urządzeniu (na moim urządzeniu jest to w Ustawieniach> Więcej> Opcje programisty> Debugowanie USB)

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.

  • Uruchom aplikację Cordova na urządzeniu lub w emulatorze
  • W Chrome na komputerze stacjonarnym wpisz chrome: // inspect / # devices w pasku adresu
  • Twoje urządzenie / emulator zostanie wyświetlone wraz z innymi rozpoznanymi urządzeniami podłączonymi do komputera, a pod Twoim urządzeniem będą znajdować się szczegóły dotyczące Cordova 'WebView' (w zasadzie aplikacja Cordova), który działa na urządzeniu / emulatorze ( sposób działania Cordova polega na tym, że w zasadzie tworzy okno `` przeglądarki '' na Twoim urządzeniu / emulatorze, w którym znajduje się `` WebView '', czyli Twoja uruchomiona aplikacja HTML / JavaScript)
  • Kliknij link „sprawdź” w sekcji „WebView”, w której znajduje się Twoje urządzenie / emulator. Spowoduje to wyświetlenie narzędzi programistycznych Chrome, które umożliwiają teraz debugowanie aplikacji.
  • Wybierz kartę „źródła” w narzędziach programistycznych Chrome, aby wyświetlić JavaScript, który jest aktualnie uruchomiona w aplikacji Cordova na urządzeniu / emulatorze. Możesz dodać punkty przerwania w kodzie JavaScript, które umożliwiają debugowanie kodu.
  • Możesz także użyć zakładki „konsola”, aby wyświetlić wszelkie błędy (które będą pokazane na czerwono) lub na dole konsoli zobaczysz znak zachęty „>”. Tutaj możesz wpisać dowolne zmienne lub obiekty (np. Obiekty DOM), dla których chcesz sprawdzić bieżącą wartość, a wartość zostanie wyświetlona.
Chris Halcrow
źródło
2

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/

brunettdan
źródło
ŚWIĘTY BEJEEZUS !!! WRESZCIE mogę debugować mój apk !!! Dziękuję bardzo, nie wiem, dlaczego nie jest to nigdzie bardziej widoczne. Dołączam te notatki dosłownie do pliku readme mojego projektu.
Josh
2

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/

Faraz Kelhini
źródło
W przypadku użytkowników Linuksa, w zależności od metody instalacji SDK, można go również znaleźć w ~ / Android / Sdk / tools / monitor lub po prostu spróbować wpisać monitor.
Strixy
2

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
dpfauwadel
źródło
1
Dzięki, ale znalazłem najlepsze podejście do debugowania projektu za pomocą weinre za pomocą zintegrowanej przeglądarki webkit samego urządzenia!
numediaweb
1
Po drugie, podczas gdy Ripple daje przeciętne wyobrażenie o tym, jak będzie wyglądać po wydaniu, co jest dobre, czasami są różnice w porównaniu emulatora i rzeczywistego urządzenia, głównie dlatego, że emulator współpracuje z silnikiem przeglądarki internetowej. ponownie na nim działa, co w niektórych sytuacjach nie jest takie samo, jak będzie działać Twoje urządzenie. Zwykle używam obu, ripple do projektowania interfejsu użytkownika i weinre do testowania zachowania, gdy coś nie działa zgodnie z oczekiwaniami
Juan Carlos Alpizar Chinchilla
2

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 .

  1. Włącz tryb programisty na swoim urządzeniu z Androidem (przejdź do ustawień -> o telefonie -> dotknij 7x numeru kompilacji).

  2. Połącz komputer z telefonem za pomocą kabla USB.

  3. 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.

  4. 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.

Tadej
źródło
Działa to na moim telefonie (Android 6), ale nie działa na moim tablecie (uwaga 8, Android 4.4)
Danielo515
Wystąpił problem z przeglądaniem sieci na Androidzie. Zainstalowanie wtyczki dla pieszych pozwala mi na debugowanie tego rodzaju na starszych urządzeniach (do Jelly Bean)
Danielo515
1

Kochałem weinre! Jak tego użyć:

Najpierw załóż swoje index.html(upewnij się, że app.settings.debugUrljest 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:

Na podstawie http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/

brauliobo
źródło
Weinre nie jest debuggerem, pozwala tylko na inspekcje DOM, nie można debugować jsa, a nawet oglądać wiadomości konsoli,
Bogdan Mart