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.

Tip

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

Tip

Wenn Sie Visual Studio noch nicht installiert haben, wechseln Sie zur Visual Studio-Downloads Seite, um es kostenlos zu installieren. Wenn Sie Node.js Anwendungen entwickeln, müssen Sie die Node.js Entwicklungsarbeitsauslastung mit Visual Studio 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 über skipFiles und andere Debugger-Konfigurationsoptionen finden Sie unter Uninteressanten Code überspringen und Konfigurationsattribute löschen.

Debuggen eines serverseitigen Skripts

Ö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.
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.
Drücken Sie F5-, um die App fortzusetzen.
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.

Öffnen Sie zum Debuggen eines clientseitigen Skripts in ASP.NET Apps den Bereich "Extras>optionen ", und erweitern Sie den Abschnitt "Alle Einstellungen>debuggen>allgemein ". Wählen Sie die Option "JavaScript-Debugging aktivieren" für ASP.NET (Chrome und Edge) aus.

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.

Zum Debuggen eines clientseitigen Skripts in ASP.NET-Apps öffnen Sie das Dialogfeld "Toolsoptionen>", und erweitern Sie den Abschnitt "Debugging>". Wählen Sie die Option "JavaScript-Debugging für ASP.NET aktivieren" (Chrome, Edge und IE) und dann "OK" aus.

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ür .esproj-Projekte in Visual Studio 2022 können Sie clientseitige Skripte mit Standarddebuggingmethoden debuggen, um Haltepunkte zu erreichen. Um das Debuggen zu konfigurieren, können Sie launch.json Einstellungen ändern, die mit VS Code identisch funktionieren. Weitere Informationen zu Debuggerkonfigurationsoptionen finden Sie unter Startkonfigurationsattribute.

Führen Sie für Node.js Anwendungen und andere JavaScript-Projekte die in diesem Artikel beschriebenen Schritte aus.

Note

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, 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 Quellzuordnungsdateien vorhanden sind. Möglicherweise können Sie jedoch nur haltepunkte in der minimierten oder transpilierten Datei und nicht in der Quelldatei festlegen und treffen. 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 Developer Tools oder F12 Tools für Microsoft Edge verwenden.

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

Manuelles Konfigurieren des Browsers für das Debuggen

In Visual Studio 2022 ist das in diesem Abschnitt beschriebene Verfahren nur in ASP.NET und ASP.NET Core-Anwendungen verfügbar. Es ist nur in ungewöhnlichen Szenarien erforderlich, in denen Sie Browsereinstellungen anpassen müssen. In .esproj-Projekten ist der Browser standardmäßig für das Debuggen konfiguriert.

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

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önnen ausgeführt werden und dabei den vollständigen Debugmodus abfangen. Daher müssen Sie möglicherweise den Task-Manager öffnen, um unvorhergesehene Instanzen von Chrome oder Edge zu suchen 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.
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 „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 ü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

or,

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

In einigen Szenarien müssen Sie den Debugger möglicherweise an eine ausgeführte App anfügen.

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.

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.
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 Quellzuordnungsdateien erforderlich. Eine Quellzuordnung muss ordnungsgemäß konfiguriert werden, um das Debuggen in Visual Studio zu unterstützen.
Wählen Sie Debuggen>An den Prozess anhängen aus.

Tip

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.
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.
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 auswählen können.

Das folgende Beispiel zeigt, wie dies im Microsoft Edge-Browser aussieht.

Tip

Wenn der Debugger nicht angehängt wird und die Meldung "Fehler bei der Initialisierung des Debugadapters" oder "Der Prozess konnte nicht verbunden werden" angezeigt wird. 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.
Der Code mit dem Haltepunkt wurde möglicherweise bereits ausgeführt, laden Sie Ihre Browserseite neu. 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.

Sie können den Haltepunkt entweder in einer transpilierten .js Datei oder Quelldatei treffen, je nach Anwendungstyp, welche Schritte Sie zuvor befolgt haben, und anderen Faktoren wie dem Zustand Ihres Browsers. Auf beide Weise können Sie Code durchlaufen und Variablen untersuchen.
- Wenn Sie in den Code einer TypeScript-, JSX- oder .vue-Quelldatei springen müssen und dies nicht möglich ist, stellen Sie sicher, dass Ihre Umgebung ordnungsgemäß eingerichtet ist, wie im Abschnitt " Source Maps " der VS Code-Dokumentation 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.

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.
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 Quellzuordnungsdateien erforderlich. Eine Quellzuordnung muss ordnungsgemäß konfiguriert werden, um das Debuggen in Visual Studio zu unterstützen.
Wählen Sie Debuggen>An den Prozess anhängen aus.

