Debuggen der mit Visual Studio-Tools für Apache Cordova erstellten App

  • Artikel

Die Cordova-Tools sind in Visual Studio 2013 als Preview (CTP) Version veröffentlicht. Die Cordova-Tools werden Als Teil von Visual Studio 2015 veröffentlicht und wir empfehlen, zum Entwickeln von Apps Visual Studio 2015 RTM und die Visual Studio-Tools für Apache Cordova zu verwenden. Sie können Visual Studio aus dem Microsoft Download Center herunterladen.

Visual Studio bietet eine optimierte und allgemeine Toolumgebung für die Entwicklung von Cordova-Apps über verschiedene App-Typen und Geräteplattformen hinweg. In dieser frühen Version werden allerdings nicht alle Plattformen von allen Visual Studio-Debugger und Diagnosefunktionen unterstützt, wie in der folgenden Tabelle dargestellt.

Gerät oder Betriebssystem

Wird ein Visual Studio-Debugger unterstützt?

Werden Konsolenmeldungen unterstützt?

Problemumgehung

Android 4.4 oder höher

Ja

Ja

-

Android-Versionen 2.3.3–4.3

Nein (siehe dazu die Informationen über "jsHybugger", die weiter unten in diesem Artikel folgen)

Ja

-

iOS 6, 7, 8

Ja

Ja

-

8.1 (Store), Windows Phone 8.1, Windows 10

Ja

Ja

-

Windows Phone 8

Nein

Nein (verwenden Sie das Plug-in für die Konsole)

Verwenden Sie Web Inspector Remote (weinre) oder das Plug-in für die Konsole. Siehe Debuggen von Windows 8 und Windows Phone 8 weiter unten in diesem Artikel.

Hinweis

Wenn Sie Windows 7 verwenden, können Sie Apps für Android und iOS entwickeln, jedoch nicht für Windows- oder für Windows Phone-Apps.Zum Ausführen der App unter Windows Server 2012 R2 müssen Sie die Option Desktop-Erlebnis aktivieren.

In diesem Artikel:

  • Debuggen von Android und iOS in Apache Ripple

  • Debuggen von Android auf dem Emulator oder auf einem Gerät

  • Debuggen von iOS auf dem Emulator oder auf einem Gerät

  • Debuggen von Windows 8 und Windows Phone 8

Warnung

Ein Video und ein begleitendes Lernprogramm, in dem das Debuggen mit dem Visual Studio-Debugger, dem DOM-Explorer und der JavaScript-Konsole gezeigt wird, finden Sie unter Video zur exemplarischen Vorgehensweise: Debuggen mit Visual Studio-Diagnosetools für Cordova.

Debuggen von Android und iOS in Apache Ripple

Sie können den Visual Studio-Debugger an eine App anfügen, die im Apache Ripple-Emulator ausgeführt wird.

So wird Debugging in Ripple durchgeführt

  1. Während die App in Visual Studio geöffnet ist, wählen Sie iOS oder Android aus der Liste Projektmappenplattformen aus, und wählen Sie eines der Bereitstellungsziele, die den Ripple-Emulator angeben.

  2. Drücken Sie F5.

    Sie können an Haltepunkten anhalten, die im Code festgelegt sind, den DOM Explorer zum Überprüfen von HTML und CSS verwenden sowie mithilfe der JavaScript-Konsole mit der Seite interagieren.

    Die folgende Abbildung zeigt einen Haltepunkt, der im Code-Editor festgelegt wurde.

    Festlegen eines Haltepunkts während des Debuggens mit Ripple

    Hier erreicht der Visual Studio-Debugger den Haltepunkt während des Debuggens im Ripple-Emulator.

    Haltepunkt vom Visual Studio-Debugger abgefangen

Wichtig

Der Visual Studio-Debugger hält nicht an Haltepunkten an, die vor dem Laden der ersten Seite in Ripple erreicht werden.Der Debugger hält jedoch an diesen Haltepunkte an, nachdem der Browser aufgefrischt wurde.

