Schnellstart: Debuggen von HTML, CSS und JavaScript

gilt sowohl für Windows als auch für Phone


Visual Studio bietet für Store-Apps, die mit JavaScript erstellt werden, eine umfassende Debugleistung, u. a. mit Funktionen, die Internet Explorer- und Visual Studio-Entwicklern vertraut sind. Diese Funktionen werden für Windows Store- und Windows Phone-Store-Apps unterstützt. In diesem Thema finden Sie eine Übersicht über die Debugfunktionen für diese JavaScript-Apps sowie Lernprogramme für die Funktionsweisen der Features.

Beim Debuggen können Sie ein Modell des interaktiven Tests verwenden, in dem Sie die gerenderte HTML, CSS und den JavaScript-Code anzeigen und mit diesen interagieren können, um die Probleme zu beheben. Mit den DOM-Überprüfungstools und dem JavaScript-Konsolenfenster können Sie mit dem Live-DOM und dem App-Code interagieren, ohne den Debugger zu beenden und neu zu starten. Sie können zudem ein herkömmlicheres Visual Studio-Debuggingmodell verwenden, mit dem Sie wichtige Aufgaben wie das Festlegen von Haltepunkten und das schrittweise Ausführen von Code durchführen können. Sie können auch eine beliebige Kombination beider Modelle verwenden.

In der folgenden Tabelle werden die verfügbaren Debugfunktionen für Windows Store-Apps mit JavaScript sowie Links zu weiteren Informationen aufgeführt.

Dom Explorer

DOM Explorer ist ein DOM-Überprüfungstool, das eine Ansicht des Live-DOM anstelle des ursprünglichen Quellcodes bereitstellt. Sie erhalten Zugriff auf dynamische Informationen über die CSS-Formatvorlagen, berechnete Layouts und Attribute der aktuell ausgewählten Elemente. Sie können die Stile, Layouts und Attribute ändern und die Ergebnisse sofort anzeigen.

Weitere Informationen finden Sie unter:

JavaScript-Konsolenfenster

Im JavaScript-Konsolenfenster können Sie mit der gerenderten App interagieren, indem Sie Meldungen an die Konsole senden, Werte von lokalen und globalen Variablen anzeigen, Objektschnellansichten anzeigen und JavaScript-Code ausführen. Die Konsole meldet zusätzlich zu den Ausnahmen des Dokumentobjektmodells (DOM) und der Windows-Runtime-JavaScript-Fehler und -Ausnahmen.

Weitere Informationen finden Sie unter:

Aktualisieren

Beim Aktualisieren können Sie den Quellcode bearbeiten und anschließend Seiten erneut laden ohne den Debugger zu beenden und neu zu starten. Weitere Informationen finden Sie unter Aktualisieren einer App (JavaScript).

Element auswählen

Im DOM Explorer können Sie DOM-Elemente auswählen, indem Sie im Simulator oder auf dem Hostcomputer auf Bereiche der ausgeführten App klicken. Weitere Informationen finden Sie unter Auswählen von Elementen.

Debugsitzungen

Weitere Informationen zur App-Bereitstellung und zum Starten von Debugsitzungen finden Sie unter:

Haltepunkte, Durchlaufen von Code

Informationen zum Festlegen von Haltepunkten und zum schrittweisen Durchlaufen des Codes finden Sie unter:

Im Dom Explorer wird eine Ansicht der gerenderten Seite angezeigt. Zudem können Sie den Dom Explorer verwenden, um Werte zu ändern und die Ergebnisse sofort anzuzeigen. Dadurch können Sie Änderungen mit einem iterativen Prozess testen, ohne den Debugger zu beenden und neu zu starten. Bei dieser Methode wird der Quellcode des Projekts beim Interagieren mit der Seite nicht geändert. Daher beenden Sie nach dem Auffinden der gewünschten Codekorrekturen den Debugger nehmen die Änderungen am Quellcode vor.

Tipp Tipp

Wenn Sie den Debugger nicht beenden und neu starten möchten, können Sie Änderungen am Quellcode vornehmen und die App mithilfe der Schaltfläche Windows-App aktualisieren auf der Symbolleiste „Debuggen“ (oder durch Drücken der F4-TASTE) anschließend aktualisieren. Weitere Informationen finden Sie unter Aktualisieren einer App (JavaScript).

