Debuggen Sie Javascript im Android Emulator mit Phonegap

Ich bin neu in der Phonegap- und Android-Entwicklung. Darf ich wissen, wie ich Javascript-Fehler auf dem Emulator debuggen kann? Ich habe von ADB gehört. Kann ich wissen, wie ich es auf einem Windows 7-System verwenden und installieren kann? Ich habe einen Ajax mit jsonp, aber keine Antwort auf den Emulator. Allerdings kann ich das Ajax mit Browser unter Windows nennen. Darf ich wissen, was schief gelaufen ist?

Sie können zumindest Debug-Inhalte in der ADB-Konsole protokollieren, indem Sie console.log () in JavaScript aufrufen. Vielleicht würde das ausreichen?

Um die Protokollausgabe mit adb anzuzeigen, navigieren Sie zu Ihrem SDK-Plattform-tools / -Verzeichnis und führen Sie Folgendes aus:

adb logcat

Siehe logcat-Befehlszeilentool

Update Nov 2016: Sieht so aus, als würde das nicht mehr funktionieren.

Die einfachste und leistungsstärkste Möglichkeit ist die Verwendung von http://debug.phonegap.com (wenn Sie sich interessieren, wird Weinre im Hintergrund verwendet). Sie gerade

1. Wählen Sie eine zufällige Zeichenfolge, z r4nd0m.
2. injizieren <script src="http://debug.phonegap.com/target/target-script-min.js#r4nd0m"></script>in Ihreindex.html
3. Besuchen http://debug.phonegap.com/client/#r4nd0mSie und Sie werden sofort Ihre mobile Web-App debuggen.

Dinge, die Sie tun können (ähnlich wie Firebug oder Web Inspector):

1. Anzeigen und Ändern des DOM
2. CSS bearbeiten
3. Konsole zum Live-Debuggen und Remote-Ausführen von Javascript.
4. Andere Dinge wie Speicher, Ressourcen, Zeitachse, Profil usw.

Sie können jetzt Chrome-Entwicklungstools verwenden, um Android-Phonegap-Apps remote zu debuggen! Ich habe hier Anweisungen geschrieben: Remote-Debugging von Phonegap-Apps mit Chrome Dev Tools

Schritte für Android Emulator:

1. Navigieren Sie auf Ihrem Desktop-Computer zu chrome: // inspect / in Google Chrome.
2. Suchen Sie den Android-Emulator auf der Registerkarte Geräte und klicken Sie auf den Link "Überprüfen"

Siehe auch Erste Schritte mit dem Remote-Debugging von Android-Geräten

Ich würde jsconsole empfehlen . Sie können damit beliebiges JavaScript in die Seite einfügen und eine Basiskonsole bereitstellen. Es gibt ein nettes Tutorial zum Remote-Debugging .

Ja, Sie haben Protokollfehler mit console.log und zeigen die Registerkarte LogCat in Eclipse an. Dort werden Web Console-Nachrichten (einschließlich JS-Fehler) angezeigt. Es ist ein wenig ausführlich, daher müssen Sie filtern, um nur die Web Console-Tags anzuzeigen, aber es funktioniert gut. Hier beschrieben: SHOWING CONSOLE CONSOLE.LOG OUTPUT UND JAVASCRIPT ERRORS MIT PHONEGAP ON ANDROID / ECLIPSE

Ich habe festgestellt, dass dies zum Debuggen von Javascript-Fehlern für Android / Phonegap funktioniert, wenn die App über Eclipse unter Windows 7 getestet wird.

Gehen Sie einfach zu Fenster> Ansicht anzeigen> Andere ...

Wählen Sie dann LogCat im Android- Ordner.

In dem gerade eingeblendeten Fenster / Tab wird der Android-Emulator seine Protokolle und Fehlermeldungen senden. Sie können dieses Fenster trennen und außerhalb der Eclipse-IDE platzieren (ich fand das nützlich). Sie können die Art der angezeigten Fehler auch steuern, indem Sie einen der 5 farbigen Buchstaben in der oberen rechten Ecke des Fensters auswählen.

