Schnellstart: Debuggen von JavaScript mit der Konsole

  • Artikel

Gilt für Windows und Windows Phone

Sie können das JavaScript-Konsolenfenster zur Interaktion und zum Debuggen von Store-Apps verwenden, die mit JavaScript erstellt wurden. Diese Funktionen werden für Windows Store- und Windows Phone-Store-Apps unterstützt. Die Konsolenbefehlsreferenz finden Sie unter JavaScript-Konsolenbefehle.

Im JavaScript-Konsolenfenster können Sie:

  • Objekte, Werte und Meldungen von der App an das Konsolenfenster senden.

  • Werte lokaler und globaler Variablen in der ausgeführten App anzeigen und ändern.

  • Objektschnellansichten anzeigen.

  • JavaScript-Code im aktuellen Skriptkontext ausführen.

  • JavaScript-Fehler und Ausnahmen, Document Objekt Model- (DOM) und Windows-Runtime-Ausnahmen anzeigen.

  • Durchführen weiterer Aufgaben, wie z. B. das Löschen des Fensters. Unter JavaScript-Konsolenbefehle finden Sie eine vollständige Liste der Befehle.

In diesem Thema:

  • Debuggen mithilfe des JavaScript-Konsolenfensters

  • Interaktiver Debug- und Unterbrechungsmodus

  • Einzel- und Mehrzeilenmodus im JavaScript-Konsolenfenster

  • Ändern des Skriptausführungskontexts

Tipp

Wenn das JavaScript-Konsolenfenster geschlossen ist, wählen Sie Debuggen > Windows > JavaScript-Konsole aus, um es erneut zu öffnen.Das Fenster wird nur während einer Skriptdebugsitzung angezeigt.

Mit dem JavaScript-Konsolenfenster können Sie mit der App interagieren, ohne den Debugger zu beenden und neu zu starten. Weitere Informationen finden Sie unter Aktualisieren einer App (JavaScript). Informationen zu anderen JavaScript-Debugfunktionen wie den DOM Explorer und das Einfügen von Haltepunkten finden Sie unter Schnellstart: Debuggen von HTML und CSS und Debuggen von Store-Apps in Visual Studio.

Debuggen mithilfe des JavaScript-Konsolenfensters

Mit den folgenden Schritten wird eine FlipView-App erstellt und gezeigt, wie Sie einen JavaScript-Codefehler interaktiv debuggen.

So debuggen Sie den JavaScript-Code in der FlipView-App

  1. Erstellen Sie in Visual Studio eine neue Projektmappe, indem Sie Datei > Neues Projekt auswählen.

  2. Wählen Sie JavaScript > Store-Apps und dann entweder Windows-Apps oder Windows Phone-Apps aus. Wählen Sie anschließend Leere App aus.

  3. Geben Sie einen Namen für das Projekt ein, beispielsweise FlipView-App, und wählen Sie OK aus, um die App zu erstellen.

  4. Ersetzen Sie im BODY-Element von "default.html" den vorhandenen HTML-Code durch den folgenden Code:

    <div id="flipTemplate" data-win-control="WinJS.Binding.Template"
         style="display:none">
    <div class="fixedItem" >
        <img src="#" data-win-bind="src: flipImg" />
    </div>
</div>
<div id="fView" data-win-control="WinJS.UI.FlipView" data-win-options="{
    itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
