Schnellstart: Debuggen von Apps (JavaScript)

Artikel
02/23/2013

Visual Studio stellt eine umfassende Debugleistung für die für Windows erstellten Windows Store-App mit JavaScript bereit und enthält Funktionen, die Internet Explorer- und Visual Studio-Entwicklern vertraut sind. In diesem Thema finden Sie eine Übersicht über die Debugfunktionen für die jeweiligen 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. 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	Im DOM Explorer verfügen Sie über eine Ansicht, die die Shell-Interpretation einer Seite anstelle des ursprünglichen Quellcodes darstellt. Sie erhalten Zugriff auf dynamische Informationen über die Stile, 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: Interaktives Debuggen mithilfe des Dom Explorers So überprüfen Sie CSS-Regeln So zeigen Sie das Layout an und bearbeiten es So zeigen Sie Ereignislistener an
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 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: Interaktives Debuggen mithilfe des JavaScript-Konsolenfensters Einzel- und Mehrzeilenmodus im JavaScript-Konsolenfenster JavaScript-Konsolenbefehle
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 So aktualisieren Sie eine App.
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 zum Starten von Debugsitzungen und zur App-Bereitstellung finden Sie unter: Starten einer Debugsitzung (JavaScript) Ausführen von Windows Sore-Apps aus Visual Studio
Haltepunkte, Durchlaufen von Code	Im Visual Studio-Debugger können Sie Haltepunkte festlegen und Code durchlaufen, indem Sie Befehle wie z. B. F5 (Debuggen starten oder fortsetzen) und F11 (Einzelschritt) verwenden. Beim Durchlaufen von Code können Sie mit der App anhand des aktuellen Zustands im JavaScript-Konsolenfenster interagieren. Weitere Informationen finden Sie unter: Schnellstart: Debuggernavigation (JavaScript) Interaktiver Debug- und Unterbrechungsmodus
Profiler	Informationen zum Suchen von Leistungsproblemen in der App, finden Sie unter Leistungsanalyse von Windows Store-Apps
JavaScript-Arbeitsspeicheranalyzer	Informationen zum Suchen von Speicherverlusten in der App finden Sie unter Analysieren der Speicherauslastung in Windows Store-Apps (JavaScript)

Dieses Thema bietet zudem Informationen über folgende JavaScript-Debugaufgaben: Aktivieren von Ausnahmen (erste Chance) und Debuggen von Apps, die Komponenten der Windows-Runtime verwenden.

Interaktives Debuggen mithilfe des Dom Explorers

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

Wenn Sie den Debugger nicht beenden möchten, können Sie Änderungen am Quellcode vornehmen und die App mithilfe der Schaltfläche Windows-App aktualisieren auf der Symbolleiste "Debuggen" anschließend aktualisieren. Weitere Informationen finden Sie unter So aktualisieren Sie eine App.

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.
Dynamisches Ändern der Attribute der gerenderten 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 rechts angezeigten Werte automatisch aktualisiert, sodass diese dem im Dom Explorer ausgewählten Element entsprechen. Zu diesen Registerkarten gehören Stile, Formatvorlagen verfolgen, Layout, Attribute und Ereignisse. Weitere Informationen zum Auswählen von Elementen finden Sie unter Auswählen von Elementen.

Tipp

Wenn das DOM Explorer-Fenster geschlossen ist, klicken Sie auf Debuggen > Fenster > DOM Explorer, um dieses 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. Der Code der App enthält mehrere Fehler.

So verwenden Sie interaktives Debuggen im Dom Explorer

Erstellen Sie in Visual Studio eine neue Projektmappe, indem Sie auf Datei > Neues Projekt klicken.
Wählen Sie die JavaScript-Vorlage Leere Anwendung aus, und geben Sie einen Namen für das Projekt wie z. B. FlipView-App ein.

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;background-color:#0094ff" 
        data-win-control="WinJS.UI.FlipView"
            data-win-options="{ itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
    </div>

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.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);

})();

Hinweis

Der vorangehende JavaScript-Code ist in einer anonymen Funktion gekapselt. Diese Kapselung entspricht dem typischen Programmierungsmodell, das in Projektvorlagen verwendet wird. Wenn Sie Code auf diese Weise umschließen, können Sie die WinJS.Namespace.define-Funktion verwenden, um auf die Codeelemente von einer anderen Stelle der App aus zuzugreifen.

