Windows-Apps
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern
Informationen
Das angeforderte Thema wird unten angezeigt. Es ist jedoch nicht in dieser Bibliothek vorhanden.

Steuern der Ausführung einer Store-App in einer Visual Studio-Debugsitzung für Windows Store-Apps (JavaScript)

Visual Studio 2015
 

Veröffentlicht: Juli 2016

Die neueste Dokumentation zu Visual Studio 2017 finden Sie unter Dokumentation zu Visual Studio 2017.

In diesem Schnellstart wird veranschaulicht, wie Sie im Visual Studio-Debugger navigieren und den Programmstatus in einer Sitzung anzeigen.

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. Die Funktionen im Beispielcode sollen nur die in diesem Thema beschriebenen Debugverfahren veranschaulichen. Best Practices zum Entwerfen von Apps oder Funktionen werden dabei nicht berücksichtigt. Tatsächlich werden Sie rasch feststellen, dass die Funktionen und die App selbst nicht besonders viele Aufgaben erfüllen.

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. Außerdem ist es nicht nötig, eine Beispiel-App zu erstellen. Wir empfehlen es allerdings und haben den Vorgang so einfach wie nur möglich gestaltet.

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

System_CAPS_ICON_note.jpg Hinweis

Das Modulmuster.

Windows Store-Apps verwenden häufig das JavaScript-Modulmuster, um Daten und Funktionen auf einer Seite zu kapseln. Das Modulmuster verwendet einen einzelnen selbstausführenden und anonymen Abschluss, um die Funktionen der Seite vom globalen Namespace zu trennen. Im Rahmen dieses Themas bezeichnen wir diese Funktion als Modul.

Sie lernen Folgendes:

Erstellen der Beispiel-App

Festlegen eines Haltepunkts und Ausführen bis zu diesem Haltepunkt, Durchlaufen einer Funktion in Einzelschritten und Untersuchen von Programmdaten

Einzel- und Prozedurschritte für Funktionen

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

Anzeigen von Variablendaten im Fenster "Lokal"

Navigieren zum Code über das Fenster "Aufrufliste"

Beim Debuggen geht es um den Code. Daher wird für die Beispiel-App das Framework der Windows Store-App nur zum Erstellen einer Quelldatei verwendet, 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 keine Steuerelemente hinzugefügt und keine Ereignisse behandelt.

  1. Erstellen Sie eine leere Windows Store-App mit JavaScript. Öffnen Sie Visual Studio. Wählen Sie auf der Homepage den Link Neues Projekt. Wählen Sie im Dialogfeld Neues Projekt in der Liste Installiert die Option JavaScript und dann Windows Store aus. Wählen Sie dann in der Liste der Projektvorlagen Leere Anwendung aus. Visual Studio erstellt eine neue Projektmappe und ein neues Projekt und zeigt die Datei "default.htm" im Code-Editor an.

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

    • Die Dateien base.js und ui.js erstellen die Windows-Bibliothek für JavaScript. Bei der Windows-Bibliothek für JavaScript handelt es sich um einen Satz von JavaScript- und CSS-Dateien, die das Erstellen von Windows Store-Apps mit JavaScript vereinfachen. Sie verwenden sie zusammen mit HTML, CSS und Windows-Runtime zum Erstellen Ihrer App.

    • Ihr Code beginnt in der Datei default.js .

  2. Öffnen Sie die „default.js“-Quelldatei. Ö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 aus der Datei default.js. Folgen Sie diesem Link: Beispielcode für die Navigation im Debugger (JavaScript), und kopieren Sie anschließend den im Abschnitt JavaScript aufgelisteten Code in die Zwischenablage. (Wählen Sie im Browser oder in der Hilfeansicht Zurück aus, um zu dieser Schnellstartseite zurückzukehren.) Fügen Sie den Code im Visual Studio-Editor in die jetzt 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.

Die gängigste Methode zum Starten einer Debugsitzung besteht darin, im Menü Debuggen die Option Debuggen starten auszuwählen (Tastatur: F5). Die App wird gestartet und so lange ausgeführt, bis ein Haltepunkt erreicht wird, bis Sie sie manuell anhalten, bis eine Ausnahme auftritt, oder bis die App 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 die Variable bewegen.

Nachdem Sie die Ausführung der App angehalten haben (was auch als Debuggerunterbrechung bezeichnet wird), steuern Sie die Ausführung des übrigen Programmcodes. Sie können sie zeilenweise fortsetzen und dabei von einem Funktionsaufruf zur Funktion selbst wechseln, oder Sie können eine aufgerufene Funktion in einem einzigen Schritt ausführen. Diese Prozeduren werden als Durchlaufen der App in Einzelschritten bezeichnet. Sie können zudem die Standardausführung der App fortsetzen und bis zum nächsten festgelegten Haltepunkt oder der Codezeile ausführen, in der sich der Cursor befindet. 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 einen Haltepunkt im Hauptteil der module-Funktion in default.js fest, wenn die erste unserer Benutzeranweisungen aufgerufen wird. Anschließend durchlaufen Sie die Funktion in Einzelschritten, zeigen Variablenwerte in den Debuggerdatentipps an und beenden anschließend das Debuggen.

  1. Festlegen eines Haltepunkts. Legen Sie einen Haltepunkt bei der Anweisung callTrack = "module function"; fest, die direkt nach dem Aufruf von app.start() erfolgt. 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).

    Haltepunkt bei Example1 festlegen

    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.

    Bis Haltepunkt ausführen

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

  3. Durchlaufen der Funktion in Einzelschritten. Wählen Sie im Menü Debuggen die Option Einzelschritt aus (Tastatur: F11).

    Zu Codezeile wechseln

    Beachten Sie, dass der Debugger zur nächsten Zeile wechselt, einem Aufruf der Funktion example1. Wählen Sie erneut Einzelschritt. Der Debugger wechselt zur ersten Codezeile der Funktion example1. Die hervorgehobene Zeile wurde nicht ausgeführt, aber die Funktion wurde in die Aufrufliste geladen, und der Speicher für lokale Variablen wurde zugewiesen.

  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 Ihrer Projektmappe handelt, wechselt der Debugger zur ersten 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 Ausstiegspunkt erreicht haben. Der Debugger hebt die schließende geschweifte Klammer der Funktion hervor.

  5. Anzeigen der Variablenwerte in den Datentipps. Fahren Sie mit den Einzelschritten der Anweisungen von example1 fort, bis Sie den Ausstiegspunkt erreicht haben. Der Debugger hebt die schließende geschweifte Klammer der Funktion hervor. Wenn Sie die Maus auf einen Variablennamen bewegen, werden der Name und der Wert der Variablen in einem Datentipp angezeigt.

    Variablenwerte im Datentipp anzeigen

  6. Hinzufügen einer Überwachung für die "callTrack"-Variable. Die callTrack-Variable wird in diesem Schnellstart verwendet, um die in den Beispielen aufgerufenen Funktionen anzuzeigen. Um die Anzeige des Variablenwerts zu vereinfachen, fügen Sie sie einem Überwachungsfenster hinzu. Wählen Sie den Variablennamen im Editor aus, und wählen Sie dann im Kontextmenü Überwachung hinzufügen.

    Variable überwachen

    In einem Überwachungsfenster können mehrere Variablen überwacht werden. Genau wie die Werte in Datentippfenstern werden die Werte der überwachten Variablen aktualisiert, sobald die Ausführung angehalten wird. Die überwachten Variablen werden über Debugsitzungen hinweg gespeichert.

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

Im Gegensatz zu einem Einzelschritt in eine Funktion, die von einer übergeordneten Funktion aufgerufen wird, wird bei einem Prozedurschritt die untergeordnete Funktion ausgeführt und die Ausführung anschließend in der aufrufenden Funktion angehalten, wenn die übergeordnete Funktion fortgesetzt wird. Sie können für eine Funktion einen Prozedurschritt ausführen, wenn Sie mit der Funktionsweise der Funktion vertraut und sicher sind, dass deren 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.

Beim Ausführen von einer untergeordneten Funktion aus wird die Ausführung der Funktion fortgesetzt und dann angehalten, wenn die Funktion zu ihrer aufrufenden Funktion zurückkehrt. 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.

Einzelschritt, Prozedurschritt und aus Methoden

Beispiel 2

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

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

    Example2-Funktion aufrufen

  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 in "example2" und "example2_A". Drücken Sie F11, um einen Einzelschritt für die example2-Funktion durchzuführen Durchlaufen Sie die example2-Anweisungen weiterhin in Einzelschritten, bis Sie die Zeile var x = example2_a(); erreichen. Führen Sie erneut für diese Zeile einen Einzelschritt durch, um zum Einstiegspunkt von example2_a zu gelangen. Durchlaufen Sie die einzelnen Anweisungen von example2_a in Einzelschritten, bis Sie zu example2 zurückkehren.

    Funktion – Prozedurschritt

  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 Fortsetzung von example2 zu diesem zweiten Aufruf von example2_a zu wechseln. Beachten Sie, dass die Zeichenfolge callTrack auf eine zweimalige Ausführung der example2_a-Funktion hinweist.

  6. Prozedurschritt aus einer Funktion. Drücken Sie F11, um einen Einzelschritt für die example2_b-Funktion durchzuführen Beachten Sie, dass example2_b sich kaum von example2_a unterscheidet. Um einen Prozedurschritt aus der Funktion durchzuführen, wählen Sie im Menü Debuggen die Option Prozedurschritt 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 fortgesetzt wird.

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

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 eine Schleife in einer Funktion in Einzelschritten 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 Datentipp- oder sonstigen Datenfensters 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. Aufrufen der Funktion "example3" in der Modulfunktion. Bearbeiten Sie die module-Funktion, und ersetzen Sie die Zeile nach var callTrack = "module function"; durch die Zeile example3();.

    Example3 aufrufen

  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 hält die Ausführung am Haltepunkt in der module-Funktion an.

  3. Einzelschritt in die Funktion "example3". Wählen Sie im Menü Debuggen die Option Einzelschritt aus (Tastatur: F11), um zum Einstiegspunkt der Funktion example3 zu wechseln. Durchlaufen Sie die Funktion in Einzelschritten, bis Sie eine 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ü die Option 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. Iteration der for-Schleife überprüfen. Sie erkennen das Symbol eines bedingten Haltepunkts am weißen Kreuz.

    Symbol "Bedingter Haltepunkt"

  5. Ausführen bis zum Haltepunkt. Wählen Sie im Menü Debuggen die Option Weiter aus (Tastatur: F5). Halten Sie den Mauszeiger auf i, um sicherzustellen, dass der aktuelle Wert von i 500 lautet. Beachten Sie, dass die Variable s als einzelne Zeile dargestellt wird, die weit über das Datentippfenster hinausgeht.

  6. Visualisieren einer Zeichenfolgenvariablen. Klicken Sie in der Spalte Wert von s auf das Lupensymbol.

    Das Text-Schnellansichtsfenster wird angezeigt, in dem der Wert der Zeichenfolge als mehrzeilige Zeichenfolge dargestellt wird.

    Text-Schnellansicht debuggen

  7. Ausführen bis zum Cursor. Klicken Sie mit der rechten Maustaste auf die Zeile callTrack += "->example3";, und wählen Sie dann im Kontextmenü Ausführen bis Cursor (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 (Tastatur: UMSCHALT+F5). Damit wird die Debugsitzung beendet.

Verwenden von "Ausführen bis Cursor" zum Zurückkehren zum Code und zum Löschen eines Haltepunkts.

Die Ausführung bis zum Cursor kann sehr nützlich sein, wenn Sie Bibliothekscode von Microsoft oder einem Drittanbieter in Einzelschritten durchlaufen. Das Durchlaufen von Bibliothekscode kann sehr informativ sein, jedoch oft auch sehr lange dauern. In der Regel sind Sie wesentlich mehr an Ihrem eigenen Code interessiert. Diese Übung zeigt Ihnen, wie es geht.

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

  2. Ausführen bis zum Haltepunkt und Durchlaufen der Bibliotheksfunktion in Einzelschritten.

    Wenn Sie app.start() in Einzelschritten durchlaufen, wird der Code in base.js im Editor angezeigt. Führen Sie einige weitere Einzelschritte durch.

  3. Prozedurschritte für und aus Funktionen. Wenn Sie Prozedurschritte für (F10) und aus (UMSCHALT+F11) Code in base.js durchführen, gelangen Sie möglicherweise zu dem Schluss, dass Sie die Komplexität und die Länge der Startfunktion eigentlich nicht untersuchen möchten.

  4. Festlegen des Cursors auf Ihren Code und Ausführen bis zum Cursor. Wechseln Sie im Code-Editor zurück zur Datei default.js. Wählen Sie die erste Zeile des Codes nach app.start(). (Die Ausführung bis zu einem Kommentar oder einer leeren Zeile ist nicht möglich.) Wählen Sie im Kontextmenü Ausführen bis Cursor. Der Debugger setzt die Ausführung der app.start-Funktion fort und hält sie beim Haltepunkt an.

Das Fenster "Lokal" ist eine Strukturansicht der Parameter und Variablen in der Bereichskette der aktuell ausgeführten Funktion.

Anzeigen der Variablendaten und der Prototypenkette eines Objekts

  1. Hinzufügen eines Arrayobjekts zur Modulfunktion. Bearbeiten Sie die module-Funktion, und ersetzen Sie die Zeile nach var callTrack = "module function" durch var myArray = new Array(1, 2, 3);.

    myArray-Definition

  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 in die Zeile durch.

  3. Öffnen Sie das Fenster "Lokal". Zeigen Sie im Menü Debuggen auf Fenster, und wählen Sie Lokale aus. (Tastatur: ALT+4).

  4. Überprüfen der lokalen Variablen in der Modulfunktion Das Fenster "Lokal" zeigt die Variablen der aktuell ausgeführten Funktion (der module-Funktion) als Knoten der obersten Ebene der Struktur an. Wenn Sie eine Funktion eingeben, erstellt JavaScript alle Variablen und weist ihnen den Wert undefined zu. Bei den in der Funktion definierten Funktionen entspricht der Wert ihrem Text.

    Lokalfenster

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

  6. Untersuchen des MyArray-Objekts Erweitern Sie die myArray-Variable. Jedes Element des Arrays wird im Knoten [Prototyp] aufgeführt, der die Vererbungshierarchie des Array-Objekts enthält. Erweitern Sie diesen Knoten.

    Prototypkette im Lokalfenster

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

    • Der Knoten [Prototyp] enthält den Prototyp des Object-Objekts, aus dem Array abgeleitet wird.[Prototyp]-Knoten können rekursiv sein. Jedes übergeordnete Objekt in einer Objekthierarchie wird im [Prototyp]-Knoten des untergeordneten Elements beschrieben.

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

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, ebenso wie alle Objekte (einschließlich Funktionen), die in der Funktion definiert werden, die wiederum die derzeit ausgeführte Funktion definiert. Beispielsweise ist die callTrack-Variable, die in der module-Funktion von default.js definiert ist, von jeder Funktion erreichbar, die in der module-Funktion definiert ist. Jeder Bereich wird im Fenster "Lokal" separat aufgeführt.

  • Die Variablen der aktuell ausgeführten Funktion werden im oberen Fensterbereich aufgeführt.

  • Die Variablen für die einzelnen Funktionsbereiche in der Bereichskette werden unter einem Knoten [Bereich] für die Funktion aufgeführt. Die Bereichsfunktionen werden nach ihrer Reihenfolge in der Kette aufgelistet, von der Funktion, die die aktuelle Funktion definiert, bis hin zur äußersten Funktion in der Kette.

  • Der Knoten [Global] enthält die globalen Objekte, die unabhängig von den Funktionen definiert werden.

Bereichsketten können verwirrend sein und lassen sich am besten anhand eines Beispiels erläutern. Im folgenden Beispiel sehen Sie, wie die module-Funktion einen eigenen Bereich erstellt und wie Sie eine weitere Bereichsebene durch das Erstellen eines Abschlusses erstellen können.

Beispiel 4

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

    Example4 aufrufen

  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 Fenster "Lokal". Zeigen Sie ggf. im Menü Debuggen auf Fenster, und wählen Sie dann Lokal (Tastatur: ALT+4). Beachten Sie, dass im Fenster alle Variablen und Funktionen der module-Funktion aufgelistet werden und dass auch ein Knoten [Global] angezeigt wird.

  4. Überprüfen der globalen Variablen. Erweitern Sie den Knoten [Global]. Die Objekte und Variablen unter "Global" wurden von der Windows-Bibliothek für JavaScript festgelegt. Sie können dem globalen Bereich Ihre eigenen Variablen hinzufügen.

  5. Durchlaufen von "example4" in Einzelschritten und Untersuchen der lokalen und der Bereichsvariablen Durchlaufen Sie die example4-Funktion in Einzelschritten (Tastatur: F11). Da example4 in der module-Funktion definiert ist, wird die module-Funktion zum übergeordneten Bereich.example4 kann jede der Funktionen in der module-Funktion aufrufen und auf ihre Variablen zugreifen. Erweitern Sie den Knoten [Bereich] im Fenster "Lokal", und beachten Sie, dass er dieselben Variablen der module-Funktion enthält.

    Bereiche der Example4-Methode

  6. Durchlaufen von "example4_a" in Einzelschritten und Untersuchen der lokalen und der Bereichsvariablen Durchlaufen Sie example4 und den Aufruf von example4_a weiterhin in Einzelschritten. Beachten Sie, dass die lokalen Variablen jetzt von example4_a stammen und dass der Knoten [Bereich] weiterhin die Variablen der module-Funktion enthält. Obwohl die Variablen von example4 aktiv sind, können sie von example4_a nicht erreicht werden und sind nicht mehr Bestandteil der Bereichskette.

  7. Durchlaufen von "multipyByA" in Einzelschritten und Untersuchen der lokalen und der Bereichsvariablen Durchlaufen Sie den Rest von example4_a in Einzelschritten bis zur Zeile var x = multilpyByA(b);.

    Die Funktionsvariable multipyByA wurde auf die multiplyClosure-Funktion festgelegt, bei der es sich um einen Abschluss handelt.multipyClosure definiert und gibt eine innere Funktion zurück (mulitplyXby). Außerdem werden ihr Parameter und ihre Variable erfasst (geschlossen). In einem Abschluss kann die zurückgegebene innere Funktion auf die Daten der äußeren Funktion zugreifen und so eine eigene Bereichsebene erstellen.

    Wenn Sie var x = multilpyByA(b); in Einzelschritten durchlaufen, gelangen Sie zur Zeile return a * b; in der inneren Funktion mulitplyXby.

  8. Im Fenster "Lokal" wird nur der b-Parameter als lokale Variable in multiplyXby aufgeführt, es wurde jedoch eine neue [Bereich]-Ebene hinzugefügt. Beim Erweitern dieses Knotens sehen Sie, dass diese die Parameter, Funktionen und Variablen von multiplyClosure umfasst, einschließlich der a-Variable, die in der ersten Zeile von multiplyXby aufgerufen wurde. Eine schnelle Überprüfung des zweiten [Bereich]-Knotens zeigt die Variablen der Modulfunktion, auf die multiplyXby in der nächsten Zeile zugreift.

    Bereiche eines Schließvorgangs im Lokalfenster

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

Die Aufrufliste ist eine Datenstruktur, die Informationen zu den Funktionen enthält, die im aktuellen Thread der Anwendung ausgeführt werden. Wenn ein Haltepunkt erreicht wird, zeigt das Fenster "Aufrufliste" eine Liste aller Funktionen an, die in der Liste aktiv sind. Die aktuell ausgeführte Funktion wird am Anfang der Liste im Fenster "Aufrufliste" aufgeführt. Die Funktion, die den Thread initiiert, befindet sich am Ende der Liste. Die Funktionen dazwischen zeigen den Aufrufpfad der initiierenden Funktion bis hin zur aktuellen Funktion.

Neben der Anzeige des Aufrufpfads bis hin zur derzeit ausgeführten Funktion dient das Fenster "Aufrufliste" auch zum Navigieren zu Code im Code-Editor. Diese Funktionalität kann nützlich sein, wenn Sie mit mehreren Dateien arbeiten und schnell zu einer bestimmten Funktion gelangen möchten.

Beispiel 5

In diesem Beispiel durchlaufen Sie einen Aufrufpfad in Einzelschritten, der fünf benutzerdefinierte Funktionen enthält.

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

    Example5 aufrufen

  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 hält die Ausführung am Haltepunkt in der Modulfunktion an.

  3. Öffnen des Fensters "Aufrufliste". Wählen Sie im Menü Debuggen die Option Fenster, und wählen Sie dann Aufrufliste (Tastatur: ALT+7). Beachten Sie, dass im Fenster "Aufrufliste" zwei Funktionen angezeigt werden:

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

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

  4. Durchlaufen von Funktionen in Einzelschritten zum Erreichen der Funktion "example5_d". Wählen Sie im Menü Debuggen die Option Einzelschritt (Tastatur: F11), um die Aufrufe im Aufrufpfad auszuführen, bis Sie den Einstiegspunkt der example5_d-Funktion erreicht haben. Beachten Sie, dass die Zeilennummer der aufrufenden Funktion bei jedem Aufruf einer Funktion gespeichert wird und dass die aufgerufene Funktion an den Anfang der Liste platziert wird. Die Zeilennummer der aufrufenden Funktion ist der Punkt, an dem die aufrufende Funktion die Ausführung angehalten hat. Ein gelber Pfeil zeigt auf die gerade ausgeführte Funktion.

    Fenster „Aufrufliste“

  5. Verwenden des Fensters "Aufrufliste" zum Navigieren zum Code von "example5_a" und Festlegen eines Haltepunkts. Wählen Sie im Fenster "Aufrufliste" das Element example5_a aus, und wählen Sie dann im Kontextmenü die Option Gehe zu Quellcode. Der Code-Editor setzt den Cursor auf die Rückgabezeile der Funktion. Legen Sie einen Haltepunkt in dieser Zeile fest. Beachten Sie, dass die aktuelle Ausführungszeile nicht geändert wird. Nur der Editor-Cursor wurde verschoben.

  6. Durchlaufen von Funktionen in Einzelschritten und dann Ausführen bis zum Haltepunkt. Durchlaufen Sie example5_d weiterhin in Einzelschritten. Beachten Sie, dass die Funktion aus der Aufrufliste entfernt wird, wenn Sie von der Funktion zurückkehren. Drücken Sie F5, um die Ausführung des Programms fortzusetzen. Sie beenden die Ausführung am Haltepunkt, den Sie im vorherigen Schritt erstellt haben.

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

Starten einer Debugsitzung (JavaScript)
Quickstart: Debugger navigation (JavaScript)
Schnellstart: Debuggen von HTML und CSS
Auslösen von Anhalte-, Fortsetzungs- und Hintergrundereignissen für Windows Store
Debuggen von Apps in Visual Studio

Anzeigen:
© 2017 Microsoft