</div>

  5. Öffnen Sie "default.css", und fügen Sie den CSS-Code für den #fView-Selektor hinzu:

    #fView {
    background-color:#0094ff;
    height: 500px;
    margin: 25px;
}

  6. Öffnen Sie "default.js", und ersetzen Sie den Code durch den folgenden JavaScript-Code:

    (function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    var myData = [];
    for (var x = 0; x < 4; x++) {
        myData[x] = { flipImg: "/images/logo.png" }
    };

    var pages = new WinJS.Binding.List(myData, { proxy: true });

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !==
            activation.ApplicationExecutionState.terminated) {
                // TODO: . . .
            } else {
                // TODO: . . .
            }
            args.setPromise(WinJS.UI.processAll());

            updateImages();
        }
    };

    function updateImages() {

        pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
        pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
        pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });

    };

    app.oncheckpoint = function (args) {
    };

    app.start();

    var publicMembers = {
        items: pages
    };

    WinJS.Namespace.define("Data", publicMembers);

})();

  7. Wenn das Debugziel noch nicht ausgewählt ist, wählen Sie Simulator oder (für Windows Phone) Emulator 8.1 WVGA 4 inch 512MB in der Dropdownliste neben der Schaltfläche Gerät auf der Symbolleiste Debuggen aus:

    Debug-Zielliste auswählen

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

    Die App wird ausgeführt, aber es fehlen Bilder. APPHOST-Fehler im JavaScript-Konsolenfenster geben an, dass Bilder fehlen.

  9. Geben Sie bei laufender FlipView-App im Simulator oder Phone-Emulator die Zeichenfolge Data.items an der Eingabeaufforderung des Konsolenfensters (neben dem Symbol ">>") ein, und drücken Sie die EINGABETASTE.

    Im Konsolenfenster wird eine Schnellansicht für das items-Objekt angezeigt. Dies weist darauf hin, dass das Objekt items instanziiert wurde und im aktuellen Skriptkontext verfügbar ist. Im Konsolenfenster können Sie auf die Knoten eines Objekts klicken (oder die Pfeiltasten verwenden), um die Eigenschaftswerte anzuzeigen. Wenn Sie wie in der folgenden Abbildung in das items._data-Objekt klicken, stellen Sie fest, dass die Bildquellverweise erwartungsgemäß falsch sind. Die Standardbilder ("logo.png") sind weiterhin im Objekt vorhanden, und zwischen den erwarteten Bildern fehlen Bilder.

    Fenster der JavaScript-Konsole

    Außerdem gibt es viel mehr Elemente im Objekt items._data als erwartet.

  10. Geben Sie an der Eingabeaufforderung Data.items.push ein, und drücken Sie die EINGABETASTE. Im Konsolenfenster wird eine Schnellansicht für die push-Funktion angezeigt, die in einer Windows Library für JavaScript (WinJS)-Projektdatei implementiert ist. In diesem App-Code verwenden wir push, um die richtigen Elemente hinzuzufügen. Mit einer Prüfung mithilfe von IntelliSense lässt sich erkennen, dass zum Ersetzen der Standardbilder setAt verwendet werden sollte.

  11. Um dieses Problem interaktiv und ohne Anhalten der Debugsitzung zu korrigieren, öffnen Sie "default.js", und wählen Sie diesen Code aus der updateImages-Funktion aus:

    pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });

    Kopieren Sie diesen Code in die Eingabeaufforderung der JavaScript-Konsole.

    Tipp

    Wenn Sie mehrzeiligen Code in die Eingabeaufforderung der JavaScript-Konsole einfügen, wechselt die Eingabeaufforderung der Konsole automatisch in den Mehrzeilenmodus.Sie können STRG+ALT+M drücken, um den Mehrzeilenmodus zu aktivieren und zu deaktivieren.Um ein Skript im Mehrzeilenmodus auszuführen, drücken Sie STRG+EINGABE, oder wählen Sie das Pfeilsymbol in der rechten unteren Fensterecke aus.Weitere Informationen finden Sie unter Einzel- und Mehrzeilenmodus.

  12. Korrigieren Sie die push-Funktionsaufrufe in der Eingabeaufforderung, indem Sie pages.push durch Data.items.setAt ersetzen. Der korrigierte Code sollte wie folgt aussehen:

    Data.items.setAt(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
Data.items.setAt(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
Data.items.setAt(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });

    Tipp

    Wenn Sie das pages-Objekt anstelle von Data.items verwenden möchten, müssen Sie im Code einen Haltepunkt festlegen, um den Bereich des pages-Objekts beizubehalten.

  13. Wählen Sie das grüne Pfeilsymbol aus, um das Skript auszuführen.

  14. Drücken Sie die Tastenkombination STRG+ALT+M, um in der Konsoleneingabeaufforderung in den einzeiligen Modus zu wechseln. Wählen Sie dann Eingabe löschen (das rote "X") aus, um den Code aus der Eingabeaufforderung zu löschen.

  15. Geben Sie an der Eingabeaufforderung Data.items.length = 3 ein, und drücken Sie die EINGABETASTE. Auf diese Weise werden die äußeren Elemente aus den Daten entfernt.

  16. Überprüfen Sie den Simulator bzw. Windows Phone-Emulator erneut. Sie sehen, dass die richtigen Bilder auf den richtigen FlipView-Seiten vorhanden sind.

  17. Im Dom Explorer wird das aktualisierte DIV-Element angezeigt, und Sie können in die Teilstruktur navigieren, um die erwarteten IMG-Elemente zu suchen.

  18. Beenden Sie das Debuggen, indem Sie Debuggen > Debuggen beenden auswählen oder indem Sie UMSCHALT+F5 drücken, und korrigieren Sie anschließend den Quellcode.

    Die vollständige "default.html"-Seite mit dem korrigierten Beispielcode finden Sie unter Debuggen von Beispielcode für HTML, CSS und JavaScript.

Interaktiver Debug- und Unterbrechungsmodus

Sie können Haltepunkte verwenden und Einzelschritte im Code durchführen, während Sie JavaScript-Debugtools wie z. B. das JavaScript-Konsolenfenster verwenden. Wenn ein im Debugger ausgeführtes Programm einen Haltepunkt erreicht, unterbricht der Debugger vorübergehend die Ausführung des Programms. Wenn die Ausführung angehalten wird, wechselt das Programm vom Ausführungs- in den Unterbrechungsmodus. Sie können die Ausführung jederzeit wieder fortsetzen.

Wenn sich ein Programm im Unterbrechungsmodus befindet, können Sie im JavaScript-Konsolenfenster Skripts und Befehle ausführen, die im aktuellen Skriptausführungskontext gültig sind. In diesem Verfahren wird anhand der korrigierten Version der FlipView-App, die Sie zuvor erstellt haben, die Verwendung des Unterbrechungsmodus gezeigt.

So legen Sie einen Haltepunkt fest und debuggen die App

  1. Öffnen Sie in der Datei "default.html" der von Ihnen erstellten FlipView-App das Kontextmenü für die updateImages()-Funktion. Wählen Sie dann Haltepunkt > Haltepunkt einfügen aus.

  2. Wählen Sie auf der Symbolleiste Debuggen in der Dropdownliste neben der Schaltfläche Debuggen starten den Eintrag Lokaler Computer oder Emulator 8.1 WVGA 4 inch 512MB aus.

  3. Wählen Sie Debuggen > Debuggen starten aus, oder drücken Sie F5.

    Die App wechselt in den Unterbrechungsmodus, wenn die Ausführung die updateImages()-Funktion erreicht. Die aktuelle Zeile der Programmausführung wird gelb hervorgehoben.

    Verwendung des Unterbrechnungsmodus mit der JavaScript-Konsole

    Sie können Variablenwerte ändern, um den Programmzustand sofort zu beeinflussen, ohne die aktuelle Debugsitzung zu beenden.

  4. Geben Sie an der Eingabeaufforderung updateImages ein, und drücken Sie die EINGABETASTE. Im Konsolenfenster wird eine Schnellansicht für die Funktion angezeigt.

  5. Wählen Sie die Funktion im Konsolenfenster aus, um die Funktionsimplementierung anzuzeigen.

    In der folgenden Abbildung wird das Konsolenfenster an dieser Stelle angezeigt.

    JavaScript-Konsolenfenster, in dem eine Schnellansicht angezeigt wird

  6. Kopieren Sie eine Zeile der Funktion aus dem Ausgabefenster in die Eingabeeingabeaufforderung, und ändern Sie den Indexwert in 3:

    pages.setAt(3, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });

  7. Drücken Sie die EINGABETASTE, um die Codezeile auszuführen.

    Wenn Sie den Code zeilenweise durchlaufen möchten, drücken Sie F11. Drücken Sie andernfalls F5, um die Programmausführung fortzusetzen.

  8. Drücken Sie F5, um die Ausführung des Programms fortzusetzen. Die FlipView-App wird jetzt angezeigt. Auf allen vier Seiten wird eines der Nicht-Standardbilder angezeigt.

    Um wieder zu Visual Studio zu wechseln, drücken Sie F12 oder ALT+TAB.