Wählen Sie in der Dropdownliste neben der Schaltfläche Debuggen starten auf der Symbolleiste Debuggen die Option Simulator aus.
Klicken Sie auf Debuggen > Debuggen starten, oder drücken Sie F5, um die Anwendung im Debugmodus auszuführen.

Dadurch wird die Anwendung im Simulator ausgeführt. Es wird jedoch ein fast gänzlich leeres Fenster angezeigt, da der Code einige Fehler enthält. Ein Standardbild in der linken oberen Ecke weist darauf, dass etwas geladen wurde. Wenn Sie in diesen Fensterbereich klicken, sehen Sie einen FlipView Pfeil, der darauf hinweist, dass das Steuerelement instanziiert wurde, jedoch nicht die richtige Größe hat.

Tipp

Sie können ALT+TAB oder F12 drücken, um zwischen Visual Studio und der ausgeführten App zu wechseln. Wenn Sie die Anwendung im Simulator und nicht auf dem lokalen Computer ausführen, können Sie auf die Visual Studio- und Simulatorschaltflächen in der Windows-Taskleiste klicken, um zwischen den Fenstern zu wechseln.
Klicken Sie in Visual Studio auf die Registerkarte DOM Explorer.
Wählen Sie im DOM Explorer-Fenster das DIV-Element für den Abschnitt aus, der über die ID "fView" verfügt.

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.

Beachten Sie, dass die Breite und Höhe im Dom Explorer fälschlicherweise auf Pixelwerten festgelegt wurden.

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.
Doppelklicken Sie auf der Registerkarte Attribute auf das style-Attribut. Bearbeiten Sie Höhe und Breite so, dass beide auf 100 % gesetzt sind. Nachdem Sie die EINGABETASTE drücken, werden die neuen Werte sofort im Simulator dargestellt, obwohl die Debugsitzung nicht beendet wurde.

Wichtig

Ebenso wie die Attributwerte können Sie auch Werte aktualisieren, die auf den Registerkarten Stile, Formatvorlagen verfolgen und Layout angezeigt werden. Weitere Informationen finden Sie unter So überprüfen Sie CSS-Regeln und So zeigen Sie das Layout an und bearbeiten es.

Das FlipView-Steuerelement verfügt nun über die ordnungsgemäße Größe. Es funktioniert auch ordnungsgemäß. Jedoch werden statt der erwarteten Bilder die Standardbilder angezeigt, es fehlen Bilder und die erwarteten Bilder werden mit fehlenden Bildern vermischt.

Dieses Problem wird durch einen Fehler im JavaScript-Code verursacht. Im nächsten Abschnitt untersuchen wir eine Möglichkeit, diesen Fehler mithilfe des JavaScript-Konsolenfensters zu korrigieren. Weitere Informationen zur Fortsetzung des Debuggens finden Sie unter Interaktives Debuggen mithilfe des JavaScript-Konsolenfensters

Sie können die Aktualisierungsfunktion verwenden, um HTML, CSS und den JavaScript-Code zu ändern und Seiten schnell erneut zu laden, ohne den Debugger zu beenden und neu zu starten. Weitere Informationen zum Aktualisierungsfeature finden Sie unter So aktualisieren Sie eine App.

So aktualisieren Sie die App beim Debuggen

Wechseln Sie bei ausgeführter Anwendung zu Visual Studio.
Öffnen Sie "default.html", und bearbeiten Sie den Quellcode, indem Sie die Höhe und die Breite des "fView"-DIV-Elements auf 100 % ändern.
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 neu geladen, und der Simulator wechselt in den Vordergrund zurück.

Wie zuvor werden die Bilder nicht ordnungsgemäß angezeigt. Sie können das Debuggen dieser App im nächsten Abschnitt fortsetzen.

Interaktives Debuggen mithilfe des JavaScript-Konsolenfensters

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.
Durchführen weiterer Aufgaben, wie z. B. das Löschen des Fensters. Unter JavaScript-Konsolenbefehle finden Sie eine vollständige Liste der Befehle.

Tipp

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

Mit dieser Prozedur führen wir das Debuggen der App FlipView fort, deren Debuggen wir im Abschnitt Interaktives Debuggen mithilfe des Dom Explorers begonnen haben. Wir konnten bereits feststellen, dass das Steuerelement FlipView ordnungsgemäß funktioniert, jedoch nicht die erwarteten Bilder anzeigt.

