Schnellstart: Debuggernavigation (JavaScript)

Dieser Schnellstart zeigt, wie im Visual Studio-Debugger navigiert, und wie der Programmzustand in einer Sitzung angezeigt wird.

Dieser Schnellstart richtet sich an Entwickler, die mit dem Debuggen in Visual Studio nicht vertraut sind, sowie an Entwickler, die mehr zum Navigieren in einer Debugsitzung in Visual Studio erfahren möchten. Das Debuggen selbst wird in diesem Schnellstart nicht erläutert. Anhand der Funktionen des Beispielcodes sollen lediglich die in diesem Thema beschriebenen Debuggingsprozeduren aufgezeigt werden. Die Funktionen stellen keine bewährte Methoden für das Entwerfen von Apps oder Funktionen dar. Tatsächlich werden Sie rasch feststellen, dass die Funktionen und die Anwendung selbst nicht besonders viel durchführen.

Die Abschnitte dieses Schnellstarts wurden so unabhängig voneinander wie möglich konzipiert, sodass Sie einzelne Abschnitte überspringen können, die Ihnen bereits vertraute Informationen enthalten. Sie müssen auch keine Beispielanwendung erstellen. Es wird jedoch empfohlen, dies zu tun. Daher haben wir den Prozess so einfach wie möglich gestaltet.

Debugger-Tastenkombinationen. Die Navigation im Visual Studio-Debugger ist für Maus und Tastatur optimiert. Für viele der Schritte dieses Themas werden die Zugriffstasten oder Tastenkombinationen in Klammern angeführt. So weist beispielsweise (Tastatur: F5) darauf hin, dass die mit der F5-TASTE die Ausführung des Debuggers gestartet oder fortgesetzt wird.

Hinweis

Das Modulmuster

Windows Store-Apps verwenden häufig das JavaScript-Modulmuster, um Daten und Funktionen in einer Seite zu kapseln. Das Modulmuster verwendet einen einzelnen, selbstausführenden und anonymen Abschluss, um die Seitenfunktionen vom globalen Namespace zu trennen. In diesem Thema bezeichnen wir diese Funktion als Modul.

In diesem Thema

Sie lernen Folgendes:

Erstellen der Beispiel-App

Legen Sie einen Haltepunkt fest, führen Sie bis zu diesem aus, führen Sie einen Einzelschritt durch, und prüfen Sie anschließend die Programmdaten.

Einzel- und Prozedurschritte für Funktionen

Festlegen eines bedingten Haltepunkts, Ausführen bis zum Cursor und Visualisieren einer Variable

Anzeigen der Variablendaten im Lokalfenster

• Anzeigen der Variablendaten und der Prototypenkette eines Objekts

• Überprüfen der Bereichskettendaten

Navigieren zu Code mithilfe des Fensters "Aufrufliste"

Erstellen der Beispiel-App

Beim Debuggen geht es um den Code. Daher wird für die Beispielanwendung das Framework der Windows Store-App nur verwendet, um eine Quelldatei zu erstellen, mit der Sie erkennen können, wie das Navigieren in einer Debugsitzung funktioniert, und wie Sie den Programmzustand prüfen können. Der gesamte aufgerufene Code wird von der module-Funktion der Datei "default.js" aufgerufen. Es werden weder Steuerelemente hinzugefügt noch Ereignisse bearbeitet.

1. Erstellen Sie eine leere JavaScript-Windows Store-App. Öffnen Sie Visual Studio. Klicken Sie auf der Homepage auf den Link Neues Projekt. Wählen Sie im Dialogfeld Neues Projekt in der Liste Installiert die Option JavaScript und anschließend Windows Store aus. Wählen Sie in der Liste der Projektvorlagen Leere Anwendung aus. In Visual Studio werden eine neue Projektmappe und ein Projekt erstellt und die Datei "default.htm" im Code-Editor angezeigt.

   Beachten Sie die Skriptdateien, die in die Seite geladen werden.

   • Mit den Dateien base.js und ui.js wird die Windows-Bibliothek für JavaScript erstellt. Die Windows-Bibliothek für JavaScript ist ein Satz von JavaScript- und CSS-Dateien, die das Erstellen von Windows Store-Apps mithilfe von JavaScript vereinfachen. Sie verwenden diese gemeinsam mit HTML, CSS und der Windows-Runtime, um die Anwendung zu erstellen.

   • Ihr Code beginnt in der Datei default.js .

