Debuggen einer JavaScript- oder TypeScript-App in Visual Studio

Sie können mithilfe von Visual Studio JavaScript- und TypeScript-Code debuggen. Sie können Breakpoints festlegen, den Debugger anfügen, Variablen untersuchen, die Aufrufliste anzeigen und andere Debugfeatures verwenden.

Tipp

Wenn Sie Visual Studio noch nicht installiert haben, können Sie es auf der Seite Visual Studio-Downloads kostenlos herunterladen. Wenn Sie Node.js-Anwendungen entwickeln, müssen Sie die Node.js-Entwicklungsworkload mit Visual Studio installieren.

Debuggen von serverseitigen Skripts

1. Öffnen Sie zunächst Ihr Projekt in Visual Studio und anschließend eine serverseitige JavaScript-Datei (z. B. server.js). Klicken Sie dann auf den Bundsteg, um einen Breakpoint festzulegen:

   

   Haltepunkte sind eine einfache und wichtige Funktion zum zuverlässigen Debuggen. Ein Breakpoint gibt an, wo Visual Studio im ausgeführten Code angehalten werden soll. So können Sie einen Blick auf die Werte von Variablen oder das Arbeitsspeicherverhalten werfen oder überprüfen, ob ein Branch im Code ausgeführt wird.

2. Drücken Sie F5 (Debuggen>Debuggen starten), um die App auszuführen.

   Der Debugger hält an dem von Ihnen festgelegten Breakpoint an, und die IDE hebt die Anweisung gelb hervor. Jetzt können Sie den App-Status überprüfen, indem Sie auf die derzeitigen Variablen im Bereich zeigen. Verwenden Sie dafür Debuggerfenster wie Lokal und Überwachen.

   

3. Drücken Sie F5, um die App fortzusetzen.

4. Wenn Sie die Chrome-Entwicklertools verwenden möchten, drücken Sie in Chrome F12. Mit diesen Tools können Sie das DOM untersuchen oder über die JavaScript-Konsole mit der App interagieren.

Debuggen von clientseitigen Skripts

Visual Studio unterstützt das clientseitige Debuggen nur für Chrome und Microsoft Edge (Chromium). In einigen Szenarios hält der Debugger automatisch bei Breakpoints in JavaScript- und TypeScript-Code sowie in Skripts an, die in HTML-Dateien eingebettet sind.

• Wählen Sie zum Debuggen clientseitiger Skripts in ASP.NET Apps Extras>Optionen>Debugging und dann JavaScript-Debugging für ASP.NET (Chrome, Edge und IE) aktivieren aus.

  Ausführlichere Informationen finden Sie im Blogbeitrag Debug JavaScript in Microsoft Edge und diesem Beitrag zu Google Chrome. Informationen zum Debuggen von TypeScript in ASP.NET Core finden Sie unter Hinzufügen von TypeScript zu einer vorhandenen ASP.NET Core-App.

• Führen Sie für Node.js-Anwendungen und andere JavaScript-Projekte die hier beschriebenen Schritte aus.

Hinweis

Für ASP.NET und ASP.NET Core wird das Debuggen eingebetteter Skripts in CSHTML-Dateien nicht unterstützt. JavaScript-Code muss sich in separaten Dateien befinden, damit das Debuggen möglich ist.

Vorbereiten der App auf das Debuggen

Wenn Ihre Quelle verkleinert oder von einem Transpiler wie TypeScript oder Babel erstellt wird, sollten Quellzuordnungsdateien verwendet werden, um beim Debuggen die bestmöglichen Ergebnisse zu erzielen. Sie können den Debugger sogar an ein ausgeführtes clientseitiges Skript anfügen, ohne dass Quellzuordnungsdateien vorhanden sind. Es kann aber vorkommen, dass Sie Breakpoints nicht in der Quelldatei, sondern nur in der verkleinerten oder transpilierten Datei festlegen oder erreichen können. In einer Vue.js-App werden verkleinerte Skripts beispielsweise als Zeichenfolgen an eine eval-Anweisung übergeben, und Sie können den Code nur erfolgreich mithilfe des Visual Studio-Debuggers durchlaufen, wenn Sie Quellzuordnungsdateien verwenden. In komplexen Debuggingszenarien können Sie stattdessen auch auf die Chrome-Entwicklertools oder die F12-Tools in Microsoft Edge zurückgreifen.

Informationen zum Generieren von Quellzuordnungsdateien finden Sie unter Generieren von Quellzuordnungsdateien zum Debuggen.

Vorbereiten des Browsers auf das Debuggen

Verwenden Sie für dieses Szenario Microsoft Edge (Chromium) oder Chrome.

