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.

Konfigurieren des Debuggens

Für ESPROJ-Projekte in Visual Studio 2022 verwendet Visual Studio Code eine launch.json Datei zum Konfigurieren und Anpassen des Debuggers. launch.json ist eine Debuggerkonfigurationsdatei.

Visual Studio fügt den Debugger nur an Benutzercode an. Für .esproj-Projekte können Sie Benutzercode (auch als Just My Code-Einstellungen bezeichnet) in Visual Studio mithilfe der skipFiles Einstellung in launch.json konfigurieren. Dies funktioniert genauso wie die launch.json Einstellungen in VS Code. Weitere Informationen zu skipFiles und anderen Debuggerkonfigurationsoptionen finden Sie unter Überspringen von uninteressierenden Code - und Startkonfigurationsattributen.

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

  Wenn Sie Chrome-Entwicklertools oder F12-Tools für Microsoft Edge zum Debuggen von clientseitigem Skript verwenden möchten, sollten Sie diese Einstellung deaktivieren.

  Ausführlichere Informationen finden Sie in diesem Blogbeitrag 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 oder Chrome.

1. Schließen Sie alle Zielbrowserfenster, ganz gleich ob es sich um Microsoft Edge oder Chrome handelt.

   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- oder Edge-Instanzen zu ermitteln und zu beenden.)

   Um optimale Ergebnisse zu erzielen, beenden Sie alle Instanzen von Chrome, auch wenn Sie mit Microsoft Edge 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. Edge-Debug-Modus oder Chrome-Debug-Modus. Weitere Informationen finden Sie in den Versionshinweisen.

   

   Wählen Sie Durchsuchen aus, um Ihre App mit dem Browser im Debugmodus zu starten.

   Öffnen Sie alternativ den Befehl Ausführen, indem Sie in Windows auf die Schaltfläche Start klicken (klicken Sie mit der rechten Maustaste und wählen Sie Ausführenaus) und den folgenden Befehl eingeben:

   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. (Wenn Sie den Browser mit dem Befehl „Ausführen“ starten, müssen Sie für Ihre App-Instanz die richtige URL einfügen.)

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. Stellen Sie sicher, dass Ihre App im Browser im Debug-Modus ausgeführt wird, wie im vorherigen Abschnitt beschrieben.

   Wenn Sie eine Browserkonfiguration mit einem Anzeigenamen erstellt haben, wählen Sie diese als Debugziel aus, und drücken Sie dann die Taste STRG+F5 (Debuggen>Ohne Debuggen starten), um die App im Browser auszuführen.

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

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. Wählen Sie das Dialogfenster An den Prozess anhängen und wählen Sie anschließend JavaScript und TypeScript (Chrome Dev Tools/V8 Inspector) als Verbindungstyp aus.

   Das Debuggerziel, z. B. http://localhost:9222, sollte im Feld Verbindungsziel angezeigt werden.

5. Wählen Sie aus der Liste der Browserinstanzen den Browserprozess mit dem richtigen Hostport aus (in diesem Beispiel https://localhost:7184/), und wählen Sie Anfügen aus.

   Der Port (z. B. 7184) 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 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: '[absolute-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.

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

In Visual Studio 2022 können Sie Razor-Seiten mithilfe von Haltepunkten debuggen. Weitere Informationen finden Sie unter Verwenden von Debug-Tools in Visual Studio.

Zugehöriger Inhalt

Eigenschaften, React, Angular, Vue