2. Öffnen Sie die Quelldatei "default.js". Öffnen Sie im Projektmappen-Explorer den Knoten js, und wählen Sie default.js aus.

3. Ersetzen Sie den Seiteninhalt durch den Beispielcode. Löschen Sie den gesamten Inhalt der Datei default.js. Folgen Sie diesem Link: Beispielcode für die Navigation im Debugger (JavaScript), und kopieren Sie dann den im JavaScript-Abschnitt aufgeführten Code in die Zwischenablage. (Wählen Sie im Browser oder Hilfeansicht Zurück aus, um zu dieser Schnellstartseite zurückzukehren.) Fügen Sie den Code im Visual Studio-Editor in die nun leere Datei default.js ein. Wählen Sie STRG+S, um die Datei zu speichern.

Sie können nun den Beispielen in diesem Thema folgen.

Legen Sie einen Haltepunkt fest, führen Sie bis zu diesem aus, führen Sie einen Einzelschritt durch, und prüfen Sie anschließend die Programmdaten.

Die häufigste Methode, eine Debugsitzung zu starten, ist die Auswahl von Debuggen starten im Menü Debuggen (Tastatur: F5). Die Anwendung wird gestartet, und die Ausführung fortgeführt, bis ein Haltepunkt erreicht wird, bis Sie diese manuell anhalten, bis eine Ausnahme auftritt, oder bis die Anwendung beendet ist.

Wenn die Ausführung im Debugger angehalten wird, können Sie den Wert einer aktiven Variablen in einem Datentipp anzeigen, indem Sie die Maus über der Variablen anhalten.

Nach dem Abbrechen der Anwendungsausführung (das auch als Debuggerunterbrechung bezeichnet wird) können Sie steuern, wie der Rest des Programmcodes ausgeführt wird. Sie können zeilenweise fortsetzen, vom Funktionsaufruf zur Funktion selbst wechseln oder eine aufgerufene Funktion in einem einzigen Schritt ausführen. Diese Prozeduren werden als Durchlaufen der Anwendung bezeichnet. Sie können zudem die Standardausführung der App fortsetzen und bis zum nächsten festgelegten Haltepunkt oder der Codezeile, in der sich der Cursor befindet, ausführen. Sie können die Debugsitzung jederzeit beenden. Der Debugger wurde entworfen, um die erforderlichen Aufräumarbeiten durchzuführen und die Ausführung zu beenden.

Beispiel 1

In diesem Beispiel legen Sie im Text der Funktion module der Datei default.js an der Stelle einen Haltepunkt fest, an dem unsere Benutzeranweisungen aufgerufen werden. Anschließend führen Sie einen Einzelschritt in die Funktion durch, zeigen Variablenwerte als Debugger-Datentipps an und beenden das Debuggen.

1. Festlegen eines Haltepunkts. Legen Sie einen Haltepunkt in der callTrack = "module function";-Anweisung fest, die direkt nach dem Aufrufen von app.start() auftritt. Wählen Sie die Zeile im schattierten Bundsteg des Quellcode-Editors aus (Tastatur: Positionieren Sie den Cursor in der Zeile, und drücken Sie F9).

   

   Das Haltepunktsymbol wird im Bundsteg angezeigt.

2. Ausführen bis zum Haltepunkt. Starten Sie die Debugsitzung, indem Sie im Menü Debuggen die Option Debuggen starten auswählen (Tastatur: F5).

   Die App wird ausgeführt und hält die Ausführung direkt vor der Anweisung an, in der der Haltepunkt gesetzt wurde. Das Symbol der aktuellen Zeile im Bundsteg weist auf die aktuelle Position hin, und die aktuelle Anweisung ist hervorgehoben.

   

   Sie können die Ausführung der Anwendung nun steuern. Zudem können Sie den Programmzustand überprüfen, während Sie die Programmanweisungen durchlaufen.

