TypeScript Visual Studio Code – Debuggen

Debuggen ist das um und auf bei der Entwicklung. Auch mit TypeScript und dem richtigen Toolset findet man schnell und effizient jeden Laufzeitfehler und behält stets die Übersicht der relevanten Daten des Programms.

TypeScript Visual Studio Code – Debuggen

Visual Studio Code eignet sich für die Entwicklung von TypeScript. Die IDE hat einen integrierten Debugger, den Node.js debugger. Damit dieser an die nötigen Debug-Informationen kommt, muss man in der tsconfig.json Konfigurationsdatei für den TypeScript Compiler die Zeile

"sourceMap":true

aktivieren. Dadurch werden neben den compilierten *.js auch *.js.map Dateien erzeugt. Der folgende Screenshot zeigt den Programmordner der Ausgabe des Compilers:

Debugger starten

Visual Studio Code hat für das Thema Debuggen ein eigenes Menüsymbol links, über das ändert man die Ansicht in der seitlichen Leiste. Von dem Bereich „Run“ kann man das aktive Projekt mit unterschiedlichen Settings starten. Ein Klick auf „Run and Debug“ öffnet dazu in der Auswahlkonsole eine Liste aller verfügbarer Debugger…

Neben den beiden Browsern Chrome und Edge findet man dort auch den Node.js debugger. Die Auswahl entscheidet nun wie das Programm gestartet wird.

Es gibt folgendes zu beachten:

• Server seitiges debuggen
  ist das zu debuggende Programm eine Serveranwendung (also beispielsweise ein Konsolenprogramm, welches auf einem Rechner Businesslogik ausführt), dann ist Node.js als Debugger die richtige Wahl.
• Client seitiges debuggen
  ist das zu debuggende Programm eine Webanwendung, dann wählt man einen der angebotenen Webbrowser aus

Client seitiges debuggen

Das Serverseitige debugging sollte mit dem integrierten Node.js in Visual Studio Code keine Probleme bereiten. Ich konzentriere mich deshalb auf das Debuggen von Webanwendungen die direkt im Browser beim Kunden laufen. Sofern man lieber mit Chrome arbeitet empfiehlt sich die Installation der VS Code Extension „Debugger for Chrome“.

Nach der Wahl des Browsers hat man die Möglichkeit das Debugging mit den gewählten Einstellungen direkt über die IDE zu starten. VS Code kümmert sich um alles und startet den Browser mit dem zu debuggenden Programm. Dort stehen einem für andere Programmiersprachen bekannte Tools zur Verfügung. Oben mittig erscheint ein Menü um den Code laufen zu lassen, zu pausieren oder einzelne Codezeilen auszuführen. In der seitlichen Menüleiste findet man Informationen zu Variablen und selbst definierten Watchen (Wert bestimmter Variablen). Im Code Bereich lassen sich beliebige Haltepunkte setzen.

Einer der größten Vorteile ist, dass die Debugausgabe nicht über die Entwicklertools vom Browser abgerufen werden müssen. Diese findet man im Ausgabebereich direkt in der IDE.

Fazit

Ohne Debugger hat man als Entwickler ein schweres Leben. Sinnvolle Entwicklung ist nur mit mächtigen Tools effizient. Visual Studio Code bietet diese an um effizient der TypeScript Code zu debuggen. Vom starten des Browsers bis zum setzen von Haltepunkten ist alles nötige integriert und man spart sich zusätzliche externe Software. TypeScript Entwicklung ist deshalb unabhängig vom Betriebssystem überall verfügbar.

Was interessiert dich an TypeScript? Welches Projekt möchtest du damit umsetzen?