Debuggen einer JavaScript- oder TypeScript-App in Visual Studio

Sie können JavaScript- und TypeScript-Code mit Visual Studio debuggen. Sie können Haltepunkte erreichen, an den Debugger anhängen, Variablen prüfen, den Aufrufstapel anzeigen und andere Debugging-Funktionen verwenden.

Tipp

Wenn Sie Visual Studio noch nicht installiert haben, wechseln Sie zur Visual Studio-Downloads Seite, um es kostenlos zu installieren.

Debuggen konfigurieren

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 den Benutzercode (auch als Just My Code-Einstellungen bezeichnet) in Visual Studio mithilfe der einstellung skipFiles in launch.jsonkonfigurieren. Dies funktioniert genauso wie die launch.json Einstellungen in VS Code. Weitere Informationen zu skipFiles und anderen Debuggerkonfigurationsoptionen finden Sie unter Überspringen von uninteressantem Code und Startkonfigurationsattribute.

Debuggen eines 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 Haltepunkt gibt an, wo Visual Studio den ausgeführten Code anhalten soll, sodass Sie die Werte von Variablen oder das Verhalten des Arbeitsspeichers betrachten können oder ob eine Verzweigung des Codes ausgeführt wird.

2. Um Ihre App auszuführen, drücken Sie F5 (Debuggen>Debuggenstarten).

   Der Debugger hält am festgelegten Haltepunkt an (IDE hebt die Anweisung im gelben Hintergrund hervor). Jetzt können Sie den Zustand Ihrer App prüfen, indem Sie mit dem Mauszeiger auf Variablen zeigen, die sich derzeit im Geltungsbereich befinden, mithilfe von Debuggerfenstern wie die "Locals"- und die "Watch"--Fenster.

   

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

4. Wenn Sie die Chrome-Entwicklertools verwenden möchten, drücken Sie F12- im Chrome-Browser. Mithilfe dieser Tools können Sie das DOM untersuchen oder mit der App mithilfe der JavaScript-Konsole interagieren.

Debuggen eines clientseitigen Skripts

Visual Studio bietet nur clientseitige Debuggingunterstützung für Chrome und Microsoft Edge. In einigen Szenarien trifft der Debugger automatisch Haltepunkte in JavaScript- und TypeScript-Code und eingebetteten Skripts in HTML-Dateien.

• Zum Debuggen von clientseitigen Skripts in ASP.NET Apps wählen Sie Tools>Optionen>Debugging-aus, und wählen Sie dann JavaScript-Debugging für ASP.NET (Chrome, Edge und IE)aktivieren.

  Wenn Sie Chrome Developer Tools 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 für 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 in diesem Artikel beschriebenen Schritte aus.

Anmerkung

Das Debuggen von eingebetteten Skripten in CSHTML- Dateien wird für ASP.NET und ASP.NET Core nicht unterstützt. JavaScript-Code muss sich in separaten Dateien befinden, um das Debuggen zu aktivieren.

Vorbereiten der App für das Debuggen

Wenn Ihre Quelle von einem Transpiler wie TypeScript oder Babel minimiert oder erstellt wird, verwenden Sie Quellzuordnungen, um die beste Debugerfahrung zu erzielen. Sie können den Debugger sogar an ein ausgeführtes clientseitiges Skript anfügen, ohne dass Quellzuordnungen 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. Beispielsweise wird das minimierte Skript in einer Vue.js-App als Zeichenfolge an eine eval-Anweisung übergeben, und es gibt keine Möglichkeit, diesen Code effektiv mithilfe des Visual Studio-Debuggers zu durchlaufen, es sei denn, Sie verwenden Quellzuordnungen. Bei komplexen Debuggingszenarien sollten Sie stattdessen Chrome-Entwicklertools oder F12-Tools für Microsoft Edge verwenden.

Hilfe zum Generieren von Quellzuordnungen finden Sie unter Generieren von Quellzuordnungen zum Debuggen.

Vorbereiten des Browsers für das Debuggen

Verwenden Sie für dieses Szenario entweder Microsoft Edge oder Chrome.