Einzel- und Mehrzeilenmodus im JavaScript-Konsolenfenster

Die Eingabeaufforderung des JavaScript-Konsolenfensters unterstützt den Einzel- und den Mehrzeilenmodus. Die interaktive Debugprozedur in diesem Thema enthält jeweils ein Beispiel für die Verwendung beider Modi. Sie können STRG+ALT+M drücken, um zwischen den Modi zu wechseln.

Der Einzelzeilenmodus stellt den Eingabeverlauf bereit. Sie können durch den Eingabeverlauf navigieren, indem Sie die NACH-OBEN- und NACH-UNTEN-TASTEN verwenden. Im Einzelzeilenmodus wird die Eingabeeingabeaufforderung beim Ausführen von Skripts gelöscht. Um ein Skript im Einzelzeilenmodus auszuführen, drücken Sie die EINGABETASTE.

Im Mehrzeilenmodus wird die Eingabeeingabeaufforderung beim Ausführen von Skripts nicht gelöscht. Wenn Sie vom Mehr- in den Einzelzeilenmodus wechseln, können Sie die Eingabezeile löschen, indem Sie Eingabe löschen (das rote "X") drücken. Um ein Skript im Mehrzeilenmodus auszuführen, drücken Sie STRG+EINGABE, oder wählen Sie das Pfeilsymbol in der rechten unteren Fensterecke aus.