Sie können den Dom Explorer für folgende Aufgaben verwenden:

  • Prüfen von gerenderter HTML, CSS und JavaScript-Code und Navigation in der DOM-Element-Teilstruktur.

  • Dynamische Bearbeitung von Attributen und CSS-Formatvorlagen für gerenderte Elemente.

  • Überprüfen der Anwendung der CSS-Formate auf der Seite und dynamisches Vornehmen von Änderungen.

Beim Debuggen von Apps müssen Sie häufig Elemente im DOM Explorer auswählen. Wenn Sie ein Element auswählen, werden die auf den Registerkarten des Live-DOM rechts angezeigten Werte automatisch aktualisiert, sodass diese dem im DOM Explorer ausgewählten Element entsprechen. Zu diesen Registerkarten gehören Formatvorlagen, Berechnet, Layout, Ereignisse und Änderungen. Weitere Informationen zum Auswählen von Elementen finden Sie unter Auswählen von Elementen.

Tipp Tipp

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

In der folgenden Prozedur wird eine App mithilfe vom DOM Explorer interaktiv debuggt. Sie erstellen eine Anwendung, die ein FlipView-Steuerelement verwendet und debuggen diese anschließend. Die App enthält mehrere Fehler.

So debuggen Sie durch Überprüfen des Live-DOM

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

  2. Wählen Sie JavaScript > Store 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. Fügen Sie dem BODY-Element von "default.html" folgenden Code hinzu:

    <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" style="width:100px;height:100px"
        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 das folgende CSS hinzu:

    #fView {
        background-color:#0094ff;
        height: 100%;
        width: 100%;
        margin: 25%;
    }
    
  6. Ersetzen Sie den Code in "default.js" durch folgenden 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.setAt(0, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223195" });
            pages.setAt(1, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223196" });
            pages.setAt(2, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223197" });
        };
    
        app.oncheckpoint = function (args) {
        };
    
        app.start();
    
        var publicMembers = {
            items: pages
        };
    
        WinJS.Namespace.define("Data", publicMembers);
    
    })();
    

    Die folgende Abbildung zeigt das Ziel beim Ausführen dieser App im Windows Phone-Emulator (im Simulator ist die Anzeige ähnlich). Um diesen Status für die App zu erreichen, müssen Sie allerdings zunächst eine Anzahl von Fehlern beheben.

    FlipView-App mit erwarteten Ergebnissen
  7. Wählen Sie in der Dropdownliste neben der Schaltfläche Debuggen starten auf der Symbolleiste Debuggen entweder die Option Simulator oder Emulator 8.1 WVGA 512MB aus.

    Debug-Zielliste auswählen
  8. Wählen Sie Debuggen > Debuggen starten aus, oder drücken Sie F5, um die Anwendung im Debugmodus auszuführen.

    Dadurch wird die Anwendung im Simulator oder im Windows Phone-Emulator ausgeführt. Es wird jedoch ein fast gänzlich leeres Fenster angezeigt, da das Format einige Fehler enthält. Das erste FlipView-Bild wird in einem kleinen Quadrat neben der Bildschirmmitte angezeigt.

  9. Wenn Sie die App im Simulator ausführen, wählen Sie den Symbolleistenbefehl Auflösung ändern auf der rechten Seite des Simulators aus, um eine Bildschirmauflösung von 1280 x 800 zu konfigurieren. Dadurch entsprechen die Werte, die in den folgenden Schritten gezeigt werden, denen, die Sie im Simulator sehen.

  10. Wechseln Sie zu Visual Studio, und wählen Sie die Registerkarte DOM Explorer aus.

    Tipp Tipp

    Sie können ALT+TAB oder F12 drücken, um zwischen Visual Studio und der ausgeführten App zu wechseln.

  11. Wählen Sie im Fenster „DOM Explorer“ das DIV-Element für den Abschnitt aus, der über die ID "fView" verfügt. Verwenden Sie die Pfeiltasten, um das richtige DIV-Element anzuzeigen und auszuwählen. (Mit dem Schlüssel „Cursor nach rechts“ können Sie die untergeordneten Elemente eines Elements anzeigen.)

    DOM-Explorer
    Tipp Tipp

    Sie können das DIV-Element auch in der linken unteren Ecke des JavaScript-Konsolenfensters auswählen, indem Sie an der >> Eingabeeingabeaufforderung select(fView) eingeben und anschließend die EINGABETASTE drücken.

    Die Werte, die auf den Registerkarten rechts im DOM Explorer-Fenster zu sehen sind, werden automatisch aktualisiert, sodass diese dem aktuellen Element im DOM Explorer entsprechen.

  12. Wählen Sie die Registerkarte Berechnet auf der rechten Seite aus.

    Diese Registerkarte zeigt den berechneten oder den abschließenden Wert für jede Eigenschaft des ausgewählten DOM-Elements an.

  13. Öffnen Sie die CSS-Regel für die Höhe. Beachten Sie, dass es eine Inlineformatvorlage gibt, die auf 100px festgelegt ist. Dies ist inkonsistent mit dem für die CSS-Auswahl festgelegten #fView Höhenwert von 100 %. Da die #fView-Auswahl durchgestrichenen Text enthält, hat die Inlineformatvorlage Vorrang vor diesem Format.

    In der folgenden Abbildung ist die Registerkarte „Berechnet“ dargestellt.

    Registerkarte "Berechnet" des DOM Explorer
  14. Doppelklicken Sie im Hauptfenster von DOM Explorer auf das Inlineformat für die Höhe und die Breite des DIV-Elements fView. Sie können die Werte jetzt hier bearbeiten. In diesem Szenario möchten wir sie vollständig entfernen.

  15. Wählen Sie width: 100px;height: 100px; aus, drücken Sie die ENTF-TASTE, und drücken Sie die EINGABETASTE. Nachdem Sie die EINGABETASTE gedrückt haben, werden die neuen Werte sofort im Simulator oder im Windows Phone-Emulator dargestellt, obwohl die Debugsitzung nicht beendet wurde.

    Wichtiger Hinweis Wichtig

    Ebenso wie die Attributwerte im Fenster "DOM Explorer" können Sie auch Werte aktualisieren, die auf den Registerkarten Formatvorlagen, Berechnet und Layout angezeigt werden. Weitere Informationen finden Sie unter Debuggen von CSS-Stilen mithilfe von DOM Explorer und Debuggen von Layout mithilfe von DOM Explorer.

  16. Wechseln Sie zur App, indem Sie den Simulator bzw. Windows Phone-Emulator auswählen oder ALT+TAB drücken.

    Das FlipView-Steuerelement wird jetzt größer als die Bildschirmgröße vom Simulator oder Windows Phone-Emulator dargestellt! Dies ist nicht das beabsichtigte Ergebnis. Wechseln Sie zur weiteren Untersuchung zu Visual Studio zurück.

  17. Wählen Sie im DOM Explorer die Registerkarte Berechnet erneut aus, und öffnen Sie die Höhenregel. Das fView-Element zeigt weiterhin einen Wert von 100 % an, wie vom CSS erwartet. Der berechnete Wert stimmt aber mit der Bildschirmhöhe des Simulators überein (z. B. 800 oder 667,67 Pixel), was für diese App nicht gewünscht ist. Sie können zur weiteren Untersuchung die Höhe und Breite für das fView DIV-Element entfernen.

  18. Deaktivieren Sie auf der Registerkarte "Formatvorlagen" die Höhen- und Breiteneigenschaften für die CSS-Auswahl #fView.

    Auf der Registerkarte Berechnet wird nun eine Höhe von 400px angezeigt. Die Informationen geben an, dass dieser Wert aus dem .win-flipview Selektor stammt, der in ui-dark.css angegeben wird. Dies ist eine CSS-Datei der Plattform.

  19. Wechseln Sie zur App zurück.

    Sie sehen eine Verbesserung. Es muss jedoch noch ein weiteres Problem behoben werden: Die Ränder sind zu groß.

  20. Wechseln Sie zur weiteren Untersuchung zu Visual Studio, und wählen Sie die Registerkarte Layout aus, um einen Überblick über das Feldmodell des Elements zu erhalten.

    Auf der Registerkarte Layout sehen Sie diese Werte:

    • Für den Simulator 320 px (Offset) und 320 px (Rand)

    • Für den Windows Phone-Emulator 100 px (Offset) und 100 px (Rand)

    Die folgende Abbildung zeigt die Registerkarte Layout bei Verwendung des Windows Phone-Emulators (100 px Offset und Rand).

    Registerkarte "Layout" des DOM Explorer

    Dies scheint nicht richtig. Auf der Registerkarte Berechnet werden die gleichen Randwerte angezeigt.

  21. Wählen Sie die Registerkarte Formatvorlagen aus, und suchen Sie die CSS-Auswahl #fView. Hier sehen Sie einen Wert von 25 % für die Eigenschaft Rand.

  22. Wählen Sie die 25 % aus, ändern Sie sie in 25px, und drücken Sie die EINGABETASTE.

  23. Wählen Sie außerdem auf der Registerkarte "Formatvorlagen" die Höhenregel für die .win-flipview-Auswahl aus, und ändern Sie 400 px in 500 px. Drücken Sie dann die EINGABETASTE.

  24. Wechseln Sie zur Anwendung. Hier sehen Sie, dass die Platzierung von Elementen korrekt aussieht. Um Korrekturen an der Quelle auszuführen und die Anwendung zu aktualisieren, ohne den Debugger zu beenden und neu starten, gehen Sie wie folgt vor.