1. Schließen Sie alle Fenster des Zielbrowsers.

   Andere Browserinstanzen können das Öffnen des Browsers bei aktiviertem Debuggen verhindern. (Möglicherweise werden Browsererweiterungen ausgeführt, die den vollständigen Debugmodus unterbrechen. Wenn dies der Fall ist, müssen Sie den Task-Manager öffnen, um unerwartete Chrome-Instanzen zu ermitteln und zu beenden.)

   Um optimale Ergebnisse zu erzielen, beenden Sie alle Instanzen von Chrome, auch wenn Sie mit Microsoft Edge (Chromium) arbeiten. Beide Browser verwenden dieselbe Chromium-Codebasis.

2. Starten Sie Ihren Browser mit aktiviertem Debuggen.

   Ab Visual Studio 2019 können Sie das --remote-debugging-port=9222-Flag beim Start des Browsers festlegen, indem Sie in der Symbolleiste Debuggen die Option Browserauswahl> auswählen.

   

   Falls der Befehl Browserauswahl nicht in der Symbolleiste Debuggen angezeigt wird, wählen Sie einen anderen Browser aus, und versuchen Sie es dann nochmal.

   Wählen Sie im Dialogfeld „Browserauswahl“ die Option Hinzufügen aus, und legen Sie dann das Flag im Feld Argumente fest. Verwenden Sie einen anderen Anzeigenamen für den Browser, z. B. Microsoft Edge mit Debugging oder Chrome mit Debugging. Weitere Informationen finden Sie in den Versionshinweisen.

   

   Öffnen Sie alternativ über das Windows-Startmenü den Befehl Ausführen (klicken Sie mit der rechten Maustaste auf die Schaltfläche, und wählen Sie Ausführen aus), und geben Sie den folgenden Befehl ein:

   msedge --remote-debugging-port=9222

   -oder-

   chrome.exe --remote-debugging-port=9222

   Dadurch wird Ihr Browser mit aktiviertem Debuggen gestartet.

   Die App wird noch nicht ausgeführt, weshalb Ihnen eine leere Browserseite angezeigt wird.

Anfügen des Debuggers an clientseitiges Skript

Der Debugger benötigt Hilfe beim Identifizieren des richtigen Prozesses, um den Debugger von Visual Studio anzufügen und Breakpoints im clientseitigen Code erreichen zu können. Hier sehen Sie eine Möglichkeit, dies zu aktivieren.

1. Wechseln Sie zu Visual Studio, und legen Sie dann einen Breakpoint in Ihrem Quellcode fest, bei dem es sich um eine JavaScript-, TypeScript-, oder eine JSX-Datei handeln kann. (Legen Sie den Breakpoint in einer Codezeile fest, die Breakpoints zulässt, z. B. eine return-Anweisung oder eine var-Deklaration.)

   

   Verwenden Sie STRG+F (oder Bearbeiten>Suchen und Ersetzen>Schnellsuche), um den spezifischen Code in einer transpilierten Datei zu finden.

   Damit clientseitiger Code einen Breakpoint in einer TypeScript-, VUE- oder JSX-Datei erreichen kann, ist in der Regel die Verwendung von Quellzuordnungsdateien erforderlich. Eine Quellzuordnungsdatei muss für die Unterstützung des Debuggens in Visual Studio ordnungsgemäß konfiguriert sein.

2. Wählen Sie Ihren Zielbrowser in Visual Studio als Debugziel aus, und drücken Sie dann STRG+F5 (oder klicken Sie auf Debuggen>Starten ohne Debuggen), um die App im Browser auszuführen.

   Wenn Sie eine Browserkonfiguration mit einem Anzeigenamen erstellt haben, wählen Sie diesen als Debugziel aus. Die App wird daraufhin in einer neuen Registerkarte im Browser geöffnet.

3. Wählen Sie Debuggen>An den Prozess anhängen aus.

   Tipp

   Nachdem Sie mit diesen Schritten erstmalig eine Instanz an den Prozess angefügt haben, können Sie ab Visual Studio 2017 schnell erneut an diesen Prozess anfügen, indem Sie Debuggen>Erneut an Prozess anfügen auswählen.

4. Im Dialogfeld An Prozess anfügen finden Sie eine gefilterte Liste der Browserinstanzen, an die Sie anfügen können. Wählen Sie im Feld Anfügen an den entsprechenden Debugger für Ihren Zielbrowser aus, JavaScript (Chrome) oder JavaScript (Microsoft Edge (Chromium)), und geben Sie chrome oder edge in das Filterfeld ein, um die Suchergebnisse zu filtern.