Derzeit werden die folgenden plattformübergreifenden Konsolenbefehle für JavaScript von Ripple unterstützt:

  • $
    $$
    $0-$4
    $_
    clear
    console.assert
    console.clear
    console.count
    console.debug
    console.dir
    console.dirxml
    console.error
    console.group
    console.groupCollapsed
    console.groupEnd
    console.info
    console.log
    console.time
    console.timeEnd
    console.warn
    dir

Die unterstützte Gruppe von Konsolenbefehlen und deren Verhalten wird durch den Hostbrowser und nicht durch Visual Studio bereitgestellt. Zusätzliche Befehle, die möglicherweise von Ripple unterstützt werden, finden Sie in der Browserdokumentation zu Chrome.

Tipp

Die JavaScript-Konsole in Visual Studio bietet IntelliSense-Informationen zum einfachen Erkennen dieser Befehle und anderer Objekte auf der Seite.

Der DOM Explorer ermöglicht das Debuggen von HTML und CSS. Verfügbare Funktionen auf den Registerkarten Stile, Berechnet und Layout des DOM Explorer werden von Ripple unterstützt.

Hinweis

Ausführliche Informationen zur Debugging-Unterstützung finden Sie unter Bekannte Probleme.

Debuggen von Android auf dem Emulator oder auf einem Gerät

Sie können den Visual Studio-Debugger an den Android-Emulator oder an ein Android-Gerät zum Debuggen Ihrer App auf Android 4.4 anfügen.

Wenn Sie eine Android-Version zwischen 2.3.3 und 4.3 verwenden, können Sie das jsHybugger-Plug-In zum Aktivieren der Android-Diagnose (DOM-Explorer, Konsole und Debuggen) installieren. Dieses Plug-In instrumentiert Ihren Code lokal, um Remote-Debuggen auf Android-Geräten und Emulatoren zu ermöglichen und unterstützt Android 2.3.3 und höhere Versionen.

So wird Debuggen auf Android 4.4 durchgeführt

  1. Während das Projekt in Visual Studio geöffnet ist, wählen Sie Android aus der Liste Projektmappenplattformen aus, und wählen Sie eines der Android-Bereitstellungsziele.

  2. Drücken Sie F5.

    Bei Verwendung von Android 4.4 können Sie an Haltepunkten anhalten, die im Code festgelegt sind, mithilfe der JavaScript-Konsole mit der Seite interagieren und den DOM Explorer verwenden.

    Wichtig

    Der Visual Studio-Debugger hält nicht an Haltepunkten an, die erreicht werden, bevor die erste Seite in Emulatoren oder Android-Geräte mit Android 4.4 geladen wurden.Allerdings wird der Debugger an diesen Haltepunkten anhalten, nachdem Sie von der JavaScript-Konsole den folgenden Befehl ausgeführt haben: window.location.reload()

So wird Debuggen auf Android-Versionen 2.3.3–4.3 mit dem jsHybugger-Plug-In ausgeführt

  1. Öffnen Sie Ihr Cordova-Projekt in Visual Studio.

  2. Erstellen Sie in Ihrem Projekt einen Ordner Plug-Ins, falls noch keiner vorhanden ist. (Um einen Ordner hinzuzufügen, öffnen Sie das Kontextmenü für Ihr Projekt im Projektmappen-Explorer, wählen Hinzufügen, Neuer Ordner und legen dann den Namen des Ordners auf Plug-Ins fest.)

  3. Laden Sie das jsHybugger-Plug-In, und extrahieren Sie den Inhalt.

    Hinweis

    Weitere Informationen zu diesem Plug-in finden Sie in der JsHybugger Website.Können Sie das Plug-In ohne Lizenz verwenden, allerdings sind dann die Debugsitzungen auf zwei Minuten begrenzt.Zum unbegrenzten Debuggen müssen Sie Eine jshybugger-Lizenz erwerben.Die folgenden Anweisungen setzen voraus, dass Sie eine Lizenz erworben und die Lizenzdatei als jshybugger_license.xml heruntergeladen haben.

  4. Legen Sie den Ordner für das entpackte Plug-In Jshybugger-x.x.x in den Ordner Plug-Ins in Ihrem Projekt ab.

  5. Legen Sie die Datei jshybugger_license.xml im Stammverzeichnis Ihres Projekts ab.

    So wird Ihr Projekt im Projektmappen-Explorer aussehen.

    Projektstruktur nach der Installation von jsHybugger

  6. Wählen Sie im Projekt die Option Android aus der Liste Projektmappenplattformen aus, und wählen Sie dann eines der Android-Bereitstellungsziele.

  7. Drücken Sie die Taste F5, um mit dem Debuggen zu beginnen.

    Sie können mithilfe der JavaScript-Konsole mit der Seite interagieren und den DOM Explorer zum Überprüfen von HTML und CSS verwenden.