3. Führen Sie einen Einzelschritt in die Funktion aus. Wählen Sie im Menü Debuggen die Option Einzelschritt aus (Tastatur: F11).

   

   Beachten Sie, dass der Debugger zur nächsten Zeile bewegt wird. Hierbei handelt es sich um einen Aufruf der example1-Funktion. Wählen Sie erneut Einzelschritt aus. Der Debugger wechselt zur ersten Codezeile der example1-Funktion. Die markierte Zeile wurde nicht ausgeführt, die Funktion wurde jedoch in der Aufrufliste geladen, und der Arbeitsspeicher für lokale Variablen ist zugeordnet.

4. Wenn Sie einen Einzelschritt in eine Codezeile durchführen, führt der Debugger eine der folgenden Aktionen aus:

   • Wenn die folgende Anweisung kein Aufruf einer Funktion Ihrer Projektmappe ist, führt der Debugger die Anweisung aus, wechselt zur folgenden Anweisung und hält dann die Ausführung an.

   • Wenn es sich bei der Anweisung um den Aufruf einer Funktion in der Projektmappe handelt, wechselt der Debugger in die erste Zeile der aufgerufenen Funktion und hält dann die Ausführung an.

   Fahren Sie mit den Einzelschritten der Anweisungen von example1 fort, bis Sie den Endpunkt erreicht haben. Der Debugger hebt die geschweifte Klammer der Funktion hervor.

5. Zeigen Sie die Variablenwerte als Datentipps an. Fahren Sie mit den Einzelschritten der Anweisungen von example1 fort, bis Sie den Endpunkt erreicht haben. Der Debugger hebt die geschweifte Klammer der Funktion hervor. Wenn Sie die Maus über einem Variablennamen anhalten, werden der Name und der Wert der Variablen in einem Datentipp angezeigt.

   

6. Fügen Sie eine Überwachung für die "callTrack"-Variable hinzu. Die callTrack-Variable wird für diesen Schnellstart verwendet, um die in den Beispielen aufgerufenen Funktionen aufzuzeigen. Um das Anzeigen des Variablenwerts zu vereinfachen, fügen Sie diesen einem Überwachungsfenster hinzu. Wählen Sie im Editor den Variablennamen und anschließend im Kontextmenü Überwachung hinzufügen aus.

   

   In einem Überwachungsfenster können mehrere Variablen überwacht werden. Die Werte der überwachten Variablen werden wie die Werte in Datentippfenstern aktualisiert, wenn die Ausführung angehalten wird. Die überwachten Variablen werden zum debugsitzungsübergreifend gespeichert.

7. Beenden des Debuggens. Wählen Sie im Menü Debuggen die Option Debuggen beenden aus (Tastatur: UMSCHALT+F5). Dies beendet die Debugsitzung.

Einzel- und Prozedurschritte für Funktionen

Im Gegensatz zu einem von einer übergeordneten Funktion aufgerufenen Einzelschritt einer Funktion wird bei einem Prozedurschritt die untergeordnete Funktion ausgeführt und anschließend beim Fortsetzen der übergeordneten Funktion die Ausführung in der aufrufenden Funktion abgebrochen. Sie können für eine Funktion einen Prozedurschritt ausführen, wenn Sie mit der Funktionsweise der Methode vertraut und sicher sind, dass dessen Ausführung das zu untersuchende Problem nicht beeinflusst.

Bei einem Prozedurschritt für eine Codezeile, die keinen Funktionsaufruf enthält, wird die Zeile wie bei einem Einzelschritt ausgeführt.

Bei einem Prozedurschritt aus einer untergeordneten Funktion wird die Ausführung der Funktion fortgesetzt und abgebrochen, nachdem die Funktion zur aufrufenden Funktion zurückgekehrt ist. Sie können einen Prozedurschritt aus einer langen Funktion durchführen, wenn Sie erkannt haben, dass der Rest der Funktion nicht relevant ist.

Bei Prozedurschritten aus einer Funktion wird diese ausgeführt.

Beispiel 2

In diesem Beispiel führen Sie Einzel- und Prozedurschritte für Funktionen aus.

1. Rufen Sie in der Modulfunktion die Funktion "example2" auf. Bearbeiten Sie die module-Funktion, und ersetzen Sie die Zeile nach var callTrack = "module function" durch example2();.

   

2. Ausführen bis zum Haltepunkt. Starten Sie die Debugsitzung, indem Sie im Menü Debuggen die Option Debuggen starten auswählen (Tastatur: F5). Der Debugger unterbricht die Ausführung am Haltepunkt.