5. Wählen Sie den Browserprozess mit dem richtigen Hostport aus (in diesem Beispiel localhost), und klicken Sie dann auf Anfügen.

   Der Port (z. B. 1337) kann auch im Feld Titel angezeigt werden, damit Sie die richtige Browserinstanz einfacher identifizieren können.

   Im folgenden Beispiel wird veranschaulicht, wie dies bei Verwendung von Microsoft Edge (Chromium) aussieht.

   

   Tipp

   Wenn der Debugger nicht angefügt wird, und die Meldung „Fehler beim Starten des Debugadapters.“ oder „Das Anfügen an den Prozess ist nicht möglich. Ein Vorgang ist für den derzeitigen Zustand unzulässig.“ angezeigt wird, verwenden Sie den Windows Task-Manager, um alle Instanzen des Zielbrowsers zu schließen, bevor Sie den Browser im Debugmodus starten. Möglicherweise werden Browsererweiterungen ausgeführt, die den vollständigen Debugmodus verhindern.

6. Da der Code mit dem Breakpoint möglicherweise bereits ausgeführt wurde, aktualisieren Sie die Browserseite. Ergreifen Sie bei Bedarf Maßnahmen, damit der Code mit dem Breakpoint ausgeführt wird.

   Während der Unterbrechung im Debugger können Sie den App-Status überprüfen, indem Sie mit dem Mauszeiger auf Variablen zeigen und Debuggerfenster verwenden. Sie können den Debugger durch Navigieren im Code nach vorne verschieben (F5, F10 und F11). Weitere Informationen zu grundlegenden Debugfeatures finden Sie unter Erster Einblick in den Debugger.

   Abhängig von Ihrem App-Typ und den zuvor ausgeführten Schritten sowie anderen Faktoren wie Ihrem Browserstatus erreichen Sie möglicherweise den Breakpoint entweder in einer transpilierten .js-Datei oder der Quelldatei. In beiden Fällen können Sie durch den Code navigieren und Variablen überprüfen.

   • Wenn Sie Code in einer TypeScript-, JSX- oder .vue-Quelldatei unterbrechen müssen und nicht dazu in der Lage sind, sollten Sie gemäß der Beschreibung im Abschnitt Problembehandlung sicherstellen, dass Ihre Umgebung ordnungsgemäß eingerichtet ist.

   • Wenn Sie Code in einer transpilierten JavaScript-Datei (z. B. app-bundle.js) unterbrechen müssen, dies jedoch nicht möglich ist, entfernen Sie die Quellzuordnungsdatei Dateiname.js.map.

Problembehandlung für Breakpoints und Quellzuordnungsdateien

Wenn Sie Code in einer TypeScript- oder JSX-Quelldatei unterbrechen müssen, aber dies nicht möglich ist, verwenden Sie An Prozess anfügen wie in den vorherigen Schritten beschrieben, um den Debugger anzufügen. Stellen Sie sicher, dass Ihre Umgebung ordnungsgemäß eingerichtet ist:

• Schließen Sie alle Browserinstanzen, einschließlich der Chrome-Erweiterungen (mithilfe des Task-Managers), damit Sie den Browser im Debugmodus ausführen können.

• Stellen Sie sicher, dass Sie den Browser im Debugmodus starten.

• Stellen Sie sicher, dass Ihre Quellzuordnungsdatei den relativen Pfad auf Ihre Quelldatei enthält und keine nicht unterstützten Präfixe wie webpack:/// enthält, was den Visual Studio-Debugger daran hindert, eine Quelldatei zu finden. Ein Verweis wie webpack:///.app.tsx sollte beispielsweise in ./app.tsx korrigiert werden. Diese Änderung können Sie manuell in der Quellzuordnungsdatei (was für Tests nützlich ist) oder über eine benutzerdefinierte Buildkonfiguration durchführen. Weitere Informationen finden Sie unter Generieren von Quellzuordnungen zum Debuggen.

Wenn Sie den Code in einer Quelldatei (z. B. in app.tsx) unterbrechen müssen und nicht in der Lage dazu sind, können Sie alternativ versuchen, die debugger;-Anweisung in der Quelldatei zu verwenden oder Breakpoints in den Chrome-Entwicklertools (oder in den F12-Tools für Microsoft Edge) festzulegen.

Generieren von Quellzuordnungen zum Debuggen

In Visual Studio sind Funktionen zum Verwenden und Generieren von Quellzuordnungen für JavaScript-Quelldateien verfügbar. Diese werden häufig benötigt, wenn eine Quelle verkleinert oder von einem Transpiler wie TypeScript oder Babel erstellt wird. Die verfügbaren Optionen sind vom Projekttyp abhängig.

