ist jetzt verfügbar! Lesen Sie über die neuen Funktionen und Fehlerbehebungen vom November.

Browser-Debugging in VS Code

Visual Studio Code enthält einen integrierten Debugger für Edge und Chrome. Es gibt verschiedene Möglichkeiten, damit zu beginnen.

Wir bieten auch detailliertere Anleitungen für den Einstieg in React, Angular und Vue sowie weitere Debugging-Rezepte.

Befehl "Link öffnen"

Der einfachste Weg, eine Webseite zu debuggen, ist der Befehl Debuggen: Link öffnen im Befehlspalettt (⇧⌘P (Windows, Linux Ctrl+Shift+P)). Wenn Sie diesen Befehl ausführen, werden Sie nach einer zu öffnenden URL gefragt und der Debugger wird angehängt.

Using the Open Link command to attach to a URL

Wenn Ihr Standardbrowser Edge ist, wird VS Code ihn zum Öffnen der Seite verwenden. Andernfalls wird versucht, eine Chrome-Installation auf Ihrem System zu finden.

Startkonfiguration

Startkonfigurationen sind der traditionelle Weg, das Debugging in VS Code einzurichten, und bieten Ihnen die größte Flexibilität für die Ausführung komplexer Anwendungen.

In diesem Abschnitt gehen wir detaillierter auf Konfigurationen und Funktionen für fortgeschrittenere Debugging-Szenarien ein. Anweisungen zum Überspringen externen Codes in Node.js gelten auch für browserbasiertes Debugging.

Hinweis: Wenn Sie gerade erst mit VS Code beginnen, können Sie sich in der Debugging-Thematik über allgemeine Debugging-Funktionen und die Erstellung von launch.json-Konfigurationsdateien informieren.

Browser starten

In den meisten Fällen möchten Sie eine neue Instanz des Browsers starten, um Ihre Webseite oder Datei zu debuggen. Dazu können Sie eine Datei namens .vscode/launch.json erstellen, die wie folgt aussieht

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch my cool app",
      "url": "https://:8000"
    }
  ]
}

Wenn Sie F5 oder die Schaltfläche Start in der Ansicht Ausführen und Debuggen drücken, wird https://:8000 im Debug-Modus geöffnet. Wenn Sie Chrome anstelle von Edge verwenden möchten, ersetzen Sie msedge durch chrome.

Sie können auch eine einzelne Datei debuggen, ohne einen Server auszuführen, zum Beispiel

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch hello.html",
      "file": "${workspaceFolder}/hello.html"
    }
  ]
}

An den Browser anhängen

Um sich an einen laufenden Browser anzuhängen, muss dieser in einem speziellen Debug-Modus gestartet werden. Dies können Sie mit dem folgenden Befehl tun, wobei Sie edge.exe durch den Pfad zu Ihrer Edge- oder Chrome-Binärdatei ersetzen

edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile

Das Setzen von --remote-debugging-port weist den Browser an, auf diesem Port auf eine Debug-Verbindung zu warten. Das Setzen eines separaten --user-data-dir erzwingt das Öffnen einer neuen Instanz des Browsers; wenn dieses Flag nicht angegeben ist, öffnet der Befehl ein neues Fenster eines beliebigen laufenden Browsers und wechselt nicht in den Debug-Modus.

Fügen Sie als Nächstes einen neuen Abschnitt zur Datei vscode/launch.json wie unten gezeigt hinzu

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "attach",
      "name": "Attach to browser",
      "port": 9222
    }
  ]
}

Nun können Sie F5 oder die Schaltfläche Start in der Ansicht Ausführen und Debuggen drücken, um sich an den laufenden Browser anzuhängen. Sie können sogar eine Eigenschaft address hinzufügen, um einen Browser auf einer anderen Maschine zu debuggen.

Attribute der Startkonfiguration

Debugging-Konfigurationen werden in einer Datei launch.json im Ordner .vscode Ihres Arbeitsbereichs gespeichert. Eine Einführung in die Erstellung und Verwendung von Debugging-Konfigurationsdateien finden Sie im allgemeinen Debugging-Artikel. Sie können entweder einen Browser mit Ihrer Anwendung "starten" oder sich an einen vorhandenen Browser "anhängen", den Sie im Debug-Modus gestartet haben.

