Gibt es eine echte Lösung zum Debuggen von Cordova Apps

Ich habe die letzten zwei Tage damit verbracht, herauszufinden, wie man eine HTML5-App, die ich mit Cordova 3.2 erstellt und auf einem Android 2.3-Gerät bereitgestellt habe, debugging. Alle Artikel / Beiträge, die ich gesehen habe, bieten Hacks anstatt echte Lösungen: (und die meiste Zeit, keiner von ihnen arbeitet für meinen Fall, debug die CSS-Styles und die Angularjs-Code in meiner App ..

Bisher habe ich getestet;

  • Versuche zu UNINSTALL_SHORTCUT aber Verknüpfung wird nicht weggehen
  • Retrofit + RxJava schlägt keine Antworten vor, vermutete Antwort-Header
  • TextView in Listenansicht Zeilen mit wiederholten Werten auf Scroll in Android?
  • Übergeben von Berührungsereignissen in die übergeordnete Ansicht
  • Warum nimmt ein LinearLayout, das unsichtbar ist, Platz ein?
  • Wie man die Tastatur in jquery mobile programmgesteuert auf Fokus versteckt ()
  • Debug.phonegap.com

    Ich habe das Skript an die index.html Datei gesendet, dann besuchte die generierte URL in debug.phonegap.com aber nichts passiert; Nur eine leere seite.

    Weinre

    Die meisten der Artikel, die ich gefunden habe, verlor das Github-Repository, das eine Jar-Datei zählt. Aber es ist nicht gefunden πŸ™

    Rand inspizieren

    Es funktioniert und zeigt die Webseite Ich bin auf dem PC im Handy .. Aber das Problem ist, dass es einige andere integrierte Browser (oder Emulator) als die, die Phonegap-Anwendungen läuft, So dass die Ergebnisse nicht korrekt sind.

    Chrom Emulator

    Gleich wie Edge inspizieren; Es erlaubt nicht, echtes Web-Kit v530 zu sehen, das mit Android 2.3 ausgeliefert wird.

    Die Traumlösung

    Die perfekte Lösung wäre eine Erweiterung zu Google Chrome (Desktop), mit dem Sie den Desktop-Browser auf denselben verwandeln können, der auf Android 2.3 Plattformen gefunden wird. Keine Emulation keine Hacks, nur der Browser selbst mit Web-Kit v 530.

    Leider gibt es eine solche lösung nicht πŸ™ oder ich irre mich

    Irgendwelche Vorschläge?

  • Wie erstelle ich meinen Popupmenu-Code mit der Liste popupwindow?
  • Android: Effiziente Screen Rotation Handling
  • Android Bitmap-Kanäle bearbeiten
  • Abgeschlossen mit Non Nero Exit Value 3
  • Wie kann ich Android Chrome Homescreen App beim Start autorun
  • Wie schreibe ich exif Daten ins Bild in Android?
  • 19 Solutions collect form web for “Gibt es eine echte Lösung zum Debuggen von Cordova Apps”

    BEACHTEN

    Diese Antwort ist alt (Januar 2014) viele neue Debugging-Lösungen sind seitdem verfügbar.


    Ich habe es endlich gearbeitet! Mit weinre und cordova (kein Phonegap-Build) und um Ärger für zukünftige Devs zu retten, die das gleiche Problem sehen können, habe ich ein YouTube-Tutorial gemacht πŸ˜‰

    FÜR ANDROID:

    Sie müssen nur "USB Remote Debugger" in Ihrem Android-Gerät und Stecker mit einem USB-Kabel zu aktivieren. Dann öffne deine Anwendung im Gerät. Chrome erkennt den Remote-Browser und Sie können die Konsole auf die gleiche Weise sehen, als Sie es sehen, wenn Sie Chrome lokal verwenden.

    Verwenden Sie diesen Link: chrome://inspect/#devices im Chrome Browser (Sie müssen ihn in die Navigationsleiste einfügen).

    Wenn Ihre App im Gerät abstürzt, müssen Sie nur das Protokoll der Konsole in Ihrem Browser sehen und sehen, was passiert. Sie können auch Funktionalität hinzufügen, Variablen ändern und Funktionen auf die gleiche Weise überschreiben, als wir es mit unserem lokalen Browser machen.

    Dies funktioniert NUR mit Geräten mit Android 4.4+.

    Für iOS:

    Verwenden Sie Safari für iOS, gehen Sie folgendermaßen vor:

    1.In deinem iOS-Gerät gehe zu Einstellungen> Safari> Erweitert> Web Inspector, um den Web Inspector zu aktivieren

    2.Öffnen Safari auf deinem iOS-Gerät.

    3.Schließen Sie es an Ihren Computer über USB an.

    4.Öffnen Safari auf deinem Computer.

    5.In Safari's Menü, gehen Sie zu Entwickeln und suchen Sie nach dem Namen Ihres Geräts.

    6.Wählen Sie die Registerkarte, die Sie debuggen möchten.

    Bildbeschreibung hier eingeben

    Wenn Sie ein Android 4.4+ Gerät verwenden können, können Sie Chrome Remote Debugging auch auf der internen WebView der App verwenden. Es ist ein viel besseres Debugger als Weinre, aber der Schlüssel benutzt die aktuelle Android-Version.

    Aktuelle Cordova baut automatisch diese Art von Debugging, solange es ein Debug-Build (es ist ausgeschaltet in –Release baut).

    Das Beste für mich ist, den Chrome Debugger anzubringen.

    Um es zu tun, führen Sie Ihre App in einem Emulator oder Gerät (mit $ cordova emulieren)

    Dann öffnen Sie Google Chrome und gehen Sie zu chrome://inspect/

    Sie sehen eine Liste mit laufenden Apps. Deine app sollte da sein Klicken Sie auf "Inspektion".

    Ein neues Fenster öffnet sich mit Entwicklertools. Dort können Sie auf "Konsole" klicken, um nach Fehlern zu suchen

    Wenn Ihre App läuft Cordova 3.3+ und Ihr Gerät läuft Android 4.4+ dann können Sie Chrome Remote Webview Debugging verwenden , um Ihre Cordova App zu debuggen.

    Um dies zu tun, musst du zuerst das USB-Debugging auf deinem Handy aktivieren.

    Dann öffnen Sie die Registerkarte "Inspektionen". In Chrome gehen Sie zu Einstellungen > Mehr Werkzeuge > Geräte überprüfen .

    Wenn Sie Ihre App auf Ihrem Gerät starten, während sie mit Ihrem Computer verbunden ist, sollte das Webview in der Geräteliste erscheinen. Klicken Sie auf den Link "Inspect" Ihres Webview und ein Debug-Tool für Ihr Webview.

    Hier ist ein Artikel vollständig erklären, wie es zu tun: http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/

    Hast du versucht 'GapDebug' ? Es ist kostenlos.

    Es scheint, Versionen des Safari Webkit Inspector und Chrome Dev Tools zu integrieren, um eine integrierte Debugging-Erfahrung auf OS X und Windows anzubieten.

    Eine weitere Option ist Visual Studio, das eine Vorab-Unterstützung für das Debuggen von Cordova-Apps bietet:

    Unified Debugging-Erfahrung . Cross-Plattform-Entwicklung erfordert oft ein anderes Werkzeug für das Debuggen jedes Gerätes, Emulators oder Simulators. Verschiedene Werkzeuge bedeuten unterschiedliche Arbeitsabläufe und verlieren die Produktivität jedes Mal, wenn Sie Geräte wechseln. Mit Visual Studio können Sie die gleichen World-Class-Debugging-Tools für alle Bereitstellungsziele verwenden, darunter Windows, den Android-Emulator, angehängte Android-Geräte, iOS-Geräte und Emulatoren sowie den Apache-Ripple-Emulator.

    Jetzt, da Microsoft Visual Studio Community Edition kostenlos veröffentlicht hat , können Sie dies einen Versuch ohne Kosten geben. Sie müssen sowohl Visual Studio als auch Visual Studio Tools für Apache Cordova herunterladen.

    Soweit ich weiß, ist das einzige produktive Tool für echtes Debugging in Cordova Apps für Android Plattformen von 2,2 bis 4,3 ist Jshybugger . Weinre ist ein Inspektor, kein Debugger. JsHybugger instrumentiert deinen Code, so dass du im Android WebView debuggen kannst.

    Ich möchte nur hinzufügen, dass du Android-Apps mit Genymotion debuggen kannst . Es ist viel schneller als der Stock-android-Emulator.

    Sie können Intel XDK IDE verwenden, um Emulator oder auf echtes Gerät zu entwickeln und zu debuggen

    Ich habe auch Visual Studio 2015 RC Tools für Cordova sehr gut gefunden, mit seinem Ripple Emulator

    Wenn Sie den Phonegap-Build verwenden, gibt es eine Option, um Debug zu aktivieren.


    Für lokale Builds können Sie weinre mit npm installieren: https://npmjs.org/package/weinre

    Und der Link zum weinre docs: http://people.apache.org/~pmuellr/weinre/docs/latest/


    Und es gibt etwas namens Chrome Remote Debugging, aber ich weiß nicht viel darüber, können Sie einen Blick auf Raymond Camden's Artikel: http://www.raymondcamden.com/index.cfm/2014/1/2/Apache- Cordova-33-und-Remote-Debugging-für-Android

    Docs für das Chrome Remote Debugging: https://developers.google.com/chrome-developer-tools/docs/remote-debugging (wenn ich richtig verstanden habe, brauchst du ein Android-Gerät mit Chrom als Standardbrowser) Vielleicht am nächsten zu deinem Traum Lösung?

    Auf Android 4.4+ w / SDK installiert:

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

    Sie können auch mit Chrom Ihre html5 Apps debuggen

    Ich schaffe ein .bat, um Chrom im Debug-Modus zu öffnen

     cd C:\Program Files (x86)\Google\Chrome\Application chrome.exe "file:///C:\Users\***.html" --allow-file-access-from-files --disable-web-security 

    Sie können Cordova Android Applikationen, die auf Ihrem Telefon installiert sind, von Ihrem Computer über das USB-Kabel aus debuggen (Sie können auch per Fernzugriff auf die Webanwendung klicken, als ob Sie die Webanwendung von Ihrem Compueter ansehen würden) mit "Chrome Remote Debugging". Sie können auch Debug-Web-Anwendung in der Stock Android-Browser oder Chrome auf Android auf diese Weise angesehen.

    1. Aktivieren Sie den Entwicklermodus auf Ihrem Android-Gerät (gehen Sie zu den Einstellungen -> über das Telefon -> Tippen Sie auf 7x auf die Buildnummer).

    2. Verbinden Sie Ihren Computer mit Ihrem Telefon über USB-Kabel.

    3. Lunch Chrome auf deinem Computer und navigiere zu Chrom: // Inspektion und Klick auf die Schaltfläche "Inspect" neben dem entfernten Gerät, das du debuggen möchte (auf der Registerkarte "Devices"). ODER Rechtsklick in Chrome auf deinem Computer -> Inspect -> Costumize und Control DevTools (3 vertikale Punkte – obere rechte Ecke der Entwickler-Tools) -> Weitere Tools -> Remote Devices -> unter Devices auf der linken Seite, klicken Sie auf Ihre Gerät, an das Sie über USB angeschlossen sind -> klicken Sie auf die Schaltfläche Inspektion für die gewünschte Anwendung.

    4. Dann klicke auf "Konsole" und du kannst JavaScript auf die gleiche Art und Weise debuggen, wie bei einer normalen Webanwendung mit Chrome Entwicklerwerkzeugen.

    Ich habe weinre geliebt! Wie man es benutzt:

    Zuerst setzen Sie auf Ihre index.html (stellen app.settings.debugUrl sicher, dass app.settings.debugUrl vor diesem gesetzt ist):

      <!-- 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> 

    Dann:

    • Installieren: sudo npm install -g weinre
    • Laufen: weinre --boundHost -all-
    • Öffnen Sie im Browser: http: // localhost: 8080 / client / # anonymous
    • Sehen Sie die Ziele, wenn Sie die App öffnen

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

    Wenn Sie Cordova 3.3 oder höher verwenden und Ihr Gerät Android 4.4 oder höher läuft , können Sie 'Remote Debugging auf Android mit Chrome' verwenden. Ausführliche Anleitungen sind hier:

    https://developer.chrome.com/devtools/docs/remote-debugging

    Zusammenfassend:

    • Schließen Sie das Gerät mit einem USB-Kabel an Ihren Desktop-Computer an
    • Aktivieren Sie das USB-Debugging auf Ihrem Gerät (auf meinem Gerät ist dies unter Einstellungen> Mehr> Entwickleroptionen> USB-Debugging)

    Oder wenn du Cordova 3.3+ benutzt hast und kein physisches Gerät mit 4.4 hast, kannst du einen Emulator verwenden, der Android 4.4+ benutzt, um die Anwendung über den Emulator auf deinem Desktopcomputer auszuführen.

    • Führen Sie Ihre Cordova-Anwendung auf dem Gerät oder Emulator
    • In Chrome auf deinem Desktop-Computer Chrom eingeben: // Inspektion / # Geräte in der Adressleiste
    • Ihr Gerät / Emulator wird zusammen mit allen anderen erkannten Geräten angezeigt, die mit Ihrem Computer verbunden sind, und unter Ihrem Gerät werden Details des Cordova 'WebView' (grundsätzlich Ihre Cordova App), die auf dem Gerät / Emulator läuft ( Die Art und Weise, wie Cordova funktioniert, ist, dass es grundsätzlich ein "Browser" -Fenster auf Ihrem Gerät / Emulator erstellt, in dem es eine "WebView" gibt, die Ihre laufende HTML / JavaScript App ist)
    • Klicken Sie auf den 'Inspect' Link unter dem 'WebView' Abschnitt, wo Sie sehen, Ihr Gerät / Emulator aufgeführt. Dies bringt die Chrome-Entwickler-Tools, die jetzt ermöglichen es Ihnen, Ihre Anwendung zu debuggen.
    • Wählen Sie die Registerkarte 'Quellen' der Chrome-Entwickler-Tools, um JavaScript anzuzeigen, dass Ihre Cordova App auf dem Gerät / Emulator aktuell läuft. Sie können Breakpoints in das JavaScript hinzufügen, mit denen Sie Ihren Code debuggen können.
    • Außerdem können Sie die Registerkarte 'Konsole' verwenden, um Fehler anzuzeigen (die in rot angezeigt werden) oder am unteren Rand der Konsole sehen Sie eine Aufforderung ">". Hier können Sie beliebige Variablen oder Objekte (zB DOM-Objekte) eingeben, die Sie den aktuellen Wert überprüfen möchten, und der Wert wird angezeigt.

    Hier ist die Lösung mit Phonegap Build. Fügen Sie folgend Ihrem config.xml hinzu, um mit Chrome Remote Webview Debugging inspizieren zu können.

    Zuerst stellen Sie sicher, dass Ihr Widget-Tag enthält xmlns: android = "http://schemas.android.com/apk/res/android&quot;

     <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"> 

    Fügen Sie dann folgendes hinzu

     <gap:config-file platform="android" parent="/manifest"> <application android:debuggable="true" /> </gap:config-file> 

    Es funktioniert für mich auf Nexus 5, Phonegap 3.7.0.

     <preference name="phonegap-version" value="3.7.0" /> 

    Erstellen Sie die App in Phonegap Build, installieren Sie die APK, verbinden Sie das Telefon mit dem USB, aktivieren Sie USB-Debugging auf Ihrem Telefon dann besuchen Sie Chrom: // Inspektion.

    Quelle: https://www.genuitec.com/products/gapdebug/learning-center/configuration/

    Verwenden Sie Android Device Monitor

    Android Device Monitor kommt Pakete mit Android Sdk, die Sie zuvor installiert haben. Im Gerät überwachen können Sie sehen, Sie ganze Geräte-Log, Ausnahmen, Nachrichten alles. Dies ist nützlich, um Anwendungsabstürze oder andere solche Probleme zu debuggen. Um dies zu führen, geh zum Werkzeug / Ordner in deinem android sdk "/ var / android-sdk-linux / tools". Führen Sie dann folgendes aus

     chmod +x monitor ./monitor 

    Wenn Sie auf Windows sind, öffnen Sie direkt die Datei "monitor.exe". Es gibt eine Registerkarte unten "LogCat", wo Sie alle gerätebezogene Nachricht sehen werden. Sie sehen alle Nachrichten hier einschließlich der androiden Geräteausnahmen, die nicht sichtbar sind, Chrom-Inspektionsgerät. Achten Sie darauf, Filter mit der Registerkarte "+" in der Registerkarte "Logcat" zu erstellen, damit Sie nur Nachrichten für Ihre Anwendung sehen.

    Quelle: http://excellencenodejsblog.com/phonegap-debugging-your-android-application/

    Geräte mit Android <= 4.0.4 müssen das Plugin https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt hinzufügen

    Das Android ist ein Google Android Fan-Website, Alles ΓΌber Android Phones, Android Wear, Android Dev und Android Spiele Apps und so weiter.