Gibt es eine echte Lösung zum Debuggen von Cordova-Apps [geschlossen]

In den letzten zwei Tagen habe ich versucht, herauszufinden, wie eine HTML5-App, die ich mit Cordova 3.2 erstellt und auf einem Android 2.3-Gerät bereitgestellt habe, debuggt werden kann. Alle Artikel / Beiträge, die ich gesehen habe, bieten eher Hacks als echte Lösungen :( und meistens funktioniert keiner von ihnen für meinen Fall; debuggen Sie die CSS-Stile und den Angularjs-Code in meiner App.

Bisher habe ich getestet;

debug.phonegap.com

Ich habe das Skript in die index.htmlDatei eingefügt und dann die generierte URL in debug.phonegap.com besucht, aber es passiert nichts. nur eine leere Seite.

Weinre

Die meisten Artikel, die ich gefunden habe, weisen auf ein veraltetes Github-Repository hin, das eine Jar-Datei enthält. Aber es wurde nicht gefunden :(

Kanten prüfen

Es funktioniert und zeigt die Webseite, die ich auf dem PC im Handy durchsuche. Das Problem ist jedoch, dass ein anderer integrierter Browser (oder Emulator) als der verwendet wird, auf dem Phonegap-Apps ausgeführt werden. Daher sind die Ergebnisse nicht genau.

Chrome-Emulator

Gleich wie Edge inspect; Es ist nicht möglich, echtes Web-Kit v530 anzuzeigen, das mit Android 2.3 geliefert wird.

Die Traumlösung

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

Leider gibt es eine solche Lösung nicht :( oder irre ich mich?

Irgendwelche Vorschläge?

FÜR ANDROID:

Sie müssen nur "USB Remote Debugger" in Ihrem Android-Gerät aktivieren und mit einem USB-Kabel anschließen. Öffnen Sie dann Ihre Anwendung im Gerät. Chrome erkennt den Remote-Browser und Sie können die Konsole genauso sehen, wie Sie es sehen, wenn Sie Chrome lokal verwenden.

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

Wenn Ihre App auf dem Gerät abstürzt, müssen Sie nur das Konsolenprotokoll in Ihrem Browser anzeigen und sehen, was passiert. Sie können Funktionen ebenfalls hinzufügen, Variablen ändern und Funktionen überschreiben, wie wir es mit unserem lokalen Browser tun.

Lesen Sie diesen Artikel weitere Informationen zu den auszuführenden Schritten.

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

FÜR iOS:

Verwenden Sie Safari für iOS und führen Sie die folgenden Schritte aus:

1. Gehen Sie auf Ihrem iOS-Gerät zu Einstellungen> Safari> Erweitert> Web Inspector, um Web Inspector zu aktivieren

2.Öffnen Sie Safari auf Ihrem iOS-Gerät.

3. Verbinden Sie es über USB mit Ihrem Computer.

4.Öffnen Sie Safari auf Ihrem Computer.

5. Gehen Sie im Safari-Menü zu Entwickeln und suchen Sie nach dem Namen Ihres Geräts.

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

BEACHTEN

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

Ich habe es endlich geschafft! Mit Weinre und Cordova (kein Phonegap-Build) und um Ärger für zukünftige Entwickler zu sparen, die möglicherweise vor dem gleichen Problem stehen, habe ich ein YouTube-Tutorial erstellt .

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

Neuere Cordova-Builds aktivieren diese Art des Debuggens automatisch, solange es sich um einen Debug-Build handelt (in --release-Builds deaktiviert).

Das Beste für mich ist, den Chrome-Debugger anzuhängen.

Führen Sie dazu Ihre App in einem Emulator oder Gerät aus (mit $ cordova emulate).

Öffnen Sie dann Google Chrome und gehen Sie zu chrome://inspect/

Sie sehen eine Liste mit laufenden Apps. Ihre App sollte da sein. Klicken Sie auf "inspizieren".

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

Wenn auf Ihrer App Cordova 3.3+ und auf Ihrem Gerät Android 4.4+ ausgeführt wird, können Sie Ihre Cordova-App mit Chrome Remote Webview Debugging debuggen.

Dazu müssen Sie zuerst das USB-Debugging auf Ihrem Telefon aktivieren.

Öffnen Sie dann die Registerkarte "Geräte überprüfen". Gehen Sie in Chrome zu Einstellungen > Weitere Tools > Geräte überprüfen .

Wenn Sie Ihre App auf Ihrem Gerät starten, während es mit Ihrem Computer verbunden ist, sollte die Webansicht in der Geräteliste angezeigt werden. Klicken Sie auf den Link "Inspizieren" in Ihrer Webansicht. Ein Debug-Tool für Ihre Webansicht sollte angezeigt werden.

Hier ist ein Artikel, der ausführlich erklärt, wie es geht: http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/

Haben Sie 'GapDebug' ausprobiert ? Es ist kostenlos.

Es scheint Versionen des Safari Webkit Inspector und der Chrome Dev Tools zu integrieren, um ein integriertes Debugging-Erlebnis unter OS X und Windows zu bieten.

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

Einheitliche Debugging-Erfahrung . Für die plattformübergreifende Entwicklung ist häufig ein anderes Tool zum Debuggen der einzelnen Geräte, Emulatoren oder Simulatoren erforderlich. Unterschiedliche Tools bedeuten unterschiedliche Workflows und Produktivitätsverluste bei jedem Gerätewechsel. Mit Visual Studio können Sie für alle Bereitstellungsziele dieselben erstklassigen Debugging-Tools verwenden, einschließlich Windows, dem Android-Emulator, angeschlossenen Android-Geräten, iOS-Geräten und -Emulatoren sowie dem Apache Ripple-Emulator.

Nachdem Microsoft die Visual Studio Community Edition kostenlos veröffentlicht hat , können Sie dies kostenlos ausprobieren. Sie müssen sowohl Visual Studio als auch Visual Studio Tools für Apache Cordova herunterladen .

Soweit ich weiß, ist jshybugger das einzige produktive Tool für echtes Debugging in Cordova-Apps für Android-Plattformen von 2.2 bis 4.3 . Weinre ist ein Inspektor, kein Debugger. JsHybugger instrumentiert Ihren Code, sodass Sie in Android WebView debuggen können.

Ich möchte nur hinzufügen, dass Sie Android-Apps mit Genymotion debuggen können . Es ist viel schneller als der Standard-Android-Emulator.

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

Ich fand auch die RC-Tools von Visual Studio 2015 für Cordova mit dem Ripple-Emulator sehr gut

Wenn Sie Phonegap Build verwenden, gibt es eine Option zum Aktivieren des Debugs.

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

Und der Link zu den weinre-Dokumenten: http://people.apache.org/~pmuellr/weinre/docs/latest/

Und es gibt so etwas wie Chrome Remote Debugging, aber ich weiß nicht viel darüber. Sie können sich den Artikel von Raymond Camden ansehen: http://www.raymondcamden.com/index.cfm/2014/1/2/Apache- Cordova-33-und-Remote-Debugging-für-Android

Dokumente für das Chrome-Remote-Debugging: https://developers.google.com/chrome-developer-tools/docs/remote-debugging (wenn ich das richtig verstanden habe, benötigen Sie ein Android-Gerät mit Chrome als Standardbrowser) Vielleicht das, das Ihrem Traum am nächsten kommt Lösung?

Auf Android 4.4+ mit installiertem SDK:

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

Wenn Sie Cordova 3.3 oder höher verwenden und auf Ihrem Gerät Android 4.4 oder höher ausgeführt wird , können Sie "Remote-Debugging unter Android mit Chrome" verwenden. Vollständige Anweisungen finden Sie 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 unter Einstellungen> Mehr> Entwickleroptionen> USB-Debugging)

Oder , wenn Sie Cordova verwenden 3.3+ und haben kein physisches Gerät mit 4.4, können Sie einen Emulator verwendendie AnwendungenAndroid 4.4um die Anwendung durch den Emulator zu laufen, auf Ihrem DesktopComputer.

• Führen Sie Ihre Cordova-Anwendung auf dem Gerät oder Emulator aus
• Geben Sie in Chrome auf Ihrem Desktop-Computer chrome: // inspect / # Geräte in die Adressleiste ein
• Ihr Gerät / Emulator wird zusammen mit allen anderen erkannten Geräten angezeigt, die an Ihren Computer angeschlossen sind. Unter Ihrem Gerät befinden sich Details zum Cordova 'WebView' (im Grunde Ihre Cordova-App), das auf dem Gerät / Emulator ausgeführt wird ( Cordova funktioniert so, dass es im Grunde ein "Browser" -Fenster auf Ihrem Gerät / Emulator erstellt, in dem sich eine "WebView" befindet, in der Ihre HTML / JavaScript-App ausgeführt wird.
• Klicken Sie auf den Link "Inspizieren" im Abschnitt "WebView", in dem Ihr Gerät / Emulator aufgelistet ist. Daraufhin werden die Chrome-Entwicklertools angezeigt, mit denen Sie Ihre Anwendung jetzt debuggen können.
• Wählen Sie die Registerkarte "Quellen" der Chrome-Entwicklertools aus, um JavaScript anzuzeigen, das Ihre Cordova-App auf dem Gerät / Emulator derzeit ausführt. Sie können dem JavaScript Haltepunkte hinzufügen, mit denen Sie Ihren Code debuggen können.
• Sie können auch die Registerkarte "Konsole" verwenden, um Fehler anzuzeigen (die rot angezeigt werden), oder am unteren Rand der Konsole wird eine Eingabeaufforderung ">" angezeigt. Hier können Sie beliebige Variablen oder Objekte (z. B. DOM-Objekte) eingeben, deren aktuellen Wert Sie überprüfen möchten, und der Wert wird angezeigt.

Hier ist die Lösung mit Phonegap Build. Fügen Sie Ihrer config.xml Folgendes hinzu, um eine Überprüfung mit Chrome Remote Webview Debugging durchführen zu können.

Stellen Sie zunächst sicher, dass Ihr Widget-Tag xmlns enthält: 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">

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 unter Nexus 5, Phonegap 3.7.0.

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

Erstellen Sie die App in Phonegap Build, installieren Sie das APK, schließen Sie das Telefon an USB an, aktivieren Sie das USB-Debugging auf Ihrem Telefon und besuchen Sie chrome: // inspect.

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

Verwenden Sie den Android-Gerätemonitor

Android Device Monitor enthält Pakete mit Android SDK, die Sie zuvor installiert hätten. Im Gerätemonitor sehen Sie Ihr gesamtes Geräteprotokoll, Ausnahmen, Nachrichten alles. Dies ist nützlich, um Anwendungsabstürze oder andere derartige Probleme zu debuggen. Um dies auszuführen, gehen Sie zu tools / Ordner in Ihrem Android SDK "/ var / android-sdk-linux / tools". Führen Sie dann Folgendes aus

chmod +x monitor
./monitor

Wenn Sie unter Windows arbeiten, öffnen Sie direkt die Datei monitor.exe. Unter "LogCat" befindet sich eine Registerkarte, auf der alle gerätebezogenen Meldungen angezeigt werden. Hier werden alle Meldungen angezeigt, einschließlich Ausnahmen für Android-Geräte, die nicht sichtbar sind. Stellen Sie sicher, dass Sie Filter mit der Anmeldeliste "+" in logcat erstellen, damit nur Nachrichten für Ihre Anwendung angezeigt werden.

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

Sie können Ihre HTML5-Apps auch mit Chrome debuggen

Ich erstelle eine .bat, um Chrome 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-Anwendungen, die auf Ihrem Telefon remote von Ihrem Computer installiert sind, über das USB-Kabel (Sie können auch remote auf die Webanwendung klicken, als würden Sie die Webanwendung von Ihrem Computer aus anzeigen) mit "Chrome Remote Debugging" debuggen. Auf diese Weise können Sie auch Webanwendungen debuggen, die im Stock Android-Browser oder in Chrome auf Android angezeigt werden.

1. Aktivieren Sie den Entwicklermodus auf Ihrem Android-Gerät (gehen Sie zu Einstellungen -> Über das Telefon -> tippen Sie 7x auf die Build-Nummer).

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

3. Starten Sie Chrome auf Ihrem Computer und navigieren Sie zu chrome: // inspect und klicken Sie auf die Schaltfläche "Inspect" neben dem Remote-Gerät, das Sie debuggen möchten (auf der Registerkarte "Devices"). ODER klicken Sie mit der rechten Maustaste in Chrome auf Ihrem Computer -> Überprüfen -> Kostümieren und Steuern von DevTools (3 vertikale Punkte - obere rechte Ecke der Entwicklertools) -> Weitere Tools -> Remote-Geräte -> Klicken Sie unter Geräte auf der linken Seite auf Ihre Gerät, an das Sie über USB angeschlossen sind -> Klicken Sie auf die Schaltfläche Prüfen für die gewünschte Anwendung.

4. Klicken Sie dann auf "Konsole" und Sie können JavaScript auf die gleiche Weise debuggen wie bei einer normalen Webanwendung mit Chrome-Entwicklertools.

Ich habe Weinre geliebt! Wie man es benutzt:

Ziehen Sie zuerst Ihre an index.html(stellen Sie sicher app.settings.debugUrl, dass dies vorher eingestellt 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
• Lauf: weinre --boundHost -all-
• Öffnen Sie im Browser: http: // localhost: 8080 / client / # anonym
• Beim Öffnen der App werden Beobachtungsziele angezeigt

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

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