Debugging wie ein Profi mit den integrierten Tools von VS Code

Jeder JavaScript-Entwickler beginnt mit console.log(). Es ist schnell, es funktioniert und es ist vertraut. Aber wenn Sie einen Bug durch mehrere Funktionsaufrufe, asynchrone Operationen oder komplexe Zustandsänderungen verfolgen, wird Console-Logging zu einem Katz-und-Maus-Spiel. Sie übersäen Ihren Code mit Log-Anweisungen, bauen ständig neu und verpassen trotzdem das Gesamtbild.

Der integrierte Debugger von VS Code ändert das. Anstatt zu raten, was Ihr Code tut, können Sie die Ausführung pausieren, Variablen an jedem beliebigen Punkt inspizieren, Funktionen Zeile für Zeile durchgehen und genau verstehen, wie sich Ihre Anwendung verhält. Dieser Artikel zeigt Ihnen, wie Sie diese leistungsstarken Tools für JavaScript-, TypeScript-, React- und Node.js-Debugging nutzen können – und stundenlange Frustration in Minuten fokussierter Problemlösung verwandeln.

Einrichten von VS Code Debugging für JavaScript und TypeScript

Erstellen Ihrer launch.json-Konfiguration

Das Herzstück des VS Code Debuggings ist die launch.json-Datei. Drücken Sie F5 in einem beliebigen JavaScript-Projekt, und VS Code fordert Sie auf, eine solche zu erstellen. Hier ist eine grundlegende Konfiguration für das Debugging von JavaScript in VS Code:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Current File",
      "program": "${file}",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Für TypeScript fügen Sie Source-Map-Unterstützung zu Ihrer Konfiguration hinzu:

{
  "type": "node",
  "request": "launch",
  "name": "Debug TypeScript",
  "program": "${file}",
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "sourceMaps": true,
  "skipFiles": ["<node_internals>/**"]
}

Wesentliche Debugging-Steuerelemente

Sobald konfiguriert, wird das Debugging unkompliziert:

• Setzen Sie Breakpoints, indem Sie links neben eine beliebige Zeilennummer klicken (oder drücken Sie F9)
• Starten Sie das Debugging mit F5
• Step Over über Code mit F10 (aktuelle Zeile ausführen)
• Step Into in Funktionen mit F11 (in Funktionsaufrufe eintauchen)
• Step Out mit Shift+F11 (aktuelle Funktion abschließen)

Das Variables-Panel zeigt alle lokalen und globalen Variablen im Gültigkeitsbereich. Das Watch-Panel ermöglicht es Ihnen, bestimmte Ausdrücke zu verfolgen. Der Call Stack zeigt Ihren Ausführungspfad – unverzichtbar, um zu verstehen, wie Sie einen bestimmten Punkt erreicht haben.

Erweiterte Breakpoint-Techniken

Bedingte Breakpoints

Klicken Sie mit der rechten Maustaste auf einen beliebigen Breakpoint und wählen Sie „Edit Breakpoint”, um Bedingungen hinzuzufügen. Der Debugger pausiert nur, wenn Ihre Bedingung als wahr ausgewertet wird:

// Breakpoint-Bedingung: user.role === 'admin'
// Stoppt nur für Admin-Benutzer

Logpoints: Das bessere Console.log

Logpoints geben Ausgaben in der Debug-Konsole aus, ohne die Ausführung zu stoppen. Klicken Sie mit der rechten Maustaste in den Rand und wählen Sie „Add Logpoint”. Verwenden Sie geschweifte Klammern für Ausdrücke:

User {user.name} triggered action at {new Date().toISOString()}

Kein Entfernen von console.logs mehr vor dem Commit – Logpoints existieren nur während Ihrer Debug-Sitzung.

React-Debugging mit Browser-Integration

Einrichten von Browser-Debugging für React

Für React-Apps verwenden Sie den integrierten JavaScript Debugger von VS Code (die Debugger for Chrome-Erweiterung ist mittlerweile veraltet). Konfigurieren Sie ihn für React-Apps, die Vite oder Create React App verwenden:

{
  "type": "pwa-chrome",
  "request": "launch",
  "name": "Debug React App",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/src",
  "sourceMaps": true
}

Starten Sie Ihren Dev-Server (npm start), dann drücken Sie F5. VS Code startet Chrome und verbindet den Debugger. Setzen Sie Breakpoints direkt in Ihren React-Komponenten, inspizieren Sie Props und State und gehen Sie Renders durch – alles aus VS Code heraus.

Debugging von React-Komponenten-State

Platzieren Sie Breakpoints innerhalb von useEffect-Hooks, Event-Handlern oder Komponentenfunktionen. Das Variables-Panel zeigt aktuelle Props, State-Werte und Hook-Abhängigkeiten. Verwenden Sie die Debug-Konsole, um Ausdrücke gegen den aktuellen Kontext Ihrer Komponente zu testen.

Node.js Debugger VS Code-Funktionen

Auto Attach für schnelles Debugging

Aktivieren Sie Auto Attach über die Command Palette (Strg+Umschalt+P > „Toggle Auto Attach”). Setzen Sie es auf den „smart”-Modus. Jetzt verbindet sich jeder Node.js-Prozess, der aus dem Terminal von VS Code gestartet wird, automatisch mit dem Debugger – keine Konfiguration erforderlich.

Debugging asynchroner Operationen

Die Node.js Debugger VS Code-Integration glänzt beim asynchronen Debugging. Setzen Sie Breakpoints innerhalb von async-Funktionen, Promise-Ketten oder Callbacks. Der Call Stack zeigt deutlich den asynchronen Ausführungspfad und macht es einfach, komplexe asynchrone Abläufe nachzuvollziehen.

Optimierung Ihres Debugging-Workflows

Effektive Nutzung der Debug-Konsole

Die Debug-Konsole ist nicht nur für Ausgaben da – sie ist eine REPL, die mit Ihrem pausierten Ausführungskontext verbunden ist. Testen Sie Fixes, inspizieren Sie Objekte oder rufen Sie Funktionen direkt auf:

// Während an einem Breakpoint pausiert:
// > user.permissions
// ['read', 'write']
// > calculateTotal(cart.items)
// 45.99

Dateien überspringen, um sich auf Ihren Code zu konzentrieren

Fügen Sie dies zu Ihrer launch.json hinzu, um Bibliotheks-Code zu überspringen:

"skipFiles": [
  "<node_internals>/**",
  "node_modules/**"
]

Der Debugger wird nicht in diese Dateien einsteigen und Sie bleiben auf Ihre Anwendungslogik fokussiert.

Fazit

Die Debugging-Tools von VS Code transformieren, wie Sie Code verstehen und Fehler beheben. Anstelle verstreuter console.logs erhalten Sie eine vollständige Ansicht des Zustands Ihrer Anwendung zu jedem beliebigen Zeitpunkt. Bedingte Breakpoints und Logpoints reduzieren Debugging-Rauschen. Die Browser-Integration bringt Frontend-Debugging in Ihren Editor. Auto Attach macht Node.js-Debugging mühelos.

Fangen Sie klein an – ersetzen Sie Ihr nächstes console.log() durch einen Breakpoint. Gehen Sie den Code durch. Inspizieren Sie Variablen. Sobald Sie die Klarheit professioneller Debugging-Tools erlebt haben, werden Sie sich fragen, wie Sie jemals ohne sie ausgekommen sind. Die Zeit, die Sie in das Erlernen dieser Funktionen investieren, zahlt sich sofort in schnelleren Bugfixes und tieferem Code-Verständnis aus.

FAQs

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.