3. Prozedurschritt für die Codezeile. Wählen Sie im Menü Debuggen die Option Prozedurschritt aus (Tastatur: F10). Der Debugger führt die var callTrack = "module function"-Anweisung auf die gleiche Weise wie den Einzelschritt in die Anweisung aus.

4. Einzelschritt für "example2" und "example2_a". Drücken Sie die Taste F11, um zur example2-Funktion zu wechseln. Fahren Sie mit den Einzelschritten in den example2-Anweisungen fort, bis Sie die Zeile var x = example2_a(); erreichen. Führen Sie erneut für diese Zeile einen Einzelschritt durch, um den Einstiegspunkt von example2_a zu verschieben. Fahren Sie mit den Einzelschritten für die einzelnen Anweisungen von example2_a fort, bis Sie zu example2 zurückkehren.

   

5. Prozedurschritt für eine Funktion. Beachten Sie, dass die nächste Zeile in example2, var y = example2_a(); im Wesentlichen der vorherigen Zeile entspricht. Sie können problemlos einen Prozedurschritt für diese Zeile durchführen. Drücken Sie die Taste F10, um von der Wiederaufnahme von example2 zu diesem zweiten Aufruf von example2_a zu wechseln. Beachten Sie, dass die Zeichenfolge callTrack darauf hinweist, dass die example2_a-Funktion zweimal ausgeführt wurde.

6. Prozedurschritt aus einer Funktion. Drücken Sie die Taste F11, um zur example2_b-Funktion zu wechseln. Beachten Sie, dass sich example2_b nicht wesentlich von example2_a unterscheidet. Um einen Prozedurschritt aus der Funktion durchzuführen, wählen Sie Menü Debuggen die Option Ausführen bis Rücksprung aus (Tastatur: UMSCHALT+F11). Beachten Sie, dass die Variable callTrack angibt, dass example2_b ausgeführt wurde, und dass der Debugger zu dem Punkt zurückgekehrt ist, an dem example2 wiederaufgenommen wird.

7. Beenden des Debuggens. Wählen Sie im Menü Debuggen die Option Debuggen beenden aus (Tastatur: UMSCHALT+F5). Dies beendet die Debugsitzung.

Festlegen eines bedingten Haltepunkts, Ausführen bis zum Cursor und Visualisieren einer Variable

Ein bedingter Haltepunkt legt eine Bedingung fest, unter der der Debugger die Ausführung unterbricht. Die Bedingung kann mit beliebigen Codeausdrücken angegeben werden, die als "true" oder "false" ausgewertet werden können. So können Sie beispielsweise einen bedingten Haltepunkt nur dann zum Prüfen des Programmzustands einer häufig aufgerufenen Funktion verwenden, wenn eine Variable einen bestimmten Wert erreicht.

Das Ausführen bis zum Cursor entspricht dem Festlegen eines einmaligen Haltepunkts. Wenn die Ausführung angehalten wird, können Sie eine Zeile in der Quelle auswählen und die Ausführung fortsetzen, bis die ausgewählte Zeile erreicht ist. So können Sie beispielsweise die Einzelschritte einer Schleife in einer Funktion durchlaufen und feststellen, dass der Code in der Schleife ordnungsgemäß ausgeführt wird. Anstatt alle Iterationen der Schleife zu durchlaufen, können Sie bis zum Cursor ausführen, der nach dem Ausführen der Schleife positioniert wird.

Mitunter ist es schwierig, einen Variablenwert in der Zeile eines Datentipps oder einem anderen Datenfenster anzuzeigen. Der Debugger kann Zeichenfolgen, HTML und Xml in einer Text-Schnellansicht anzeigen, die eine formatierte Ansicht des Werts in einem bildlauffähigen Fenster darstellt.

Beispiel 3

In diesem Beispiel legen Sie einen bedingten Haltepunkt fest, um an einer bestimmten Iteration einer Schleife zu unterbrechen und anschließend bis zum nach der Schleife positionierten Cursor auszuführen. Zudem wird der Wert der Variablen in einer Text-Schnellansicht angezeigt.

1. Rufen Sie in der Modulfunktion die Funktion "example3" auf. Bearbeiten Sie die module-Funktion, und ersetzen Sie die Zeile nach var callTrack = "module function"; durch die Zeile example3();.

   

