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.html
Datei 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?
Antworten:
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/#devices
im 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.
quelle
adb start-server
.chrome://inspect
.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 .
quelle
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).
quelle
chrome://inspect
"USB-Geräte erkennen" zu navigieren und sicherzustellen, dass diese Option aktiviert ist. Dadurch werden alle debug-fähigen WebViews in verbundenen Geräten angezeigt.console.log
es nicht zu funktionieren scheint. Sie müssen durchmachen,alerts
was wirklich eine Belastung ist.(it's turned off in --release builds).
Dieser Hinweis hat mir den Tag gerettet!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
quelle
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/
quelle
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.
quelle
Eine weitere Option ist Visual Studio, das Pre-Release-Unterstützung für das Debuggen von Cordova-Apps bietet :
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 .
quelle
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.
quelle
Ich möchte nur hinzufügen, dass Sie Android-Apps mit Genymotion debuggen können . Es ist viel schneller als der Standard-Android-Emulator.
quelle
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
quelle
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?
quelle
Auf Android 4.4+ mit installiertem SDK:
quelle
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:
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.
quelle
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"
Fügen Sie dann Folgendes hinzu
Es funktioniert für mich unter Nexus 5, Phonegap 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/
quelle
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
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/
quelle
monitor
.Sie können Ihre HTML5-Apps auch mit Chrome debuggen
Ich erstelle eine .bat, um Chrome im Debug-Modus zu öffnen
quelle
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.
Aktivieren Sie den Entwicklermodus auf Ihrem Android-Gerät (gehen Sie zu Einstellungen -> Über das Telefon -> tippen Sie 7x auf die Build-Nummer).
Verbinden Sie Ihren Computer über ein USB-Kabel mit Ihrem Telefon.
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.
Klicken Sie dann auf "Konsole" und Sie können JavaScript auf die gleiche Weise debuggen wie bei einer normalen Webanwendung mit Chrome-Entwicklertools.
quelle
Ich habe Weinre geliebt! Wie man es benutzt:
Ziehen Sie zuerst Ihre an
index.html
(stellen Sie sicherapp.settings.debugUrl
, dass dies vorher eingestellt ist):Dann:
sudo npm install -g weinre
weinre --boundHost -all-
Basierend auf http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/
quelle
Geräte mit Android <= 4.0.4 müssen das Plugin https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt hinzufügen
quelle