Wichtig

Sie müssen das Plug-In JsHybugger und die Lizenzdatei aus Ihrem Projekt entfernen, bevor Sie Ihre App veröffentlichen.

Das Plug-in hat keine Auswirkungen, wenn Sie den Apache Ripple-Emulator verwenden oder auf Geräten und Emulatoren auf Android 4.4 debuggen. Deshalb müssen Sie diese nicht entfernen, wenn Sie zwischen verschiedenen Android Zielen während des Tests umschalten.

Derzeit werden die folgenden plattformübergreifenden Konsolenbefehle für JavaScript für Android unterstützt:

  • $
    $$
    $0-$4
    $_
    clear
    console.assert
    console.clear
    console.count
    console.debug
    console.dir
    console.dirxml
    console.error
    console.group
    console.groupCollapsed
    console.groupEnd
    console.info
    console.log
    console.time
    console.timeEnd
    console.warn
    dir

Die unterstützte Gruppe von Konsolenbefehlen und deren Verhalten wird durch den Hostbrowser und nicht durch Visual Studio bereitgestellt. Zusätzliche Befehle, die möglicherweise von Android unterstützt werden, finden Sie in der Browserdokumentation zu Chrome für Android.

Tipp

Die JavaScript-Konsole in Visual Studio bietet IntelliSense-Informationen zum einfachen Erkennen dieser Befehle und anderer Objekte auf der Seite.

Verfügbare Funktionen auf den Registerkarten Stile, Berechnet und Layout des DOM Explorer werden von Android unterstützt.

Warnung

Andere für Windows verfügbare Debug- und Diagnose-Tools sind derzeit für Android nicht verfügbar.Wir werden weiterhin die Debugging-Unterstützung unter Android in späteren Versionen verbessern.Ausführliche Informationen zur Debugging-Unterstützung finden Sie unter Bekannte Probleme.

Debuggen von iOS auf einem Emulator oder auf einem Gerät

Sie können den Visual Studio-Debugger an den iOS-Simulator oder an ein iOS-Gerät anfügen. iOS 6, 7 und 8 werden unterstützt.

Hinweis

Zurzeit wird das Anfügen des Debuggers an iOS-Apps, die das InAppBrowser-Plug-In verwenden, nicht unterstützt.Das Azure Mobile Services-Plug-In verwendet das InAppBrowser-Plug-In und ist von dieser Einschränkung betroffen.