2. Ausführen bis zum Haltepunkt. Starten Sie die Debugsitzung, indem Sie im Menü Debuggen die Option Debuggen starten auswählen (Tastatur: F5). Der Debugger unterbricht die Ausführung am Haltepunkt der module-Funktion.

3. Führen Sie einen Einzelschritt in der Funktion "example3" aus. Wählen Sie im Menü Debuggen die Option Einzelschritt aus (Tastatur: F11), um den Einstiegspunkt der example3-Funktion zu verschieben. Führen Sie weitere Einzelschritte durch, bis Sie ein oder zwei Schleifen des for-Blocks durchlaufen haben. Beachten Sie, dass es sehr lange dauern würde, alle 1000 Iterationen zu durchlaufen.

4. Festlegen eines bedingten Haltepunkts. Klicken Sie im linken Bundsteg des Codefensters mit der rechten Maustaste auf die Zeile s += i.toString() + "\n";, und wählen Sie dann im Kontextmenü Bedingung aus.

   Aktivieren Sie das Kontrollkästchen Bedingung, und geben Sie dann im Textfeld i == 500; ein. Wählen Sie die Option Ist "True" und anschließend OK aus. Mithilfe des Haltepunkts können Sie den Wert an der 500. for Iteration der Schleife überprüfen. Sie erkennen das Symbol eines bedingten Haltepunkts am weißen Kreuz.

   

5. Ausführen bis zum Haltepunkt. Wählen Sie im Menü Debuggen Weiter aus (Tastatur: F5). Unterbrechen Sie bei i, um zu prüfen, ob der aktuelle Wert von i 500 ist. Beachten Sie zudem, dass die Variable s als einzelne Zeile dargestellt wird, die wesentlich länger als das Datentippfenster ist.

6. Visualisieren Sie eine Zeichenfolgenvariable. Klicken Sie auf das Lupensymbol im Datentipp von s.

   Das Text-Schnellansichtsfenster wird angezeigt und der Wert der Zeichenfolge als mehrzeilige Zeichenfolge dargestellt.

   

7. Ausführen bis zum Cursor. Wählen Sie die Zeile callTrack += "->example3"; und dann im Kontextmenü Ausführen bis Cursor aus (Tastatur: STRG+F10). Der Debugger schließt die Schleifeniterationen ab und hält anschließend die Ausführung an der Zeile an.

8. Beenden des Debuggens. Wählen Sie im Menü Debuggen die Option Debuggen beenden aus (Tastatur: UMSCHALT+F5). Dies beendet die Debugsitzung.

Verwenden Sie "Ausführen bis Cursor, um zum Code zurückzukehren und einen Haltepunkt zu löschen.

"Ausführen bis Cursor" kann sehr nützlich sein, wenn Sie in Bibliothekscode von Microsoft oder von Drittanbietern Einzelschritte ausführen. Zwar kann das Durchlaufen von Bibliothekscode informativ sein, es ist jedoch häufig auch zeitaufwändig. Und in der Regel interessiert Sie Ihr eigener Code weitaus mehr. Diese Übung zeigt die Vorgehensweise auf.

1. Legen Sie beim Aufruf "app.start" einen Haltepunkt fest. Legen Sie in der module-Funktion in der Zeile app.start() einen Haltepunkt fest.

2. Führen Sie bis zum Haltepunkt aus, und führen Sie dann einen Einzelschritt in die Bibliotheksfunktion durch.

   Beim Einzelschritt in app.start() zeigt der Editor den Code in base.js an. Führen Sie Einzelschritte für einige weitere Zeilen durch.

3. Prozedurschritte für Funktionen Während Sie den Prozedurschritt (F10 und UMSCHALT+F11) für den Code in base.js durchführen, stellen Sie möglicherweise fest, dass Sie letztlich die Komplexität und Länge der Startfunktion nicht untersuchen möchten.

4. Platzieren Sie den Cursor im Code, und führen Sie bis zu dieser Stelle aus. Wechseln Sie im Code-Editor zur Datei default.js. Wählen Sie die erste Codezeile nach app.start() aus (Sie können nicht bis zu einem Kommentar oder einer Leerzeile ausführen). Wählen Sie im Kontextmenü Ausführen bis Cursor aus. Der Debugger setzt die Ausführung der "app.start"-Funktion fort und hält die Ausführung am Haltepunkt an.

