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

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?

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

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

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

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

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/

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.

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 .

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.

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

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

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?

W systemie Android 4.4+ z zainstalowanym pakietem SDK:

adb logcat chromium:D SystemWebViewClient:D \*:S

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.

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/

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/

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

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.

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:

• zainstalować: sudo npm install -g weinre
• biegać: weinre --boundHost -all-
• otwórz w przeglądarce: http: // localhost: 8080 / client / # anonymous
• tarcze zegarka pojawiają się po otwarciu aplikacji

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

Urządzenia z Androidem <= 4.0.4 muszą dodać wtyczkę https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt