23.02.2021

Debugging von TypeScript Next JS

Die Verwendung der Konsole für Debugging-Zwecke kann anfangs ausreichen, um die gewünschten Resultate zu erzielen. Wird der Code hingegen etwas komplexer, stösst man mit console.log() statements schnell an seine Grenzen. Abhilfe verschafft hier der Node JS Inspector, mit dem man den auf dem Node Server wie auch den auf dem Browser (Client) ausgeführten Code debuggen kann.

Konfiguration
In einem ersten Schritt startet man den node Prozess mit dem --inspect flag. Ein Debug Script im package.json file könnte zum Beispiel so aussehen:

"debug": "cross-env NODE_OPTIONS='--inspect' next dev"
 

Wir verwenden hier ausserdem das npm package cross-env, welches das Problem der Übergabe von Environment Variablen unter verschiedenen Betriebssystemen löst.
Durch das Mitgeben dieses --inspect flag wird jetzt in der Konsole Folgendes ausgegeben:
Debugger listening on ws://127.0.0.1:9229/2837e126-a28e-423f-ade0-c09144d3614c

Debugger verknüpfen 
Es gibt mehrere Möglichkeiten, um sich nun auf den oben erstellten Inspector Prozess zu verbinden. Man kann entweder mit Google Chrome oder direkt mit Visual Studio Code darauf zugreifen. Will man mit Chrome darauf zugreifen, muss man über die URL chrome://inspect gehen. Dort findet man unter Remote Target die gefundenen Inspector Prozesse. Durch Klick auf «attach» verbindet man sich und kann nun beliebig Breakpoints setzen.  
Um mit Visual Studio Code darauf zuzugreifen, benötigen wir einen neuen launch Task. Dieser sieht wie folgt aus:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach Debugger",
      "skipFiles": ["<node_internals>/**"],
      "port": 9229
    }
  ]
}
 

Wenn man diesen Task startet, kann man wie gewohnt Breakpoints im Code setzen. Bei einer erfolgreichen Verbindung zum Inspector Prozess erhält man in der Konsole die Meldung „Debugger attached“.

Man kann somit auch direkt TypeScript Files debuggen. Dies gelingt, weil in den generierten JavaScript Files am Ende jeweils Base64 encoded die Source Maps angehängt werden. Durch diese wird eine Verknüpfung zwischen den JS und TS Files erstellt. Next JS kreiert diese Source Maps standardmässig nur bei Development Builds. Das ist auch sinnvoll, um die Build-Time sowie die Grösse der generierten JavaScript Files bei Production Builds kleinzuhalten.

Anstelle von Breakpoints lässt sich auch direkt im Code das Debugger Statement verwenden. Das kann nützlich sein, wenn man entweder keine Source Maps für die TypeScript Files hat oder wenn man mit Google Chrome debuggen will und sich nicht darum kümmern möchte, am richtigen Ort einen Breakpoint zu setzen.