Nachfolgend finden Sie eine Referenz der gängigen launch.json-Attribute, die spezifisch für das Browser-Debugging sind. Die vollständige Liste der Optionen finden Sie in der Dokumentation der vscode-js-debug-Optionen.

  • webRoot – Das Stammverzeichnis für Ihren Quellcode. Meistens und standardmäßig ist webRoot Ihr Arbeitsbereichsordner. Diese Option wird für die Auflösung von Source Maps verwendet.
  • outFiles – Ein Array von Glob-Mustern zum Auffinden generierter JavaScript-Dateien. Siehe den Abschnitt Source Maps.
  • smartStep – Versucht, automatisch Quellcode zu überspringen, der nicht zu Quellcodedateien passt. Siehe den Abschnitt Smart Stepping.
  • skipFiles – Überspringt automatisch Dateien, die von diesen Glob-Mustern abgedeckt werden. Siehe den Abschnitt Uninteressanten Code überspringen.
  • trace – Aktiviert Diagnoseausgaben.

Diese Attribute sind nur für Startkonfigurationen vom Anfragetyp launch verfügbar

  • url – Die URL, die beim Starten des Browsers automatisch geöffnet werden soll.
  • runtimeExecutable – Entweder ein absoluter Pfad zur zu verwendenden Browser-Executable oder die zu verwendende Version des Browsers. Gültige Versionen sind stable (Standard), canary, beta und dev.
  • runtimeArgs – Optionale Argumente, die beim Starten des Browsers übergeben werden.

Diese Attribute sind nur für Startkonfigurationen vom Anfragetyp attach verfügbar

  • url – Wenn angegeben, hängt sich VS Code an einen Tab mit dieser URL an. Wenn nicht angegeben, hängt es sich an alle Browser-Tabs an.
  • port – Port, der für das Remote-Debugging des Browsers verwendet werden soll und dem --remote-debugging-port entspricht, der beim Starten des Browsers verwendet wird. Siehe den Abschnitt An den Browser anhängen.
  • address – IP-Adresse oder Hostname, auf dem der debuggte Browser lauscht. Siehe den Abschnitt An den Browser anhängen.

WebAssembly-Debugging

WebAssembly-Debugging in Browsern ist identisch mit Node.js. Lesen Sie hier mehr über WebAssembly-Debugging.

Source Maps

Der JavaScript-Debugger in VS Code unterstützt Source Maps, die das Debuggen von transformiertem Code ermöglichen. TypeScript-Code wird beispielsweise zu JavaScript kompiliert, und viele Webanwendungen bündeln alle ihre JavaScript-Dateien. Die Source Map hilft dem Debugger zu ermitteln, wie der ursprüngliche Code und der im Browser laufende Code zugeordnet werden.

Die meisten modernen Tools zum Erstellen von Webanwendungen funktionieren sofort. Wenn nicht, enthält unser Abschnitt über Source Maps in Node.js Anleitungen, die auch für das Browser-Debugging gelten.

Source Maps laden

Jede JavaScript-Datei kann eine Source Map über eine URL oder einen relativen Pfad referenzieren. Bei Webanwendungen möchten Sie sicherstellen, dass die URL für den in VS Code laufenden Debugger zugänglich ist. Wenn nicht, sehen Sie Fehler in der Debug-Konsole, die erklären, welche Source Maps nicht geladen werden konnten und warum.

Wenn VS Code direkt nicht darauf zugreifen kann, versucht es, den Netzwerkstack des Browsers zu verwenden, um die Source Map anzufordern. Dies gibt die Möglichkeit, dass Authentifizierungsstatus oder Netzwerkeinstellungen im Browser auf die Anfrage angewendet werden. Wenn Ihre Source Maps beispielsweise an einem Ort liegen, der durch Cookie-Authentifizierung geschützt ist, kann VS Code diese nur laden, wenn die Browsersitzung die erforderlichen Cookies enthält.

Nächste Schritte

  • Debugging – Informationen zu allgemeinen VS Code-Debugging-Funktionen.
  • Debugging-Rezepte – Richten Sie das Debugging für Ihre bevorzugte Plattform ein.
12/10/2025
© . This site is unofficial and not affiliated with Microsoft.