So Debuggen Sie den JavaScript-Code der FlipView-App

Geben Sie in der Eingabeeingabeaufforderung des JavaScript-Konsolenfensters bei im Simulator ausgeführter FlipView-App Data.items ein, und drücken Sie die EINGABETASTE.

Im Konsolenfenster wird eine Schnellansicht für das items-Objekt angezeigt. Dies weist darauf hin, dass das items-Objekt instanziiert wurde, und dass dieses im 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 sind im Objekt immer noch vorhanden, und es werden fehlende Bilder mit den erwarteten Bilder vermischt.
Geben Sie an der Eingabeaufforderung Data.items.push ein, und drücken Sie die EINGABETASTE. Im Konsolenfenster wird die Funktionsimplementierung von push aus einer Windows Library für JavaScript (WinJS)-Projektdatei angezeigt. Mit einer Prüfung mithilfe von IntelliSense lässt sich erkennen, dass zum Ersetzen der Standardbilder setAt verwendet werden sollte.
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: "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 klicken Sie rechts unten im Fenster auf das Pfeilsymbol.

Korrigieren Sie die push-Funktionsaufrufe in der Eingabeaufforderung, indem Sie pages.push durch Data.items.setAt ersetzen, und klicken Sie dann auf das Pfeilsymbol, um das Skript auszuführen. Der korrigierte Code sollte wie folgt aussehen:

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

Drücken Sie STRG+ALT+M, um in der Eingabeeingabeaufforderung der Konsole in den Einzeilenmodus zu wechseln, und drücken Sie anschließend STRG+A, um die vorherige Eingabe auszuwählen, um diese entfernen zu können.
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.
Überprüfen Sie den Simulator erneut. Sie werden feststellen, dass die richtigen Bilder auf den richtigen FlipView Seiten vorhanden sind.
Im Dom Explorer wird das aktualisierte DIV-Element angezeigt, und Sie können in die Teilstruktur navigieren, um die erwarteten IMG-Elemente zu suchen.
Beenden Sie das Debuggen, indem Sie auf Debuggen > StopDebugging klicken, 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 Apps (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 das JavaScript-Konsolenfenster dennoch verwenden, um Skripts und Befehle auszuführen, die im aktuellen Anwendungszustand gültig sind. Für diese Prozedur verwenden wir die in einer vorherigen Prozedur erstellte FlipView-App, um die Verwendung des Unterbrechungsmodus zu veranschaulichen.

So legen Sie einen Haltepunkt fest und Debuggen die Anwendung

Klicken Sie in der Datei "default.html" der zuvor erstellten FlipView-App mit der rechten Maustaste auf die updateImages()-Funktion, und klicken Sie auf Haltepunkt > Haltepunkt einfügen.
Wählen Sie auf der Symbolleiste Standard in der Dropdownliste neben der Schaltfläche Debuggen starten den Eintrag Lokaler Computer aus.
Klicken Sie auf Debuggen > Debuggen starten, 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.

Sie können Variablenwerte ändern, um den Programmzustand sofort zu beeinflussen, ohne die aktuelle Debugsitzung zu beenden.
Geben Sie an der Eingabeaufforderung updateImages ein, und drücken Sie die EINGABETASTE. Die Funktionsimplementierung wird im Konsolenfenster angezeigt.
Kopieren Sie eine Zeile der Funktion in die Eingabeaufforderung, und ändern Sie den Indexwert in "3".
```
pages.setAt(3, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
```
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.
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 Mehr- zum Einzelzeilenmodus wechseln, können Sie die Eingabezeile löschen, indem Sie STRG+A drücken und dann ein beliebiges Zeichen eingeben. Um ein Skript im Mehrzeilenmodus auszuführen, drücken Sie STRG+EINGABE, oder klicken Sie rechts unten im Fenster auf das Pfeilsymbol.

Auswählen von Elementen

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
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 im Simulator oder im Gerät 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+Umschalt+F drücken), wird der Auswahlmodus geändert, sodass Sie ein Element im DOM Explorer auswählen können, indem Sie in der App oder im Simulator 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 in diesem Modus mit dem Mauszeiger auf Elemente im Simulator oder im Gerät zeigen, werden diese Elemente farbig umrandet. Wenn Sie auf das konturierte Element klicken, kehrt der Dom Explorer mit dem ausgewählten Element in den Vordergrund zurück. Ein Beispiel für die Auswahl von Elementen mithilfe der Schaltfläche Element auswählen finden Sie unter So überprüfen Sie CSS-Regeln.