Ändern des Skriptausführungskontexts

Sie können im JavaScript-Konsolenfenster mit jeweils einem einzelnen Ausführungskontext interagieren, der eine Einzelinstanz des Webplattform-Hosts (WWAHost.exe) darstellt. In einigen Szenarien kann Ihre App jedoch eine weitere Instanz des Hosts starten, wenn Sie beispielsweise einen iframe, einen Freigabevertrag, einen Web-Worker oder ein WebView-Steuerelement verwenden. Sofern eine weitere Instanz des Hosts ausgeführt wird, können Sie einen anderen Ausführungskontext zum Ausführen der App auswählen, indem Sie den Ausführungskontext in der Liste Ziel auswählen.

In der folgenden Abbildung wird die Zielliste des JavaScript-Konsolenfensters gezeigt.

Auswahl in der JavaScript-Konsolenfenster als Ziel auswählen

Sie können den Ausführungskontext auch mithilfe des Befehls cd wechseln, dazu müssen Sie jedoch den Namen des anderen Ausführungskontexts kennen, und die verwendete Referenz muss im Bereich liegen. Die Liste Ziel bietet besseren Zugriff auf andere Ausführungskontexte.

Unterstützung für Browser und Plattform

Das JavaScript-Konsolenfenster wird auf folgenden Plattformen unterstützt:

  • Windows Store und Windows Phone Store-Apps mit JavaScript und HTML

  • Internet Explorer 11 wird unter Windows 8.1 ausgeführt

  • Internet Explorer 10 wird unter Windows 8 ausgeführt

Siehe auch

Aufgaben

Aktualisieren einer App (JavaScript)

Debuggen eines WebView-Steuerelements

Konzepte

Debuggen von Store-Apps in Visual Studio

JavaScript-Konsolenbefehle

Tastenkombinationen (HTML und JavaScript)

Debuggen von Beispielcode für HTML, CSS und JavaScript

Schnellstart: Debuggen von HTML und CSS

Weitere Ressourcen

Produktsupport und Eingabehilfen