Stellen Sie sicher, dass Sie nur (E) ausgewählt haben, um die nutzlosen Informationen auszublenden, damit nur Fehler angezeigt werden. Persönlich möchte ich auch (W) Warnungen sowie (E) Fehler ausgewählt haben.

Hoffentlich hilft das!

Es gibt (endlich) ein Tool, das ein korrektes JavaScript-Debugging für Android ermöglicht - http://www.jshybugger.org/

Eigenschaften:

• Hinzufügen / Entfernen / Aktivieren / Deaktivieren von Zeilenumbruchpunkten
• Ausdrücke beobachten
• Schritt in / über / aus
• Pause bei Ausnahme
• Call-Stack-Navigation
• lokale Variablenprüfung
• Remote-Konsole
• Javascript-Syntax und Laufzeitfehlerberichterstattung
• Anzeigen / Bearbeiten / Löschen von lokalen Speicherelementen
• Anzeigen / Bearbeiten / Löschen von Sitzungsspeicherelementen
• Anzeigen / Bearbeiten / Löschen von WebSQL-Datenbankdatensätzen (Video ansehen)
• Seitenressourcen anzeigen (Bilder, Skripte, HTML)
• Remote-Konsolenunterstützung verbessert (Stacktrace)
• Debugger: Erweiterte Objektinspektion
• Debugger: Bedingte Haltepunkte
• Debugger: weiter hier

Ich habe es leicht in zwei Schritten gelöst.

Ändern Sie die Protokollierungsstufe

Fügen Sie in config.xml diese Zeile hinzu

    <log level="DEBUG"/>

Führen Sie das Cordova-Protokoll aus

Es ist eine Bat-Datei, die Sie einfach ausführen und verfolgen können. Alle Protokollnachrichten werden an Ihr Phonegap-Projekt gesendet und zum \platforms\android\cordovaÖffnen navigiert. log.batSie können Ihre Anwendung jetzt über die Befehlszeile emulieren

cordova emulate

und das Protokoll wird im cmd angezeigt, das beim Öffnen angezeigt wird log.bat

Wenn Sie bereit sind, NodeJS irgendwo einzurichten, können Sie ein erweitertes Debugging mit John Boxalls iBug durchführen , der zwar für das iPhone entwickelt wurde, das ich auf Android getestet habe und das einwandfrei funktioniert. Es ist im Grunde Firebug Lite für mobile Geräte. Ich zeige auf meine Gabelung, weil sich Node stark geändert hat und Johns Code nicht auf einem modernen NodeJS ausgeführt werden konnte. Deshalb habe ich ihn gepatcht, um ihn auf NodeJS 0.2.3, YMMV auf neueren Versionen von NodeJS zum Laufen zu bringen.

Wenn Sie verwenden console.log, können Sie einfache Druckanweisungen ausführen. adbSie können sie nicht nur zum Anzeigen verwenden, sondern auch einen Protokoll-Viewer auf dem Gerät verwenden und die Protokolle dort anzeigen. Weitere Informationen: http://www.technomancy.org/android/javascript-debugging/

Die beste Lösung, um Ausnahmen abzufangen und in Ihrer Konsole anzuzeigen, ist folgender Code:

window.onerror = function(msg, uri, line) {
    console.log(msg + uri + line);
}

In Eclipse können Sie der Zurück-Schaltfläche des Android-Emulators einen Haken hinzufügen und einen Wert im laufenden Betrieb überprüfen. Fügen Sie den onBackPressedEreignismanager hinzu und rufen Sie von dort aus die Javascript-Konsole auf. Aus der Eclipse-Debug-Perspektive ändern Sie den Wert einer StringVariablen in den Wert , den Sie überprüfen möchten, und übergeben ihn per Aufruf an Ihre App super.loadUrl.

Siehe den Code unten. Vergessen Sie nicht, das Debuggen Ihrer Anwendung in der DDMS-Ansicht zu aktivieren