Anzeigen der Variablendaten im Lokalfenster

Das Lokalfenster ist eine Strukturansicht der Parameter und Variablen der Bereichskette der aktuell ausgeführten Funktion.

Anzeigen der Variablendaten und der Prototypenkette eines Objekts

1. Fügen Sie der Modulfunktion ein Arrayobjekt hinzu. Bearbeiten Sie die module-Funktion, und ersetzen Sie die Zeile nach var callTrack = "module function" durch var myArray = new Array(1, 2, 3);.

   

2. Ausführen bis zum Haltepunkt. Starten Sie die Debugsitzung, indem Sie im Menü Debuggen die Option Debuggen starten auswählen (Tastatur: F5). Der Debugger unterbricht die Ausführung am Haltepunkt. Führen Sie einen Einzelschritt zu der Zeile durch.

3. Öffnen Sie das Lokalfenster. Zeigen Sie im Menü Debuggen auf Windows, und wählen Sie Lokale aus. (Tastatur: Alt+4).

4. Überprüfen Sie die lokalen Variablen in der Modulfunktion. Im Lokalfenster werden die Variablen der aktuell ausgeführten Funktion (der module-Funktion) als Knoten der obersten Strukturebene angezeigt. Wenn Sie eine Funktion eingeben, erstellt JavaScript alle Variablen und gibt diesen den Wert undefined. Funktionen, die in der Funktion definiert werden, verfügen über Text als Wert.

   

5. Durchlaufen Sie die Definitionen "callTrack" und "myArray". Suchen Sie die Variablen "callTrack" und "myArray" im Lokalfenster. Führen Sie einen Prozedurschritt (F10) für die beiden Definitionen durch, und beachten Sie, dass die Felder Wert und Typ geändert werden. Im Lokalfenster werden die Werte von Variablen hervorgehoben, die seit der letzten Unterbrechung geändert wurden.

6. Überprüfen Sie das Objekt "myArray". Erweitern Sie die myArray-Variable. Alle Elemente des Arrays werden aufgeführt. Der Knoten [prototype] mit der Vererbungshierarchie des Array-Objekts. Erweitern Sie diesen Knoten.

   

   • Im Knoten Methoden werden alle Methoden des Array-Objekts aufgeführt.

   • Der Knoten [prototype] enthält den Prototyp des Object-Objekts, von dem Array abgeleitet wird. [prototype]-Knoten können rekursiv sein. Die einzelnen übergeordneten Objekte einer Objekthierarchie werden im Knoten [prototype] des untergeordneten Elements beschrieben.

7. Beenden des Debuggens. Wählen Sie im Menü Debuggen die Option Debuggen beenden aus (Tastatur: UMSCHALT+F5). Dies beendet die Debugsitzung.

Überprüfen der Bereichskettendaten

Die Bereichskette einer Funktion enthält alle Variablen, die aktiv sind und von der Funktion erreicht werden können. Globale Variablen sind Teil der Bereichskette. Dies gilt auch für jegliche Objekte (einschließlich Funktionen), die in der Funktion definiert werden, mit der die derzeit ausgeführte Funktion definiert wird. Beispielsweise kann die in der module-Funktion von default.js definierte callTrack-Variable von allen Funktionen erreicht werden, die in der module-Funktion definiert sind. Die einzelnen Bereiche werden im Lokalfenster separat aufgeführt.

• Die Variablen der aktuell ausgeführten Funktion werden am oberen Fensterrand aufgeführt.

• Die Variablen der einzelnen Funktionsbereiche der Bereichskette werden in einem [Scope]-Knoten für die Funktion aufgeführt. Die Bereichsfunktionen werden in der Reihenfolge in der Kette beginnend mit der Funktion aufgeführt, die die aktuelle Funktion für die äußerste Funktion der Kette definiert.

• Im Knoten [Globals] werden die globalen Objekte aufgeführt, die außerhalb einer Funktion definiert werden.

Bereichsketten können verwirrend sein und können am besten anhand von Beispielen illustriert werden. Im folgenden Beispiel wird dargestellt, wie die module-Funktion ihren eigenen Bereich erstellt, und wie Sie eine andere Bereichsebene erstellen können, indem Sie einen Abschluss erstellen.

