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

130

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?

numediaweb
quelle

Antworten:

138

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.

Geben Sie hier die Bildbeschreibung ein

Neotrixs
quelle
3
Ich kann die Konsole und meine App auf meinem Computer in Chrom sehen, während mein Smartphone über USB verbunden ist. Sehr coole Lösung.
Emilie Zawadzki
Mein Telefon wurde erst gefunden, als ich lief adb start-server.
Leukipp
@Leukipp Ich habe auch das gleiche Problem, aber danach füge ADT beim Start meines Windows-Systems hinzu. Mein Problem lösen ..
Neotrixs
2
Die Antwort bietet eine Lösung für das falsche Problem - bei der Frage geht es nicht um das Debuggen eines Browsers, sondern um das Debuggen eines WebView. Diese unterscheiden sich geringfügig von einer Vielzahl frustrierter Benutzer, die verwirrt sind, weil ihre WebViews, in denen ihre Anwendungen angezeigt werden, nicht in angezeigt werden chrome://inspect.
Amn
1
Android 4.4+ :( Das ist der Grund ...
Candlejack
76

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 .

numediaweb
quelle
Mir fehlte die richtige IP-Konfiguration, jetzt funktioniert sie einwandfrei, vielen Dank!
Juan Carlos Alpizar Chinchilla
8
Weinre ist kein Debugger, es erlaubt nur DOM-Inspektionen, Sie können js nicht debuggen und sogar Konsolennachrichten ansehen
Bogdan Mart
19
... wie ist ein Link zu einem Youtube-Video eine akzeptable Antwort?
Meekohi
2
@ Meekohi er machte das Video :)
Candlejack
10
Wie bei allen Stackoverflow-Antworten ist ein Link zu einer Lösung (ob vom Autor erstellt oder nicht) verpönt. Bewahren Sie die Lösungen hier auf und nicht extern, wo sie eines Tages möglicherweise verschwunden sind.
DarkNeuron
56

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

Kammer
quelle
Sieht gut aus - es ist auch aufgefallen, dass ein Phonegap-Build-Plugin verfügbar ist, um diese Funktion zu aktivieren.
DavidC
1
Gemäß Ihrem Kommentar: Es ist deaktiviert in - Release Builds (Das ist nicht wahr)
Luckyy
9
Re. Dies fand ich diesen Link nützlich. Verwenden Sie Chrome, um zu 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.
Sharadh
Das Problem bei dieser Lösung ist, dass console.loges nicht zu funktionieren scheint. Sie müssen durchmachen, alertswas wirklich eine Belastung ist.
João Pimentel Ferreira
(it's turned off in --release builds).Dieser Hinweis hat mir den Tag gerettet!
Maswerdna
32

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

José
quelle
7
Bitte überprüfen Sie noch einmal, ob Ihre Antwort unter den Bedingungen von OP funktioniert. Der Chrome-Debugger funktioniert nur mit Android 4.4+.
Chris Neve
20

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/

Mitch
quelle
Dies ist eine der besten und vollständigsten Antworten in diesem Kommentarbereich, obwohl es OP aufgrund von 4.4+ nicht hilft.
Chris Neve
7

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.

Zaxxo
quelle
1
Dies ist ein wichtiges Tool, insbesondere für Windows-Benutzer, die eine Verbindung zum Step-Debug-iPhone herstellen möchten. Ich kann es nur empfehlen.
Mike Nelson
7

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 .

Josh
quelle
Da Intels einst erstaunliches XDK die Unterstützung für seinen Debugger eingestellt hat, musste ich nach einer neuen Option suchen. Visual Studio ist die einzige All-in-One-Lösung (IDE, Debugger, Plugin-Manager usw.). Die Einrichtung dauert eine Weile, ist aber sehr einfach. Ich verwende Enterprise 2015. Es wird erstellt, aber ich bin nicht sicher, ob es noch veröffentlicht wird (ich habe diesen Punkt noch nicht erreicht).
Victor Stoddard
5

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.

sgimeno
quelle
5

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

Victor P.
quelle
1
Genymotion ermöglicht die Verwendung von Chrome Remote Debugging, da es nicht als Emulator, sondern als echtes Gerät behandelt wird. Kamera- und andere Hardwarefunktionen funktionieren ebenfalls, aber einige davon werden bezahlt.
shirk3y
4

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

Mohamed Selim
quelle
3

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?

Schnelle Lösung
quelle
Danke für die Infos; Ich bevorzuge die kostenlose Cordova-Methode;) und ich habe sie jetzt zum Laufen gebracht (siehe meine Antwort), danke! +1
numediaweb
1
Überprüfen Sie meine Bearbeitung, es scheint, dass Chrom nicht weit von Ihrer
Traumlösung ist
Beachten Sie, dass auf dem von mir verwendeten Gerät Android 2.3 ausgeführt wird, während für das Chrome-Remote-Debugging Android 4.4 oder höher erforderlich ist. Aber danke "QuickFix"; Ich habe jetzt alles zum
Laufen gebracht
3

Auf Android 4.4+ mit installiertem SDK:

adb logcat chromium:D SystemWebViewClient:D \*:S
Gringo Suave
quelle
2

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.
Chris Halcrow
quelle
2

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/

Brunettdan
quelle
HEILIGER BEJEEZUS !!! Ich kann endlich meine apk's debuggen !!! Vielen Dank, ich weiß nicht, warum dies nirgendwo anders prominenter ist. Diese Notizen wörtlich in die Readme-Datei meines Projekts aufnehmen.
Josh
2

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/

Faraz Kelhini
quelle
Für Linux-Benutzer kann es abhängig von Ihrer SDK-Installationsmethode auch in ~ / Android / Sdk / tools / monitor gefunden werden, oder versuchen Sie es einfach monitor.
Strixy
2

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
dpfauwadel
quelle
1
Vielen Dank, aber ich fand, dass der beste Ansatz darin besteht, weinre zu verwenden, um das Design mit dem integrierten Webkit-Browser des Geräts selbst zu debuggen!
Numediaweb
1
Ich bin der Meinung, dass Ripple Ihnen eine durchschnittliche Vorstellung davon gibt, wie es aussehen wird, wenn Sie es veröffentlichen, was gut ist. Manchmal gibt es Unterschiede zwischen dem Emulator und dem realen Gerät, hauptsächlich weil der Emulator mit der Engine des Webbrowsers arbeitet, den Sie verwenden. Sie können es erneut ausführen, was in einigen Situationen nicht mit dem Ihres Geräts identisch ist. Daher verwende ich normalerweise beides, Ripple, um die Benutzeroberfläche zu entwerfen, und Weinre, um das Verhalten zu testen, wenn etwas nicht wie erwartet funktioniert
Juan Carlos Alpizar Chinchilla
2

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.

Tadej
quelle
Dies funktioniert auf meinem Handy (Android 6), aber nicht auf meinem Tablet (Hinweis 8 Android 4.4)
Danielo515
Es war ein Problem mit der Android-Webansicht. Durch die Installation des Crosswalk-Plugins kann ich diese Art des Debuggens auf älteren Geräten (bis zu Jelly Bean) durchführen
Danielo515
1

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:

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

Brauliobo
quelle
Weinre ist kein Debugger, es erlaubt nur DOM-Inspektionen, Sie können js nicht debuggen und sogar Konsolennachrichten ansehen
Bogdan Mart