Tip

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.
Im Dialogfeld An Prozess anfügen finden Sie eine gefilterte Liste der Browserinstanzen, an die Sie anfügen können. Wählen Sie für Ihren Zielbrowser den entsprechenden Debugger aus, JavaScript (Chrome) oder JavaScript (Microsoft Edge - Chromium). Navigieren Sie hierzu zum Feld Anfügen an und geben Sie im Filterfeld chrome oder edge ein, um die Suchergebnisse zu filtern.
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 auswählen können.

Das folgende Beispiel zeigt, wie dies im Microsoft Edge-Browser aussieht.

Tip

Wenn sich der Debugger nicht anhängt und die Meldung "Fehler beim Start des Debug-Adapters" oder "An den Prozess kann nicht angehängt werden" angezeigt wird. 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.
Es könnte sein, dass der Code mit dem Haltepunkt bereits ausgeführt wurde. Bitte aktualisieren Sie Ihre 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.

Sie könnten den Haltepunkt entweder in einer transpilierten .js Datei oder der Quelldatei treffen, abhängig von Ihrem App-Typ, den Schritten, die Sie zuvor befolgt haben, und anderen Faktoren wie dem Status Ihres Browsers. 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 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 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.

Note

Wenn Sie noch nicht mit Quellenzuordnungen arbeiten, 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 Code ersetzen:

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

Konfigurieren Sie Source Maps über die Projekteinstellungen (TypeScript-Projekt)

Für Projekte, die mit dem in Visual Studio enthaltenen TypeScript SDK erstellt wurden, können Sie die Quellzuordnungseinstellungen über die Projekteigenschaften konfigurieren, indem Sie mit der rechten Maustaste auf das Projekt klicken und dann Project > Eigenschaften > TypeScript Build > Debuggingauswählen.

Diese Projekteinstellungen sind verfügbar.

Quellzuordnungen generieren (entspricht der Option sourceMap in tsconfig.json-Dateien): Generiert die entsprechende .map-Datei.
Geben Sie das Stammverzeichnis der Source Maps an (entspricht mapRoot in tsconfig.json): Gibt den Speicherort an, an dem der Debugger Kartendateien anstelle der generierten Speicherorte finden soll. 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 die Quellkarte eingebettet, um den Debugger zu der Stelle zu leiten, an der sich die Kartendateien befinden.
Angeben des Stammverzeichnisses von TypeScript-Dateien (entspricht sourceRoot- in tsconfig.json): Gibt den Speicherort an, an dem der Debugger TypeScript-Dateien anstelle von Quellspeicherorten finden soll. Verwenden Sie dieses Kennzeichen, wenn sich die Laufzeitquelldateien an einem anderen Speicherort befinden müssen als der Speicherort zur Entwurfszeit. Der angegebene Speicherort ist in die Quellzuordnung eingebettet, um den Debugger an die Stelle zu leiten, an der sich die Quelldateien befinden.

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

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

Ab Visual Studio 2019 bietet Visual Studio nur Debuggingunterstützung für Chrome und Microsoft Edge.

Jedoch können Breakpoints in Dateien, die mit einer Razor-Syntax erstellt wurden (CSHTML, VBHTML), nicht automatisch erreicht werden. Es gibt zwei Ansätze, mit denen Sie diese Art von Datei debuggen können:

Platzieren Sie die debugger;-Anweisung an der Stelle, an der Sieunterbrechen möchten: Diese Anweisung bewirkt, dass das dynamische Skript die Ausführung beendet und das Debuggen während der Erstellung sofort startet.
Laden Sie die Seite, und öffnen Sie das dynamische Dokument in Visual Studio: Sie müssen die dynamische Datei beim Debuggen öffnen, ihren Haltepunkt festlegen und die Seite aktualisieren, damit diese Methode funktioniert. Je nachdem, ob Sie Chrome oder Microsoft Edge verwenden, finden Sie die Datei mit einer der folgenden Strategien:
- Für Chrome: Navigieren Sie zu Projektmappen-Explorer > Skriptdokumente > IhrSeitenname.
  
  Note
  
  Wenn Sie Google Chrome verwenden, wird Ihnen möglicherweise die Meldung „no source is available between <script> tags“ (Keine verfügbare Quelle zwischen skript-Tags) angezeigt. Es ist ok, fahren Sie einfach mit dem Debuggen fort.
- Verwenden Sie für Microsoft Edge dasselbe Verfahren wie Chrome.

Weitere Informationen finden Sie unter clientseitiges Debuggen von ASP.NET Projekten in Google Chrome.

Eigenschaften, React, Angular, Vue

Feedback

War diese Seite hilfreich?

Last updated on 2025-11-19