So debuggen Sie auf iOS

  1. Stellen Sie sicher, dass der remotebuild-Agent auf Ihrem Mac installiert ist und dass der Agent gestartet ist. Zudem muss Visual Studio konfiguriert sein, um eine Verbindung zum Agent herzustellen.

  2. Wenn Sie auf einem tatsächlichen Gerät debuggen, wechseln Sie zu Einstellungen, Safari, Erweitert, und aktivieren Sie dann Web Inspector.

    Diese ermöglicht das Remote-Debuggen auf Ihrem Gerät. (Dieser Schritt ist nicht erforderlich, um auf dem iOS-Simulator zu debuggen.)

  3. Während die App in Visual Studio geöffnet und iOS in der Liste Projektmappenplattformen ausgewählt ist, wählen Sie ein Bereitstellungsziel aus.

    Zum Debuggen eines Geräts, das mit dem Remote-Agenten auf Ihrem Mac verbunden ist, wählen Sie Remotegerät als Bereitstellungsziel aus. Für ein mit dem PC verbundenes Gerät wählen Sie Lokales Gerät aus.

  4. Drücken Sie F5.

    Sie können an Haltepunkten anhalten, die im Code festgelegt sind, mithilfe der JavaScript-Konsole mit der Seite interagieren und den DOM Explorer zum Überprüfen von HTML und CSS verwenden.

    Wichtig

    Der Visual Studio-Debugger hält nicht an Haltepunkten an, die erreicht werden, bevor die erste Seite im iOS-Simulator geladen oder auf iOS-Geräten wurde(n).Allerdings wird der Debugger an diesen Haltepunkten anhalten, nachdem Sie von der JavaScript-Konsole den folgenden Befehl ausgeführt haben: window.location.reload()

Derzeit werden die folgenden plattformübergreifenden Konsolenbefehle für JavaScript für iOS unterstützt:

  • $
    $$
    $0-$4
    $_
    clear
    console.assert
    console.clear
    console.count
    console.debug
    console.dir
    console.dirxml
    console.error
    console.group
    console.groupCollapsed
    console.groupEnd
    console.info
    console.log
    console.time
    console.timeEnd
    console.warn
    dir

Die unterstützte Gruppe von Konsolenbefehlen und deren Verhalten wird durch den Hostbrowser und nicht durch Visual Studio bereitgestellt. Zusätzliche Befehle, die möglicherweise von iOS unterstützt werden, finden Sie in der Browserdokumentation zu iOS Safari.

Tipp

Die JavaScript-Konsole in Visual Studio bietet IntelliSense-Informationen zum einfachen Erkennen dieser Befehle und anderer Objekte auf der Seite.

Verfügbare Funktionen auf den Registerkarten Stile, Berechnet und Layout des DOM Explorer werden von iOS unterstützt.

Warnung

Wir werden weiterhin die Debugging-Unterstützung in späteren Versionen verbessern.Ausführliche Informationen zur Debugging-Unterstützung finden Sie unter Bekannte Probleme.

Debuggen von Windows und Windows Phone

Für Windows 8-, Windows 8.1- und Windows Phone 8.1-Apps können Sie die gleichen Debugtools von Visual Studio verwenden, die Sie auch für Windows Store-Apps verwenden würden, die mit HTML und JavaScript erstellt wurden. Weitere Informationen finden Sie unter Debug Store-Apps in Visual Studio im Windows Dev Center.

Bei Windows Phone 8-Apps können Sie den Visual Studio-Debugger nicht anfügen. Sie können in diesem Fall Web Inspector Remote (weinre) verwenden, der in Microsoft Open Technologies Blog-Post beschrieben ist.

Als Alternative zur Verwendung von "weinre" zum Debuggen in Windows Phone 8 können Sie stattdessen das Konsolen-Plug-In an Ihre App anbinden, Ihre App erstellen und dann das generierte systemeigene Windows Phone 8-Projekt in Visual Studio öffnen. Das systemeigene Projekt finden Sie im Ordner "platforms\wp8". Das dem geöffneten systemeigene Projekt können Sie das Fenster Ausgabe verwenden, um die Konsolenausgabe anzuzeigen. Weitere Informationen über das Zugreifen auf systemeigene Projekte finden Sie unter Zugriff auf ein systemeigenes Cordova-Projekt.

Warnung

Die Änderungen, die Sie am systemeigenen Projekt vorgenommenen haben, werden beim erneuten Erstellen der Cordova-App überschrieben.

Die Tools herunterladen Herunterladen der Visual Studio-Tools für Apache Cordova oder weitere Informationen

Siehe auch

Konzepte

Erste Schritte mit Visual Studio-Tools für Apache Cordova

Weitere Ressourcen

FAQ

Bekannte Probleme