• Ein TypeScript-Projekt in Visual Studio generiert die Quellzuordnungen standardmäßig. Weitere Informationen finden Sie unter Konfigurieren von Quellzuordnungsdateien mithilfe einer „tsconfig.json“-Datei.

• In einem JavaScript-Projekt können Sie Quellzuordnungen mithilfe eines Bundlers wie Webpack und einem Compiler wie dem TypeScript-Compiler (oder Babel) erstellen, die Sie zu Ihrem Projekt hinzufügen können. Für den TypeScript-Compiler müssen Sie außerdem eine tsconfig.json-Datei hinzufügen und die Compileroption sourceMap festlegen. Unter Create a Node.js app with React (Erstellen einer Node.js-App mit React) wird dieser Vorgang in einem Beispiel mit einer einfachen Webpack-Konfiguration erläutert.

Hinweis

Wenn Sie noch keine Erfahrung mit Quellzuordnungsdateien haben, lesen Sie Was sind Quellzuordnungsdateien?, bevor Sie fortfahren.

Verwenden Sie zum Konfigurieren von erweiterten Einstellungen für Quellzuordnungen entweder eine tsconfig.json-Datei oder die Projekteinstellungen in einem TypeScript-Projekt, aber nicht beides zusammen.

Sie müssen sicherstellen, dass die Verweise auf Ihre Quelldatei in der generierten Quellzuordnungsdatei richtig sind (dies muss gegebenenfalls getestet werden), um das Debuggen mit Visual Studio zu aktivieren. Wenn Sie beispielsweise Webpack verwenden, enthalten Verweise in der Quellzuordnungsdatei das Präfix webpack:///, das Visual Studio daran hindert, eine TypeScript- oder JSX-Quelldatei zu finden. Wenn Sie dies spezifisch zu Debugzwecken korrigieren, muss der Verweis auf die Quelldatei (z. B. app.tsx) von etwas wie webpack:///./app.tsx in etwas wie ./app.tsx geändert werden, was das Debuggen ermöglicht (der Pfad ist relativ zu Ihrer Quelldatei). Im folgenden Beispiel wird veranschaulicht, wie Sie Quellzuordnungsdateien in Webpack konfigurieren, damit sie in Visual Studio funktionieren. Dies ist einer der am häufigsten verwendeten Bundler.

Nur für Webpack: Wenn Sie den Breakpoint in einer TypeScript- oder JSX-Datei festlegen, (anstelle einer transpilierten JavaScript-Datei), müssen Sie Ihre Webpack-Konfiguration aktualisieren. Zum Beispiel müssen Sie in webpack-config.js möglicherweise den folgenden Code ersetzen:

  output: {
    filename: "./app-bundle.js", // This is an example of the filename in your project
  },

durch den folgenden:

  output: {
    filename: "./app-bundle.js", // Replace with the filename in your project
    devtoolModuleFilenameTemplate: '[resource-path]'  // Removes the webpack:/// prefix
  },

Dies ist eine reine Entwicklungseinstellung, die das Debuggen von clientseitigem Code in Visual Studio aktiviert.

In komplizierten Szenarios eignen sich manchmal die Browsertools (F12) am besten zum Debuggen, da sie keine Änderungen an benutzerdefinierten Präfixen erfordern.

Konfigurieren von Quellzuordnungen mithilfe einer „tsconfig.json“-Datei

Wenn Sie eine tsconfig.json-Datei zu Ihrem Projekt hinzufügen, behandelt Visual Studio den Verzeichnisstamm wie ein TypeScript-Projekt. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf Ihr Projekt, und klicken Sie dann auf Hinzufügen > Neues Element > TypeScript-JSON-Konfigurationsdatei, um die Datei hinzuzufügen. Dann wird eine der folgenden Datei ähnlichen tsconfig.json-Datei zu Ihrem Projekt hinzugefügt.

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

Compileroptionen für die „tsconfig.json“-Datei

