Angular Debugging in VSCode unter Ubuntu

David Göschel

21. August 2025 • 3 Min. Lesezeit

Wie du Angular-Projekte unter Ubuntu in VSCode wieder debuggen kannst, wenn der Standard-Debugger nicht mehr funktioniert. Schritt-für-Schritt-Anleitung mit Tipps aus der Praxis

Ausgangslage

Seitdem ich von Windows auf Ubuntu gewechselt bin, konnte ich meine Angular Apps in VSCode nicht mehr debuggen, denn der Standard-Debugger funktionierte nicht mehr wie gewohnt out of the box. Das war erstmal ziemlich nervig, weil ich mich an das bequeme Debugging gewöhnt hatte

Also habe ich recherchiert und festgestellt, dass VSCode den Pfad zum eingestellten Standardbrowser nicht automatisch erkennt. Das ist bei längerem Nachdenken logisch, denn auf Ubuntu werden die Softwarepakete ganz anders installiert und verwaltet als auf Windows

So hab ich’s gemacht

Zuerst habe ich versucht, den Debugger zu starten und bekam eine Fehlermeldung von VSCode, dass der Browser nicht gefunden wurde. Die Fehlermeldung habe ich in Google kopiert und fand die Lösung sehr schnell

Man muss die launch.json-Datei so anpassen, dass VSCode den Pfad zur ausführbaren Datei findet und die notwendigen Berechtigungen setzen, damit wie gewohnt der Debugger startet und ich meine Angular-App debuggen kann

1. Chromium (oder anderen Browser) installieren

Ich hab Chromium per Snap installiert:

sudo snap install chromium

2. Pfad zur ausführbaren Datei finden

Mit whereis findest du raus, wo Chromium auf Ubuntu installiert wurde:

whereis chromium

3. Berechtigungen setzen

VSCode kann an dieser Stelle sagen, das noch Rechte fehlen um die Datei auszuführen. Die Rechte setzen mit:

sudo chmod +x /snap/bin/chromium

4. launch.json anpassen

Meine launch.json sieht jetzt so aus:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:4200",
      "runtimeExecutable": "/snap/bin/chromium",
      "runtimeArgs": ["--remote-debugging-port=9222", "--user-data-dir=${workspaceFolder}/.vscode/chromium"],
      "preLaunchTask": "npm: start",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: start",
      "url": "http://localhost:4200/"
    },
    {
      "name": "ng test",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: test",
      "url": "http://localhost:9876/debug.html"
    }
  ]
}

Tipp: Wenn du einen anderen Browser nutzt, musst du natürlich den Pfad entsprechend anpassen

Was bedeuten die Einstellungen?

${workspaceFolder} ist eine vordefinierte Variable von VSCode die automatisch auf das Projektverzeichnis zeigt. In meinem Falle würde VSCode den Pfad auflösen zu /home/david/projects/<name-des-projekts>/src

Das Argument --user-data-dir ist wichtig fürs Debuggen. Damit wird ein neues temporäres Profil erstellt und verhindert dass keine Browsererweiterungen Probleme verursachen

Hinweis: Wenn du viele Extensions im Browser installiert hast, empfiehlt es sich, zum Debuggen ein neues Profil anzulegen oder den Gastmodus zu verwenden. So bleibt dein Hauptprofil sauber und du vermeidest unerwartete Probleme durch Erweiterungen

Fazit

Mit diesen Anpassungen ist es wieder möglich, Angular-Projekte unter Ubuntu wie gewohnt debuggen zu können