Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Visual Studio Code Grundkurs

Debuggen von Node.js-Anwendungen

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Hier verfolgen Sie, wie einfach eine Debugging-Session für eine Node.js-Anwendung mit Visual Studio Code umgesetzt werden kann.

Transkript

In diesem Video schauen wir uns an, wie einfach wir Node.js-Anwendungen debuggen können. Dazu lege ich erstmal eine neue Datei an und zwar nennen wir diese einfach mal "app.js" und implementieren einfach mal für Node.js einen leichtgewichtigen Webserver mittels "require". Wir brauchen hier das http-Modul, dass uns diese Funktionalität zur Verfügung stellt. "http.createServer", dann bekommen wir ein Anfrage und wir haben dann auch noch die Antwort. Ein Request und Response. Wir möchten natürlich den Client antworten. "Response" und zwar, schreiben wir ihm doch mal ein "Hello World!". Anschließend müssen wir diesen Stream wieder beenden, damit der Client dann die Daten bekommt. Und das war auch schon alles, um in, ja, Node.js einen Webserver zu programmieren. Wir müssen dann nur noch auf den Port lauschen. In den meisten Fällen ist es Port "3000". Ich speichere die Datei und nun kann man mittels F5-Taste, oder wenn ich jetzt natürlich die F1-Taste betätige, können wir natürlich auch "debug" eintippen und dann sehen wir hier auch "Debug:Continue". Das aller erste Mal, wird natürlich "Visual Studio Code" fragen, wo und was, soll er denn debuggen. Es ist ja gar keine Konfiguration hinterlegt, also klicke ich hier auf "Close". Wir bekommen gerade kein Profilanfrage. Also ich drücke nochmal "F5" und dann genau erscheint wiederholt die Anfrage, was soll er denn debuggen und er hat ein fertiges Profil für Node.js. Das bedeutet, wähle ich Node.js aus, wird hier ein ".vscode"-Ordner erzeugt und die nötige Konfiguration als "JSON" abgelegt. Das heißt, uns wird die ganze Arbeit erspart, hier erst mal umfangreich irgendwas zu konfigurieren. In dem Fall hat er auch schon die "app.js" erkannt im "Root" und dann muss man hier auch überhaupt nichts mehr verändern. Ich kann jetzt sozusagen hier einen Breakpoint setzen. Ich drücke nochmal die F5-Taste und wir landen im Debug-Modus, sehen hier unten auch wunderbar die Console, können hier auch direkt zur Laufzeit JavaScript-Code eingeben, um Dinge analisieren zu können. Wir haben links unten die "BREAKPOINTS", wir haben einen kompletten "CALL STACK", wir können direkt bestimmte Variablen beobachten und watchen und den aktuellen Zustand ansehen. Und wenn ich jetzt mal den Browser öffne, den "Google Chrome" und will ich hier mal auf "localhost:3000" zugreifen, sehen wir auch schon, ich lande sofort innerhalb meiner JavaScript-Datei beim "Breakpoint" und wir können hier zur Laufzeit eben die ganzen Daten sehen, den "CALL STACK". Hier wenn ich mit dem Mauszeiger über der "response" gehe oder "request", uns werden aller Informationen angezeigt. Wir können mit denselben Tastenkombinationen dann durch den Debug-Modus steppen, was wir bereits aus großen "Visual Studio"-Versionen kennen. Also zum Beispiel "F10" für die nächsten Schritte, et cetera. Nochmal "localhost" und wir sehen, hier kommt dann auch sofort das Ergebnis beim Browser an. Das Ganze war jetzt natürlich nativ in JavaScript. Das Schöne ist natürlich auch, dass "Visual Studio Code" das Debuggen von TypeScript-Dateien unter Node.js unterstützt. Und dazu verändern wir doch einfach mal die Javascript-Datei in eine TypeScript-Datei und müssen natürlich hier nochmal eine TypeScript-Konfiguration hinterlegen: "tsconfig.json". Und durch den "JSON IntelliSense"-Support können wir hier eben ganz bequem "TypeScript" sagen, dass wir uns hier unter "Node.js" befinden Das wäre in dem Fall "commonjs", was wir hier als Modulsytem mitangeben müssen. Und dann ist es extrem wichtig, dass wir Source-Maps aktivieren, weil nur Source-Map-Dateien ermöglichen das Debuggen von TypeScript-Dateien, weil während "Node.js" gestartet wird, wird unsere JavaScript-Datei geladen, die aus der TypeScript-Datei generiert wurde. Und wenn ich jetzt ein Breakpoint innerhalb der TypeScript-Datei setze, muss der Debugger zu Laufzeit wissen, wo befindet sich das dann auch ungefähr in der JavaScript-Datei. Und dafür sind Source Map-Dateien wichtig. Okay, das war dann auch schon alles. Ich speichere die TypeScript-Config-Datei. Mit "SteuerungShift B" tue ich erst mal den Task Runner konfigurieren, dass unser TypeScript-Compiler gestartet wird. Hier wähle ich automatisch mal das TypeScript-Profil aus mit "tsconfig.json". Da ist nämlich dann schon alles fertig konfiguriert. Mehr muss ich hier dann auch gar nicht mehr machen. Ich wiederhole nochmal mit "SteuerungShift B" den Task und wir sehen auch schon, ist der Compiler aktiv. Wir haben erstmal eine Fehlermeldung bekommen und zwar findet er den Namen "require" nicht. Ist auch natürlich klar, dass es etwas Node-spezifisch ist, was auch unter "TypeScript" nicht kennen kann und dazu wechseln wir hier einmal in die Console und müssen einmalig den TypeScript-Definition-Manager installieren und zwar global. Ich habe diesen bereits installiert. Dann muss man anschließend bei einem neuen Projekt einmalig den TypeScript-Definition-Manager hier initialisieren, weil es erscheint jetzt sozusagen gleich hier ein neues Verzeichnis: "typings" und eine "tsdconfig"-File. Da, wo die ganzen Beschreibungssprachen für TypeScript dazukommen, weil das http-Modul zum Beispiel würde auch erst zur Laufzeit von Node.js unserer Anwendung zu Verfügung gestellt. Also kann TypeScript das alles gar nicht auflösen. Damit es aber funktioniert, nutzen wir eben hier diesen TypeScript-Definition-Manager, installieren hier "tsd install node save" und dann wird das auch automatisch gleich erkannt. In dem Fall werden wir dann sogar so eine Beschreibungsdatei haben, verwendet man bei Typescript beim Referenzieren von Modulen kein "var", sondern ein "import". Und das Schöne ist, jetzt bekommt man sogar richtigen IntelliSense-Support. Ich speichere mal die TypeScript-Datei. Nochmal "SteuerungShiftB" und es erscheint sofort die generierte JavaScript-Datei und die Source Map-Datei. Ich setze jetzt hier einen Breakpoint innerhalb von unserer TypeScript-Datei. Allerdings dürfen wir da nicht vergessen in der "launch.json" darauf hinzuweisen, dass wir jetzt hier mit Source Map-Dateien arbeiten. Das setzen wir auf "true" und dann geben wir ihm die TypeScript-Datei mit und der löst das dann alles von selbst auf. Jetzt eigentlich nur noch die Datei speichern mit "Steuerung S". Ich drücke "F5" und wir können dann direkt innerhalb von unserer TypeScript-Datei dann debuggen. Wechseln wir zu "Datei". Ich aktualisiere mal den Browser und wir sehen, wir befinden uns innerhalb der TypeScript-Datei und können genauso debuggen, wie wir das unter JavaScript gesehen haben.

Visual Studio Code Grundkurs

Lernen Sie alles Wichtige kennen, um mit dem kostenlosen Quelltexteditor von Microsoft in die Entwicklung von Webprojekten einsteigen zu können

2 Std. 21 min (28 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:23.03.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!