Video zur exemplarischen Vorgehensweise: Debuggen mit Visual Studio-Diagnosetools für Cordova

  • Artikel

Bei der Entwicklung von Apache Cordova-Apps in Visual Studio können Sie die Diagnosetools wie Visual Studio-Debugger, DOM Explorer und die JavaScript-Konsole zur Behebung von Problemen in Ihren Apps verwenden.

Dieser Artikel folgt den Schritten im Video-Lernprogramm zum Debuggen von Cordova. Die Schritte entsprechen den Videoinhalten zur Einführung von Tools und Features (ca. vier Minuten ab dem Anfang).

Voraussetzungen

Um die Schritte in diesem Lernprogramm ausführen zu können, müssen Sie folgende Aktionen durchführen:

  1. Installieren Sie Visual Studio 2015 mit den Visual Studio-Tools für Apache Cordova.

  2. Laden Sie das AngularJS ToDoList-Beispiel herunter, entpacken Sie es, und öffnen Sie die Projektmappe (SLN-Datei) in Visual Studio.

Debuggen von Apps mit Diagnosetools

So verwenden Sie die Diagnosetools

  1. Öffnen Sie in Visual Studio das AngularJS ToDoList-Beispiel, und wählen Sie Android aus der Liste der Projektmappenplattformen aus.

  2. Wählen Sie Ripple Nexus (Galaxy) als Debugziel aus.

  3. Drücken Sie F5, um den Debugger zu starten.

  4. Fügen Sie beim Laden der ToDoList-App in Ripple ein zusätzliches Aufgabenelement hinzu, um sicherzustellen, dass die App ordnungsgemäß funktioniert.

  5. Fügen Sie in "controllers.js" einen Haltepunkt zu var text = $scope.newToDoText; in der addToDo-Funktion hinzu, indem Sie auf den grauen linken Rand klicken.

    $scope.addToDo = function () {
    var text = $scope.newToDoText; 
    if (!text) { 
    return; 
};

    Mit dem hinzugefügten Haltepunkt sieht der Editor wie folgt aus.

    Festlegen eines Haltepunkts

  6. Fügen Sie in der ausgeführten App der Aufgabenliste ein anderes Aufgabenelement hinzu.

    Wenn Sie das Element eingeben, unterbricht der Debugger Ihren Code.

    Überspringen von Code

    Hier können Sie folgende Aktionen ausführen:

    • Bewegen Sie den Mauszeiger über Variablen, um ihren aktuellen Wert zu ermitteln (siehe vorherige Abbildung).

    • Drücken Sie F10, um den Code zu durchlaufen und die aktualisierten Werte zu überprüfen.

    • Öffnen Sie das Kontextmenü für eine ausgewählte Variable, und wählen Sie Überwachung hinzufügen aus.

      Die ausgewählte Variable wird im Überwachungsfenster angezeigt. Dies bietet Ihnen eine hervorragende Möglichkeit, beim Durchlaufen des Codes mehrere Variablen und ihre Werte während der Änderung anzuzeigen.

      Verwenden des Überwachungsfensters

    • In den Fenstern "Lokal" und "Aufrufliste" finden Sie weitere Informationen über den Zustand der App beim Debuggen.

  7. Wählen Sie während der App-Ausführung die Registerkarte DOM Explorer aus.

    Auf der linken Seite im DOM Explorer erhalten Sie einen Überblick über das aktuelle DOM.

  8. Klicken Sie auf die Schaltfläche Element auswählen, und wählen Sie im Ripple-Emulator ein Listenelement aus.

    Auswählen eines Elements im DOM Explorer

    Wenn Sie das Element auswählen, wird das entsprechende Element im DOM Explorer hervorgehoben.

    Auf der rechten Seite werden die CSS-Eigenschaftswerte für das aktuell ausgewählte Element angezeigt.

    • Auf der Registerkarte "Formatvorlagen" werden die CSS-Formatvorlagen, die diesem Element zugeordnet sind, organisiert nach CSS-Selektorname angezeigt.

    • Auf der Registerkarte "Berechnet" werden die Eigenschaftenwerte der CSS-Formatvorlage für das Element in Echtzeit an.

    • Auf der Registerkarte "Layout" wird das Verschachtelungsmodell für das Element angezeigt.

    Sie können direkt im DOM Explorer Änderungen an Ihrer Benutzeroberfläche vornehmen (in der laufenden DOM-Ansicht oder auf den Registerkarten "Formatvorlagen" und "Layout"). Die Änderungen werden sofort in der ausgeführten App dargestellt. Dadurch wird das Debuggen der Benutzeroberfläche erheblich vereinfacht.

    Sie könnten z. B. den Schriftgrad für ein Listenelement (ein <input>-Element) auf der Registerkarte "Formatvorlagen" bearbeiten.

    Bearbeiten eines Werts auf der Registerkarte "Stile"

  9. Wählen Sie ein Element wie z. B. die Position unter einem Aufgabenlistenelement (ein <h3>-Element) aus, und bearbeiten Sie den Wert.

    Ihre Änderungen werden im Ripple-Emulator in der App angezeigt.

    Ein anderes wichtiges Tool für das Debuggen von Cordova-Apps ist die JavaScript-Konsole. Sie können auch das JavaScript-Konsolenfenster verwenden, um Fehler und Benachrichtigungen von der ausgeführten App zu lesen und JavaScript-Codezeilen, die innerhalb des aktuellen Skriptkontextes ausgeführt werden, auszuwerten.

  10. Über die Ausgabe im JavaScript-Konsolenfenster können Sie die Benachrichtigungen anzeigen.

    Hinweis

    Eine Liste der Befehle wie console.log finden Sie unter JavaScript-Konsolenbefehle.

  11. Um JavaScript zu evaluieren, geben Sie den JavaScript-Code in das Eingabefeld ein. Wenn Sie z. B. "document" eingeben, werden IntelliSense-Informationen für das "document"-Objekt auf der aktuellen HTML-Seite in Ripple (Chrome) angezeigt.

    Verwenden der JavaScript-Konsole

    Sie können Code ausführen, indem Sie EINGABETASTE drücken (einzeiliger Modus) oder indem Sie auf den grünen Pfeil klicken (mehrzeiligen Modus).

  12. Drücken Sie die EINGABETASTE, um den Wert des "document"-Objekts im Konsolenfenster anzuzeigen.

    Tipp

    Legen Sie im Code Haltepunkte fest, um Ihre App in den gewünschten Zustand zu versetzen, und verwenden Sie dann die JavaScript-Konsole zum Überprüfen der Variablen und zum Bewerten des Codes.