Debuggen von Apps, die Komponenten der Windows-Runtime verwenden

Wenn Sie Windows Store-Apps mithilfe von JavaScript debuggen, die auf C#- oder Visual Basic WinMD-Dateien verweisen, oder die C++-Komponenten für Windows-Runtime (eine WinMD-Datei und eine DLL) enthalten, können Sie den auszuführenden Debugger angeben. Sie können JavaScript und verwalteten oder systemeigenen Code nicht gleichzeitig debuggen.

Sie können den auszuführenden Debugger auf der Eigenschaftenseite für das Debuggen des Projekts angeben. Weitere Informationen finden Sie unter Starten einer Debugsitzung (JavaScript).

Bereitstellen von Apps

In einigen Debugszenarien für Windows Store-Apps mit JavaScript, die für Windows erstellt wurden, müssen Sie möglicherweise die App bereitstellen, ohne diese in Visual Studio zu starten. So werden beispielsweise Apps, die freigegebene Inhalte empfangen, über die Freigabebenutzeroberfläche gestartet. In diesem Fall muss das Debuggen von der App ausgeführt werden, die die Inhalte freigibt. Für die freigegebene Inhalte empfangende App können Sie auf der Eigenschaftenseite für das Debuggen die Eigenschaft Anwendung starten auf Nein setzen. Weitere Informationen zu App-Bereitstellungsszenarien finden Sie unter Starten einer Debugsitzung (JavaScript).

Aktivieren von Ausnahmen (erste Chance)

Durch die Verwendung von Ausnahmen (erste Chance) können Sie festlegen, dass eine App in den Unterbrechungsmodus wechselt, wenn eine Laufzeitausnahme auftritt. Wenn diese Funktion aktiviert ist, wechselt die Anwendung auch dann in den Unterbrechungsmodus, wenn Ausnahmen bearbeitet werden. Dadurch können Sie mehr Fehler erkennen, die normalerweise beim Debuggen nicht sichtbar sind. Einige Bibliotheken machen umfassenden Gebrauch von Ausnahmen. Wenn Sie daher mit diesen Bibliotheken arbeiten, empfiehlt es sich, Ausnahmen (erste Chance) zu deaktivieren.

So aktivieren Sie Ausnahmen (erste Chance)

Klicken Sie in Visual Studio auf Debuggen > Ausnahmen.
Erweitern Sie im Dialogfeld Ausnahmen den Knoten JavaScript Runtime Exceptions.
Aktivieren Sie das Kontrollkästchen Ausgelöst für alle Ausnahmen, für die der Debugger stets unterbrochen werden soll. Klicken Sie anschließend auf OK.

Unterstützung für Browser und Plattform

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 8 erstellte Windows Store-Apps
Internet Explorer 10 wird unter Windows 8 ausgeführt

Hier können Sie Windows 8 und Visual Studio herunterladen.

Siehe auch

Freigeben über

Schnellstart: Debuggen von Apps (JavaScript)

Interaktives Debuggen mithilfe des Dom Explorers

So verwenden Sie interaktives Debuggen im Dom Explorer

So aktualisieren Sie die App beim Debuggen

Interaktives Debuggen mithilfe des JavaScript-Konsolenfensters

So Debuggen Sie den JavaScript-Code der FlipView-App

Interaktiver Debug- und Unterbrechungsmodus

So legen Sie einen Haltepunkt fest und Debuggen die Anwendung

Einzel- und Mehrzeilenmodus im JavaScript-Konsolenfenster

Auswählen von Elementen

Debuggen von Apps, die Komponenten der Windows-Runtime verwenden

Bereitstellen von Apps

Aktivieren von Ausnahmen (erste Chance)

So aktivieren Sie Ausnahmen (erste Chance)

Unterstützung für Browser und Plattform

Siehe auch

Aufgaben

Referenz

Konzepte

Weitere Ressourcen

Zusätzliche Ressourcen