Beispiel 4

1. Rufen Sie die Funktion "example4" von der Modulfunktion auf. Bearbeiten Sie die module-Funktion, und ersetzen Sie die Zeile nach var callTrack = "module function" durch example4():

   

2. Ausführen bis zum Haltepunkt. Starten Sie die Debugsitzung, indem Sie im Menü Debuggen die Option Debuggen starten auswählen (Tastatur: F5). Der Debugger unterbricht die Ausführung am Haltepunkt.

3. Öffnen Sie das Lokalfenster. Zeigen Sie ggf. im Menü Debuggen auf Windows, und wählen Sie Lokale aus. (Tastatur: Alt+4). Beachten Sie, dass im Fenster alle Variablen aufgeführt und Funktionen der Funktion module sowie ein [Globals]-Knoten aufgeführt werden.

4. Überprüfen Sie die globalen Variablen. Erweitern Sie den Knoten [Globals]. Die Objekte und Variablen des globalen Bereichs wurden von der Windows-Bibliothek für JavaScript festgelegt. Sie können dem globalen Bereich eigene Variablen hinzufügen.

5. Führen Sie in "example4" einen Einzelschritt durch, und überprüfen Sie die lokale sowie die Bereichsvariable. Führen Sie einen Einzelschritt (Tastatur: F11) in die example4-Funktion durch. Da example4 in der module-Funktion definiert ist, wird die module-Funktion zum übergeordneten Bereich. example4 kann alle Funktionen der module-Funktion aufrufen und auf deren Variablen zugreifen. Erweitern Sie den Knoten [Scope] im Lokalfenster, und beachten Sie, dass dieser dieselben Variablen der module-Funktion enthält.

   

6. Führen Sie einen Einzelschritt in "example4_a" durch, und überprüfen Sie die lokale sowie die Bereichsvariable. Fahren Sie mit den Einzelschritten in example4 und in den Aufruf von example4_a fort. Beachten Sie, dass die lokalen Variablen nun von example4_a stammen, und dass der Knoten [Scope] weiterhin die Variablen der module-Funktion enthält. Obwohl die Variablen von example4 aktiv sind, können diese nicht von example4_a erreicht werden und sind nicht mehr Teil der Bereichskette.

7. Führen Sie einen Einzelschritt in "multipyByA" durch, und überprüfen Sie die lokale sowie die Bereichsvariablen. Durchlaufen Sie den Rest von example4_a und in die Zeile var x = multilpyByA(b);.

   Die Funktionsvariable multipyByA wurde auf die multiplyClosure-Funktion festgelegt wurde, die ein Abschluss ist. multipyClosure definiert und gibt die innere Funktion mulitplyXby zurück und erfasst (erschließt) deren Parameter und Variablen. Bei einem Abschluss verfügt die zurückgegebene innere Funktion über Zugriff auf die Daten der äußeren Funktion. Daher erstellt sie eine eigene Ebene des Bereichs.

   Wenn Sie einen Einzelschritt in var x = multilpyByA(b); durchführen, verschieben Sie die Zeile return a * b; in der inneren Funktion mulitplyXby.

8. Im Lokalfenster wird nur der Parameter b als lokale Variable in multiplyXby aufgeführt. Es wurde jedoch eine neue [Scope]-Ebene hinzugefügt. Wenn Sie diesen Knoten erweitern, erkennen Sie, dass dieser die Parameter, Funktionen und Variablen von multiplyClosure enthält, einschließlich der a-Variable, die in der ersten Zeile von multiplyXby aufgerufen wird. Bei einer schnellen Überprüfung des zweiten [Scope]-Knotens werden die Modulfunktionsvariablen angezeigt, auf die multiplyXby in der nächsten Zeile zugreift.

   

9. Beenden des Debuggens. Wählen Sie im Menü Debuggen die Option Debuggen beenden aus (Tastatur: UMSCHALT+F5). Dies beendet die Debugsitzung.

Navigieren zu Code mithilfe des Fensters "Aufrufliste"