public class MyActivity extends DroidGap {
    private String js = "";
    @Override
    public void onBackPressed() {  
        //add a breakpoint to the follow line 
        //and change the value for "js" variable before continuing execution
        super.loadUrl("javascript:console.log(" + js + ")");
        return;
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setBooleanProperty("keepRunning", false);
        super.setIntegerProperty("splashscreen", R.drawable.splash);
        super.loadUrl("file:///android_asset/www/index.html", 20000);
    }
}

Wenn Sie Phonegap Build verwenden und über die Chrome-Konsole debuggen möchten, finden Sie hier eine funktionierende Lösung. Es ist möglich, WebViews mithilfe von USB-Debugging zu debuggen ( https://developer.chrome.com/devtools/docs/remote-debugging#debugging-webviews ).

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 auf 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/

Das Phonegap-Debug ist noch vorhanden. Diejenige, die ich kenne, befindet sich im Phonegap-Build, der in den Einstellungen zu finden ist, und aktivieren Sie die Option für die Debug-Anwendung. Ihre App wird dann neu erstellt, wenn Sie sie speichern. Auf der Anwendungsseite wird eine Debug-Schaltfläche zusammen mit den Wiederherstellungsoptionen angezeigt. (Dieser Service verwendet auch ein eingebautes Weinre)

Eine andere Option, die ich auch am schnellsten finde, ist jsconsole.com . Es ist sehr einfach einzurichten und erfordert fast keine Konfiguration im Vergleich zu anderen Debugging-Methoden, bei denen Sie viele Dinge wie Treiber und SDKs installieren müssen.

HINWEIS!

Wenn Sie in PhoneGap 10 Ihre App erstellen und alle Anforderungen außerhalb der App (als ob kein Internet vorhanden wäre) fehlschlagen, müssen Sie dies in Ihrer config.xml hinzufügen

<gap:plugin name="com.indigoway.cordova.whitelist.whitelistplugin" version="1.1.1" />
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />

Ich habe mir die Haare ausgezogen und versucht, ein Remote-Debugging-Tool zum Laufen zu bringen, nur um herauszufinden, dass externe Anforderungen standardmäßig blockiert waren. das hat mich gerettet.

Das Debuggen der PhoneGap / Apache Cordova-Anwendung ist mit GapDebug einfach

• Laden Sie GapDebug von https://www.genuitec.com/products/gapdebug/ herunter und installieren Sie es.

• Führen Sie einen GapDebug auf Ihrem PC / Mac aus

• Aktivieren Sie die Entwickleroption und das USB-Debugging auf Ihrem Android-Gerät (Einstellungen -> Entwickleroption (EIN) -> USB-Debugging (EIN)).

• Wenn die Entwickleroption nicht gefunden wird (Einstellungen -> Über das Telefon -> Klicken Sie siebenmal auf Build-Nummer)

• Sie können Ihre Anwendung von Ihrem GapDebug aus debuggen

Verweisen

• https://www.youtube.com/watch?v=QHTI-utHfEE
• https://www.youtube.com/watch?v=AZJUSomFOwk
• https://www.youtube.com/watch?v=XEeWFIsgtsU
• https://www.youtube.com/watch?v=kiY03MBGkLo

Update: Heutzutage heißt PhoneGap Apache Cordova. Wenn Sie damit Android-Apps entwickeln möchten, müssen Sie Android Studio installieren. Um von Android Studio aus auf die Logcat-Konsole zuzugreifen, öffnen Sie Ihr Android-Projekt (dies ist der Plattform- / Android-Ordner in Ihrem Cordova-Projekt) und wählen Sie das Menü Extras-> Android-> Android-Gerätemonitor.

Android Device Monitor (AVD) kann alleine ausgeführt werden, sodass Sie einen direkten Zugriff erstellen können, um all diesen Pfad zu vermeiden. AVD erhält automatisch die Protokollnachrichten von Ihrem Emulator, die mit Cordova gestartet wurden, und ermöglicht Ihnen das einfache Einstellen von Filtern, um die große Menge der vom Emulator empfangenen Ausgabe zu reduzieren. Ich bevorzuge es besonders, nach dem Anwendungsnamen zu filtern.