So aktualisieren Sie die App beim Debuggen

  1. Wechseln Sie bei ausgeführter Anwendung zu Visual Studio.

  2. Öffnen Sie "default.html", und bearbeiten Sie den Quellcode, indem Sie die Höhe und die Breite des "fView"-DIV-Elements auf 100 % ändern.

  3. Klicken Sie auf der Debug-Symbolleiste auf die Schaltfläche Windows-App aktualisieren (oder drücken Sie F4). Die Schaltfläche sieht wie folgt aus: .

    Die Seiten der App werden erneut geladen, und der Simulator oder Windows Phone-Emulator wechselt in den Vordergrund zurück.

    Weitere Informationen zum Aktualisierungsfeature finden Sie unter Aktualisieren einer App (JavaScript).

Sie können JavaScript-Code im JavaScript-Konsolenfenster ausführen und aktualisieren. Wie der Dom Explorer können Sie auch im JavaScript-Konsolenfenster Änderungen testen, ohne den Debugger zu beenden und neu zu starten, sodass Sie die Ergebnisse in der gerenderten Seite sofort finden. Wenn Sie die gewünschten Änderungen erkennen, beenden Sie anschließend den Debugger, und nehmen Sie die Korrekturen am Quellcode vor.

Sie können das JavaScript-Konsolenfenster für folgende Aufgaben verwenden:

  • Ausführen von Skripts im Ein- oder Mehrzeilenmodus.

  • Anzeigen von Informations- und Fehlermeldungen.

  • Zurückgeben von Schnellansichten für Objekte oder Anzeigen von Schnellansichten, die vom App-Code gesendet werden.

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

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