Die Aufrufliste ist eine Datenstruktur, die Informationen über die Funktionen enthält, die im aktuellen Thread der Anwendung ausgeführt werden. Wenn Sie einen Haltepunkt erreicht haben, wird im Fenster "Aufrufliste" eine Liste aller Funktionen angezeigt, die für den Stapel aktiv sind. Die aktuell ausgeführte Funktion befindet sich am Anfang der Aufrufliste. Die Funktion, die den Thread initiiert, befindet sich am Ende der Liste. Die Funktionen dazwischen stellen den Aufrufpfad von der auslösenden Funktion zur aktuellen Funktion dar.

Zusätzlich zur Anzeige des Aufrufpfads der aktuell ausgeführten Funktion kann das Fenster "Aufrufliste" verwendet werden, um im Code-Editor zu Code zu navigieren. Diese Funktion kann nützlich sein, wenn Sie mit mehreren Dateien arbeiten und eine bestimmte Funktion schnell verschieben möchten.

Beispiel 5

In diesem Beispiel führen Sie einen Einzelschritt in einen Aufrufpfad mit fünf benutzerdefinierten Funktionen durch.

1. Rufen Sie in der Modulfunktion die Funktion "example5" auf. Bearbeiten Sie die module-Funktion, und ersetzen Sie die Zeile nach var callTrack = "module function"; durch die Zeile example5();.

   

2. Ausführen bis zum Haltepunkt. Starten Sie die Debugsitzung, indem Sie im Menü Debuggen die Option Debuggen starten auswählen (Tastatur: F5). Der Debugger unterbricht die Ausführung am Haltepunkt der Funktion "module".

3. Öffnen Sie das Fenster "Aufrufliste". Wählen Sie im Menü Debuggen die Option Windows und anschließend Aufrufliste aus (Tastatur: Alt+7). Beachten Sie, dass das Fenster Aufrufliste über zwei Funktionen verfügt:

   • Globaler Code ist der Einstiegspunkt der module-Funktion am Ende der Aufrufliste.

   • Anonyme Funktion zeigt die Zeile in der module-Funktion an, in der die Ausführung angehalten wird. Dies ist der Anfang der Aufrufliste.

4. Führen Sie einen Einzelschritt in die Funktionen durch, um die Funktion "example5_d" zu erreichen. Wählen Sie im Menü Debuggen die Option Einzelschritt aus (Tastatur: F11), um die Aufrufe im Aufrufpfad auszuführen, bis Sie den Einstiegspunkt der Funktion "example5_d" erreichen. Beachten Sie, dass bei jedem Funktionsaufruf für eine Funktion die Zeilennummer der aufrufenden Funktion gespeichert wird. Zudem wird die aufgerufene Funktion am Anfang des Stapels platziert. Die Zeilennummer der aufrufenden Funktion ist der Punkt, an dem die aufrufende Funktion die Ausführung angehalten hat. Ein gelber Pfeil weist auf die aktuell ausgeführte Funktion hin.

   

5. Navigieren Sie im Fenster "Aufrufliste" zum "example5_a"-Code, und legen Sie einen Haltepunkt fest. Wählen Sie im Fenster "Aufrufliste" das Listenelement example5_a und anschließend im Kontextmenü Zu Quelle wechseln aus. Der Cursor wird im Code-Editor an der Rückgabezeile der Funktion positioniert. Legen Sie in dieser Zeile einen Haltepunkt fest. Beachten Sie, dass die aktuelle Ausführungszeile nicht geändert wird. Nur der Editor-Cursor wird bewegt.

6. Führen Sie einen Einzelschritt in die Funktionen durch, und führen Sie dann bis zum Haltepunkt aus. Führen Sie weitere Einzelschritte in example5_d durch. Beachten Sie, dass die Funktion aus der Aufrufliste entfernt wird, wenn Sie aus dieser zurückkehren. Drücken Sie F5, um die Ausführung des Programms fortzusetzen. Sie halten an dem im vorherigen Schritt erstellten Haltepunkt an.

7. Beenden des Debuggens. Wählen Sie im Menü Debuggen die Option Debuggen beenden aus (Tastatur: UMSCHALT+F5). Dies beendet die Debugsitzung.

Siehe auch

Konzepte

Starten einer Debugsitzung (JavaScript)

Schnellstart: Debuggernavigation (JavaScript)

Schnellstart: Debuggen von Apps (JavaScript)

So können Sie Ereignisse in Windows Sore-Apps auslösen, anhalten, fortsetzen und im Hintergrund ausführen

Debuggen von Windows Store-Apps