Visual Studio Code mit Node.js benutzen

Das es Visual Studio Code inzwischen schon in einer überarbeiteten Version (0.5.0) gibt und man darin auch Javascript mit Node.js schreiben / ausführen und Debuggen kann, lohnt sich durchaus ein Blick darauf.
Folgend eine Anleitung zum installieren von Node.js und Visual Studio Code unter Windows + Beispiel-Projekt um zu zeigen wie man Node.js Anwendungen im Visual Studio Code debuggen kann.

Der Node.js Download ist unter der Adresse https://nodejs.org/download/ zu finden.
Im Moment ist die Version 0.12.17 Aktuell, Der Direktlink zur x64 MSI ist: https://nodejs.org/dist/v0.12.7/x64/node-v0.12.7-x64.msi
Die Installation von Visual Studio Code kann man unter https://code.visualstudio.com herunter laden


1. Installation von node.js
Um Node.js zu installieren, reicht ein gewohnter Doppelklick auf das MSI-Paket.
Das Setup wird aufgerufen und man kann ohne Probleme alle Standard-Einstellungen verwenden und einfach Weiter klicken.

Die Installation kann einfach mit dem Code der Beispiel-Anwendung von der Node.js Webseite getestet werden.
Dazu erstellen wir in c:\node\ eine Textdatei mit dem Namen „test.js“ und folgendem Inhalt:

1
2
3
4
5
6
var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

Der Test findet nun statt in dem wir einen rechtsklick auf die test.js machen und dann „Öffnen mit…“ die installierte node.exe (C:\Program Files\nodejs\node.exe) benutzen.
Dann geht ein Konsolenfenster auf in dem der Node.js-Prozess gestartet wird welches wie folgt aussieht:
1_nodeapp
Rufen wir nun im Browser die Adresse http://127.0.0.1:1337 auf, bekommen wir die Ausgabe „Hello World“ angezeigt:
2_browser


2. Installation von Visual Studio Code
Visual Studio Code wird auch einfach nur durch einen Doppelklick installiert.
Nach dem Installieren geht Code auch schon direkt auf und zeigt die Startseite.
Anmerkung: Ich mag das „Dark Theme“ im Moment noch nicht, darum habe ich mein Code auf das „Light Theme“ umgestellt.
Dies geht unter „View“->“Theme“->“Light Theme“ und wird sofort übernommen.


Öffnen des Node.js Projektes.
Unser Projekt besteht nun eigentlich nur aus der einzelnen Datei „test.js“ im Verzeichnis „c:\node“.
Dieses Verzeichnis öffnen wir nun in Code über „File“->“Open Folder…“, danach wird die Datei „test.js“ links in der Dateiauflistung angezeigt:
3_code

Unten Links im Fenster finden wir nun ein „Debugging“ Symbol (der durchgestrichene Käfer) – bei einem klick darauf wird die Debugger-Ansicht von Visual Studio Code aufgerufen.
Über den Grünen Pfeil Links oben könnten wir die test.js durch Node.js ausführen lassen und den Visual Studio Code-Debugger an dem Prozess anhängen.
Bevor wir dies tun können, müssen wir dem Visual Studio Code aber erst noch mitteilen was es starten soll.
Hierzu wird eine Vorlage für eine „launch.json“ im Verzeichnis „.settings“ erstellt wenn man das erste mal auf den grünen Pfeil klickt oder die Launch.json nicht existiert.
Hier müssen folgende 2 Zeilen geändert werden:

1
2
3
4
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Launch test.js",
// Workspace relative or absolute path to the program.
"program": "test.js",

Die Komplette Datei sieht dann wie Folgt aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{
    "version": "0.1.0",
    // List of configurations. Add new configurations or edit existing ones.  
    // ONLY "node" and "mono" are supported, change "type" to switch.
    "configurations": [
        {
            // Name of configuration; appears in the launch configuration drop down menu.
            "name": "Launch test.js",
            // Type of configuration. Possible values: "node", "mono".
            "type": "node",
            // Workspace relative or absolute path to the program.
            "program": "test.js",
            // Automatically stop program after launch.
            "stopOnEntry": false,
            // Command line arguments passed to the program.
            "args": [],
            // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
            "cwd": ".",
            // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
            "runtimeExecutable": null,
            // Optional arguments passed to the runtime executable.
            "runtimeArgs": [],
            // Environment variables passed to the program.
            "env": { },
            // Use JavaScript source maps (if they exist).
            "sourceMaps": false,
            // If JavaScript source maps are enabled, the generated code is expected in this directory.
            "outDir": null
        }, 
        {
            "name": "Attach",
            "type": "node",
            // TCP/IP address. Default is "localhost".
            "address": "localhost",
            // Port to attach to.
            "port": 5858,
            "sourceMaps": false
        }
    ]
}

Nun wechseln wir wieder zurück in die Dateiauflistung (erster Button oben links mit den 2 Dateien oder Shortcut „Strg+Shift+E“) und wählen unsere „test.js“ aus.
Hier setze ich jetzt in Zeile 4 einen Haltepunkt, welcher im Debugger angezeigt werden sollte sobald die Seite im Browser aufgerufen wird.
Also wieder zurück in den Debugger (Shortcut: Strg+Shift+D) und den grünen Pfeil zum starten und Debuggen der Anwendung klicken.
Die Node.js Anwendung wird nun mit angehängtem Debugger gestartet:
4_debugcmd

Und wenn wir jetzt die Adresse http://127.0.0.1:1337 aufrufen, dann bekommen hält der Debugger vom Visual Studio Code an unserem definierten Haltepunkt an und zeigt alle Variablen-Inhalte, den Callstack und alle anderen verfügbaren Informationen:
5_debugcode

Das wars auch schon – so einfach kann man Node.js Anwendungen in Visual Studio Code debuggen 🙂

leave your comment

*

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Unterstütze den Frickelblog!