1. Schließen Sie alle Fenster für den Zielbrowser, entweder Microsoft Edge- oder Chrome-Instanzen.

   Andere Browserinstanzen können verhindern, dass der Browser mit aktivierter Debugging-Funktion geöffnet wird. (Browsererweiterungen könnten ausgeführt werden und den vollständigen Debugmodus abfangen und beeinträchtigen, daher müssen Sie möglicherweise den Task-Manager öffnen, um unerwartete Instanzen von Chrome oder Edge zu finden und zu schließen.)

   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 aktivierter Debugging-Funktion.

   Ab Visual Studio 2019 können Sie das --remote-debugging-port=9222-Kennzeichen beim Starten des Browsers festlegen, indem Sie Durchsuchen mit...> auf der Symbolleiste Debuggen 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 „Durchsuchen mit“ 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-Debugmodus oder Chrome-Debugmodus. Weitere Informationen finden Sie in den Versionshinweisen.

   

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

   Öffnen Sie alternativ den Befehl Ausführen über die Schaltfläche "Start " von Windows (klicken Sie mit der rechten Maustaste, 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 aktivierter Debugging-Funktion gestartet.

   Die App wird noch nicht ausgeführt, sodass Sie eine leere Browserseite erhalten. (Wenn Sie den Browser mit dem Befehl "Ausführen" starten, müssen Sie die richtige URL für Ihre App-Instanz einfügen.)

Anfügen des Debuggers an clientseitige Skripts

Um den Debugger von Visual Studio anzuhängen und Haltepunkte im klientseitigen Code zu erreichen, benötigt Visual Studio Unterstützung bei der Identifizierung des richtigen Prozesses. Hier ist eine Möglichkeit, sie zu aktivieren.

1. Stellen Sie sicher, dass Ihre App im Browser im Debugmodus ausgeführt wird, wie im vorherigen Abschnitt beschrieben.

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

2. Wechseln Sie zu Visual Studio, und legen Sie dann einen Haltepunkt in Ihrem Quellcode fest, bei dem es sich um eine JavaScript-Datei, TypeScript-Datei oder eine JSX-Datei handeln kann. (Legen Sie den Haltepunkt in einer Codezeile fest, die Haltepunkte zulässt, z. B. eine Rückgabe-Anweisung oder eine Var-Deklaration.)

   

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

   Damit clientseitiger Code einen Breakpoint in einer TypeScript-, VUE- oder JSX-Datei erreichen kann, ist in der Regel die Verwendung von Quellzuordnungen erforderlich. Eine Quellzuordnung muss ordnungsgemäß konfiguriert werden, um das Debuggen in Visual Studio zu unterstützen.

3. Wählen Sie Debuggen>An den Prozess anfügen aus.

   Tipp

   Nachdem Sie den Debugger mit diesen Schritten erstmalig an den Prozess angefügt haben, können Sie ihn 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 im Dialogfeld An Prozess anfügen die Option JavaScript und TypeScript (Chrome Dev Tools/V8 Inspector) als Verbindungstypaus.

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

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

   Der Port (z. B. 7184) kann auch im Feld Titel angezeigt werden, damit Sie die richtige Browserinstanz auswählen können.

   Das folgende Beispiel zeigt, wie dies im Microsoft Edge-Browser 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 im aktuellen Zustand nicht zulässig.", verwenden Sie den Windows-Task-Manager, um alle Instanzen des Zielbrowsers zu schließen, bevor Sie den Browser im Debugmodus starten. Browsererweiterungen werden möglicherweise ausgeführt und verhindern den vollständigen Debugmodus.

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 Sie im Debugger angehalten sind, können Sie den App-Zustand untersuchen, indem Sie mit dem Mauszeiger auf Variablen zeigen und Debuggerfenster verwenden. Sie können den Debugger voranbringen, indem Sie Code durchlaufen (F5, F10und F11). Weitere Informationen zu grundlegenden Debugfeatures finden Sie unter Sehen Sie sich zuerst den Debuggeran.

   Je nach den Schritten für den App-Typ, die Sie zuvor befolgt haben, und anderen Faktoren wie Ihrem Browserzustand, können Sie den Breakpoint in einer transpilierten .js-Datei oder Quelldatei erreichen. Auf beide Weise können Sie Code durchlaufen und Variablen untersuchen.

   • Wenn Sie Code in einer TypeScript-, JSX- oder .vue-Quelldatei debuggen möchten und nicht in der Lage sind, dies zu tun, stellen Sie sicher, dass Ihre Umgebung ordnungsgemäß eingerichtet ist, wie im Abschnitt Fehlerbehebung beschrieben.

   • Wenn Sie den Code in einer transpilierten JavaScript-Datei (z. B. app-bundle.js) debuggen möchten und dazu nicht in der Lage sind, entfernen Sie die Source-Map-Datei filename.js.map.

Problembehandlung bei Breakpoints und Quellzuordnungen

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

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

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

• Stellen Sie sicher, dass die Quellzuordnungsdatei den richtigen relativen Pfad zu Ihrer Quelldatei enthält und keine nicht unterstützten Präfixe wie webpack:///enthält, wodurch verhindert wird, dass der Visual Studio-Debugger eine Quelldatei findet. Ein Verweis wie webpack:///.app.tsx kann z. B. in ./app.tsxkorrigiert werden. Sie können dies manuell in der Quellzuordnungsdatei (die für Tests hilfreich ist) oder über eine benutzerdefinierte Buildkonfiguration ausführen. Weitere Informationen finden Sie unter Generieren von Quellzuordnungen zum Debuggen.

Wenn Sie in den Code einer Quelldatei eintreten müssen (z. B. app.tsx) und dies nicht tun können, versuchen Sie stattdessen, die Anweisung debugger; in der Quelldatei zu verwenden oder Breakpoints in den Chrome Developer Tools (oder F12-Tools für Microsoft Edge) festzulegen.

Generieren von Quellzuordnungen für das Debuggen

Visual Studio verfügt über die Möglichkeit, Quellzuordnungen in JavaScript-Quelldateien zu verwenden und zu generieren. Dies ist häufig erforderlich, wenn Ihre Quelle von einem Transpiler wie TypeScript oder Babel minimiert oder erstellt wird. Die verfügbaren Optionen hängen vom Projekttyp ab.

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

• In einem JavaScript-Projekt können Sie Quellzuordnungen mit einem Bundler wie Webpack und einem Compiler wie dem TypeScript-Compiler (oder Babel) generieren, den Sie Ihrem Projekt hinzufügen können. Für den TypeScript-Compiler müssen Sie auch eine tsconfig.json Datei hinzufügen und die sourceMap Compileroption festlegen. Ein Beispiel für die Verwendung einer einfachen Webpack-Konfiguration finden Sie unter Erstellen einer Node.js App mit React.

Anmerkung

Wenn Sie neu bei Quellkarten sind, lesen Sie Was sind Quellkarten?, bevor Sie fortfahren.

Verwenden Sie zur Konfiguration fortgeschrittener Einstellungen entweder eine tsconfig.json oder die Projekteinstellungen in einem TypeScript-Projekt für Source Maps, aber nicht beides.

Um das Debuggen mit Visual Studio zu aktivieren, müssen Sie sicherstellen, dass die Verweise auf die Quelldatei in der generierten Quellzuordnung korrekt sind (dies erfordert möglicherweise Tests). Wenn Sie beispielsweise Webpack verwenden, enthalten Verweise in der Quellzuordnungsdatei das präfix webpack:///, wodurch Visual Studio daran hindert, eine TypeScript- oder JSX-Quelldatei zu finden. Wenn Sie dies für Debuggingzwecke korrigieren, muss der Verweis auf die Quelldatei (z. B. app.tsx) von etwa webpack:///./app.tsx in etwa ./app.tsxgeändert werden, was das Debuggen ermöglicht (der Pfad ist relativ zur Quelldatei). Das folgende Beispiel zeigt, wie Sie Quellzuordnungen in Webpack konfigurieren können, die eines der am häufigsten verwendeten Bundler sind, damit sie mit Visual Studio arbeiten.

(nur Webpack) Wenn Sie den Haltepunkt in einem TypeScript der JSX-Datei (anstelle einer transpilierten JavaScript-Datei) festlegen, müssen Sie ihre Webpack-Konfiguration aktualisieren. In webpack-config.jsmüssen Sie beispielsweise 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 Nur-Entwicklungseinstellung, um das Debuggen von clientseitigem Code in Visual Studio zu aktivieren.

Bei komplizierten Szenarien funktionieren die Browsertools (F12) manchmal am besten für das Debuggen, da sie keine Änderungen an benutzerdefinierten Präfixen erfordern.

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

Wenn Sie Ihrem Projekt eine tsconfig.json Datei hinzufügen, behandelt Visual Studio den Verzeichnisstamm als 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. Eine tsconfig.json Datei wie die folgende wird Ihrem Projekt hinzugefügt.

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

Compileroptionen für tsconfig.json Datei

• inlineSourceMap-: Erzeugen Sie eine einzelne Datei mit Quellkarten, anstatt für jede Quelldatei eine separate Quellkarte zu erstellen.
• inlineSources: Geben Sie die Quelle zusammen mit den Quellzuordnungen in einer einzelnen Datei aus. Dazu muss 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 Kennzeichen, wenn sich die Laufzeitdateien .map Dateien an einem anderen Speicherort befinden müssen als die .js Dateien. Der angegebene Speicherort ist in der Source-Map eingebettet, damit der Debugger die .map-Dateien finden kann.
• sourceMap: Generiert eine zugehörige .map-Datei.
• sourceRoot-: Gibt den Speicherort an, an dem der Debugger TypeScript-Dateien anstelle der Quellspeicherorte finden soll. Verwenden Sie dieses Flag, wenn die Laufzeitquellen an einem anderen Ort als an dem Speicherort zur Entwurfszeit gespeichert werden müssen. Der angegebene Speicherort ist in die Quellzuordnung eingebettet, um den Debugger an die Stelle zu leiten, an der sich die Quelldateien befinden.

Weitere Informationen zu den Compileroptionen finden Sie auf der Seite Compileroptionen im TypeScript-Handbuch.

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

In Visual Studio 2022 können Sie Razor Pages-Seiten mithilfe von Breakpoints debuggen. Weitere Informationen finden Sie unter Verwenden von Debuggingtools in Visual Studio.

Verwandte Inhalte

Eigenschaften, React, Angular, Vue