In diesem Verfahren debuggen Sie auch die FlipView-App, die im vorherigen Abschnitt Überprüfen des Live-DOM bearbeitet wurde. Es wurde bereits gezeigt, dass das Steuerelement FlipView ordnungsgemäß funktioniert. Nun soll jedoch gezeigt werden, wie ein interaktives Debugging für JavaScript-Codierungsfehler durchgeführt werden kann.

So Debuggen Sie den JavaScript-Code der FlipView-App

  1. 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>
    
  2. Öffnen Sie "default.css", und ersetzen Sie das CSS für die #fView-Auswahl durch dieses CSS:

    #fView {
        background-color:#0094ff;
        height: 500px;
        margin: 25px;
    }
    
  3. Ö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: "http://go.microsoft.com/fwlink/?LinkID=223195" });
            pages.push(1, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223196" });
            pages.push(2, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223197" });
    
        };
    
        app.oncheckpoint = function (args) {
        };
    
        app.start();
    
        var publicMembers = {
            items: pages
        };
    
        WinJS.Namespace.define("Data", publicMembers);
    
    })();
    
  4. Wenn das Debugziel noch nicht ausgewählt ist, wählen Sie Simulator oder Emulator 8.1 WVGA 512MB in der Dropdownliste neben der Schaltfläche Debuggen starten auf der Symbolleiste Debuggen aus:

    Debug-Zielliste auswählen
  5. Drücken Sie F5, um den Debugger zu starten.

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

  6. Geben Sie bei laufender FlipView-App im Simulator oder Windows 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 wie zu erwarten falsch sind. Die Standardbilder ("logo.png") sind weiterhin im Objekt vorhanden, und mit den erwarteten Bildern sind fehlende Bilder vermischt.

    Fenster der JavaScript-Konsole

    Beachten Sie, dass es mehr weitere Elemente im Objekt items._data als erwartet gibt.

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

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

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

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

    TippTipp

    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.

  9. 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: "http://go.microsoft.com/fwlink/?LinkID=223195" });
    Data.items.setAt(1, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223196" });
    Data.items.setAt(2, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223197" });
    
    TippTipp

    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.

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

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

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

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

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

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

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 Anwendungszustand gültig sind. In diesem Verfahren wird anhand der korrigierten Version der FlipView-App, die in einem früheren Verfahren erstellt wurde, die Verwendung des Unterbrechungsmodus gezeigt.

So legen Sie einen Haltepunkt fest und Debuggen die Anwendung

  1. Öffnen Sie in der Datei "default.html" der zuvor 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 Standard in der Dropdownliste neben der Schaltfläche Debuggen starten den Eintrag Lokaler Computer oder Emulator 8.1 WVGA 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 auf 3:

    pages.setAt(3, { flipImg: "http://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.

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.

Sie können beim Debuggen einer App DOM-Elemente auf drei Arten auswählen:

  • Durch das Klicken auf Elemente direkt im DOM Explorer-Fenster (oder mithilfe der Pfeiltasten)

  • Mit der Schaltfläche Element auswählen (STRG+B)

  • Mit dem select-Befehl, der zu den JavaScript-Konsolenbefehle gehört

Wenn Sie das DOM Explorer-Fenster zur Auswahl von Elementen verwenden und mit dem Mauszeiger auf ein Element zeigen, wird das entsprechende Element in der ausgeführten App hervorgehoben. Elemente werden im DOM Explorer durch Anklicken ausgewählt oder mit den Pfeiltasten markiert und ausgewählt. Sie können Elemente im DOM Explorer auch auswählen, indem Sie die Schaltfläche Element auswählen verwenden. Die folgende Abbildung zeigt die Schaltfläche Element auswählen.

Schaltfläche "Element auswählen" im DOM Explorer

Wenn Sie auf Element auswählen klicken (oder STRG+B drücken), wird der Auswahlmodus geändert, sodass Sie ein Element im DOM Explorer auswählen können, indem Sie in der ausgeführten App auf dieses klicken. Nach einem Einzelklick wechselt der Modus wieder zum normalen Auswahlmodus zurück. Wenn Sie auf Element auswählen klicken, wird die Anwendung in den Vordergrund gestellt. Zudem wird der Cursor geändert, um den neuen Auswahlmodus wiederzugeben. Wenn Sie auf das konturierte Element klicken, kehrt der Dom Explorer mit dem ausgewählten Element in den Vordergrund zurück.

Bevor Sie Element auswählen auswählen, können Sie festlegen, ob die Elemente in der ausgeführten App mithilfe der Umschaltfläche Webseiten-Markierungsfelder für das ausgewählte Element in der DOM-Struktur anzeigen hervorgehoben werden. Die folgende Abbildung zeigt diese Schaltfläche. Die Anzeige von Markierungen ist standardmäßig aktiviert.

Webseitenanzeige mit hervorgehobener Schaltfläche

Wenn Sie die Hervorhebung von Elementen ausgewählt haben, werden die Elemente hervorgehoben, auf die Sie im Simulator oder Windows Phone-Emulator zeigen. Die Farben für hervorgehobene Elemente entsprechen dem Feldmodell, das auf der Registerkarte Layout im DOM Explorer angezeigt wird.

Ein Beispiel für die Auswahl von Elementen mithilfe der Schaltfläche Element auswählen finden Sie unter Debuggen von CSS-Stilen mithilfe von DOM Explorer.

Die Visual Studio-Tools für JavaScript, der DOM Explorer sowie das JavaScript-Konsolenfenster werden auf folgenden Plattformen unterstützt:

  • Mit JavaScript für Windows erstellte Windows Store-Apps und -Apps

  • Internet Explorer 11 wird unter Windows 8.1 ausgeführt

  • Internet Explorer 10 wird unter Windows 8 ausgeführt

Klicken Sie hier, um Windows 8 und Visual Studio herunterzuladen.

Community-Beiträge

Anzeigen:
© 2014 Microsoft