• inlineSourceMap: Gibt eine einzelne Datei mit Quellzuordnungen aus, anstatt separate Quellzuordnungen für jede Quelldatei zu erstellen.
• inlineSources: Gibt die Quelle neben den Quellzuordnungen innerhalb einer einzelnen Datei aus. Dafür müssen die Optionen inlineSourceMap oder sourceMap festgelegt sein.
• mapRoot: Gibt anstelle des Standardspeicherorts den Speicherort an, an dem der Debugger die Quellzuordnungsdateien ( .map) finden sollte. Verwenden Sie dieses Flag, wenn die .map-Laufzeitdateien an einem anderen Ort als die .js-Dateien gespeichert werden müssen. Der angegebene Speicherort ist in die Quellzuordnung eingebettet, damit der Debugger zum Speicherort der .map-Dateien weitergeleitet wird.
• sourceMap: Generiert eine entsprechende .map-Datei.
• sourceRoot: Gibt anstelle der Quellspeicherorte den Speicherort an, an dem der Debugger die TypeScript-Dateien finden sollte. Verwenden Sie dieses Flag, wenn die Laufzeitquellen an einem anderen Ort als an dem Speicherort zur Entwurfszeit gespeichert werden müssen. Der angegebene Speicherort wird in die Quellzuordnung eingebettet, um den Debugger an den Ort weiterzuleiten, an dem sich die Quelldateien befinden.

Weitere Informationen zu Compileroptionen finden Sie auf der Seite Compiler Options (Compileroptionen) im TypeScript-Handbuch.

Konfigurieren von Quellzuordnungsdateien mithilfe von Projekteinstellungen (TypeScript-Projekt)

Sie können die Einstellungen für die Quellzuordnungen auch mithilfe von Projekteigenschaften konfigurieren, indem Sie erst mit der rechten Maustaste auf das Projekt und anschließend mit der linken auf Projekt > Eigenschaften > TypeScript-Build > Debuggen klicken.

Es sind die folgenden Projekteinstellungen verfügbar:

• Quellzuordnungen generieren (entspricht der Option sourceMap in tsconfig.json-Dateien): Generiert die entsprechende .map-Datei.
• Stammverzeichnis von Quellzuordnungen angeben (entspricht der Option mapRoot in tsconfig.json-Dateien): Gibt anstelle der generierten Speicherorte den Speicherort an, an dem der Debugger die MAP-Dateien finden sollte. Verwenden Sie dieses Flag, wenn die .map-Laufzeitdateien an einem anderen Ort als die .js-Dateien gespeichert werden müssen. Der angegebene Speicherort wird in die Quellzuordnung eingebettet, um den Debugger an den Ort weiterzuleiten, an dem sich die MAP-Dateien befinden.
• Stammverzeichnis von TypeScript-Dateien angeben (entspricht der Option sourceRoot in tsconfig.json-Dateien): Gibt anstelle von Quellspeicherorten den Speicherort an, an dem der Debugger die TypeScript-Dateien finden sollte. Verwenden Sie dieses Flag, wenn die Quelldateien zur Laufzeit an einem anderen Ort als zur Entwurfszeit gespeichert werden müssen. Der angegebene Speicherort wird in die Quellzuordnung eingebettet, um den Debugger an den Ort weiterzuleiten, an dem sich die Quelldateien befinden.

Debuggen von JavaScript in dynamischen Dateien mithilfe von Razor (ASP.NET)

Ab Visual Studio 2019 wird das Debuggen nur für Chrome und Microsoft Edge (Chromium) unterstützt.

Jedoch können Breakpoints in Dateien, die mit einer Razor-Syntax erstellt wurden (CSHTML, VBHTML), nicht automatisch erreicht werden. Sie haben zwei Möglichkeiten, diese Art von Datei zu debuggen:

• Fügen Sie die debugger;-Anweisung an der Stelle ein, an der Sie den Code unterbrechen möchten: Dadurch wird die Ausführung des dynamischen Skripts angehalten und der Debugvorgang sofort während der Erstellung gestartet.

• Laden Sie die Seite, und öffnen Sie das dynamische Dokument in Visual Studio: Sie müssen die dynamische Datei während des Debuggens öffnen, einen Breakpoint festlegen und anschließend die Seite aktualisieren, damit diese Methode funktioniert. Je nachdem, ob Sie Chrome oder Microsoft Edge (Chromium) verwenden, finden Sie die Datei wie folgt:

  • Für Chrome: Navigieren Sie zu Projektmappen-Explorer > Skriptdokumente > IhrSeitenname.

    Hinweis

    Wenn Sie Google Chrome verwenden, wird Ihnen möglicherweise die Meldung „no source is available between <script> tags“ (Keine verfügbare Quelle zwischen -Tags) angezeigt. Das ist kein Grund zur Sorge, Sie können das Debuggen einfach fortsetzen.

  • Verwenden Sie für Microsoft Edge (Chromium) dieselbe Vorgehensweise wie für Chrome.

Weitere Informationen finden Sie unter Client-side debugging of ASP.NET projects in Google Chrome (Clientseitiges Debuggen von ASP.NET-Projekten in Google Chrome).

Zugehöriger Inhalt

Eigenschaften, React, Angular, Vue