So debuggen Sie eine Node.js-Anwendung mit VSCode, Docker und Ihrem Terminal

In diesem Artikel werden einige leistungsstarke Tools vorgestellt, mit denen Sie Fehler mithilfe von VSCode, Docker und Ihrem Terminal finden und beheben können. Wir werden auch die 6 Möglichkeiten zum Debuggen einer Node.js-Anwendung lernen (und in die Praxis umsetzen).

Können Sie sich die 6 möglichen Möglichkeiten zum Debuggen einer Node.js-Anwendung vorstellen? Eine der häufigsten Methoden im Leben eines jeden Entwicklers besteht darin, Fehler schnell zu finden und zu verstehen, was in seinen Apps vor sich geht.

Die meisten hier gezeigten Beispiele verwenden Node.js, aber Sie können sie auch in Ihren JavaScript-Front-End-Apps verwenden. Sie können andere Editoren oder IDEs wie Visual Studio oder Web Storm verwenden, aber in diesem Beitrag werde ich VSCode verwenden. Nehmen Sie einfach das, was Sie hier lernen, und wenden Sie es in einem Editor Ihrer Wahl an.

Am Ende dieses Beitrags haben Sie gelernt, wie Sie Ihre Apps mit den folgenden Tools überprüfen können:

  • Node.js Read-Eval-Print-Loop (REPL)
  • Browser
  • Docker
  • VSCode & lokale Umgebung
  • VSCode & Docker
  • VSCode & Remote-Umgebung

Bedarf

In den nächsten Schritten erstellen Sie eine Web-API mit Node.js und debuggen Ihre App mit VSCode und Docker. Stellen Sie vor dem Codieren sicher, dass auf Ihrem Computer die folgenden Tools installiert sind:

  • Docker
  • Node.js v14
  • VSCode

Einführung

Wenn Sie eine Weile als Entwickler gearbeitet haben, wissen Sie vielleicht, dass es nicht so ist wie im Film. In der Tat sollten Entwickler 80% ihrer Arbeit damit verbringen, nachzudenken und nur 20% Code zu schreiben.

In Wirklichkeit wird der größte Teil dieser 80% für das Lösen von Problemen, das Beheben von Fehlern und den Versuch aufgewendet, zu verstehen, wie weitere Probleme vermieden werden können. Freitagabend könnte wie folgt aussehen:

Entwicklercodierung, wenn alles schief geht

Wenn ich feststelle, dass bei meiner Arbeit etwas Seltsames passiert ist, versuche ich, ein paar Fragen zu stellen, wie Sie in den folgenden Abschnitten sehen werden.

War es ein Rechtschreibfehler?

In diesem Fall liegt das Problem möglicherweise bei einer Funktion oder Variablen, die ich aufrufen möchte. Die Konsole zeigt mir, wo der Fehler liegt, und einen kurzen möglichen Grund für das Auslösen des Fehlers, wie im folgenden Ausdruck gezeigt:

Ist dieses Verhalten etwas, das mit der aktuellen Implementierung funktionieren sollte?

Es könnte eine if- Anweisung sein, die meine Bedingungen nicht bewertet hat, oder sogar eine Schleife , die nach bestimmten Interaktionen aufhören sollte, aber nicht aufhört.

Was geht hier vor sich?

In diesem Fall könnte es sich um einen internen Fehler handeln oder um etwas, das ich noch nie gesehen habe. Also google ich es, um herauszufinden, was in meiner Anwendung passiert ist.

Das folgende Bild zeigt als Beispiel einen internen Node.js-Stream-Fehler, der nicht zeigt, was ich in meinem Programm falsch gemacht habe.

Debuggen von Skriptsprachen

Normalerweise müssen Entwickler aus Skriptsprachen wie Ruby, Python oder JavaScript keine IDEs wie Visual Studio, WebStorm usw. verwenden.

Stattdessen entscheiden sie sich häufig für leichtgewichtige Editoren wie Sublime Text, VSCode, VIM und andere. Das folgende Bild zeigt eine gängige Vorgehensweise zum Überprüfen und "Debuggen" von Apps. Sie drucken Anweisungen aus, um Anwendungsstatus und -werte zu überprüfen.

Beginnen

Die Praxis, die wir im vorherigen Abschnitt betrachtet haben, ist nicht so produktiv wie sie sein könnte. Wir können Textnamen mit Werten verwechseln, falsche Variablen ausdrucken und Zeit mit einfachen Fehlern oder Rechtschreibfehlern verschwenden. In den nächsten Abschnitten werde ich Ihnen andere Möglichkeiten zeigen, wie Sie die Suche nach Fehlern und die Validierung von Anweisungen verbessern können.

Das Hauptziel hier ist zu zeigen, wie einfach es sein kann, eine Anwendung zu debuggen. Mit den gängigsten Tools können Sie Code von einfachen Terminalbefehlen bis hin zu Remotecomputern aus der ganzen Welt überprüfen.

Beispielprojekt erstellen

Bevor wir uns mit Debugging-Konzepten befassen, sollten Sie eine Anwendung zur Überprüfung erstellen. Erstellen Sie zunächst eine Web-API mit dem HTTP-Modul des nativen Node.js. Die API sollte alle Felder aus der Anforderung abrufen, alle Werte daraus summieren und dann dem Anforderer mit den berechneten Ergebnissen antworten.

Wählen Sie einen leeren Ordner auf Ihrem Computer und beginnen Sie mit der Web-API.

Erstellen Sie zunächst eine Math.jsDatei, die für die Summierung aller Felder aus einem JavaScript-Objekt verantwortlich ist:

//Math.js module.exports = { sum(...args) { return args.reduce( (prev, next) => Number(prev) + Number(next), 0 ) } } 

Zweitens erstellen Sie eine Node.js-Serverdatei mit dem folgenden Code. Kopieren Sie den Wert, erstellen Sie Ihre Datei und fügen Sie sie dort ein. Ich werde später erklären, was dort passiert.

Beachten Sie, dass diese API eine ereignisgesteuerte API ist und Anforderungen mithilfe des Node.js Streams-Ansatzes verarbeitet.

//server.js const Http = require('http') const PORT = 3000 const { promisify } = require('util') const { pipeline } = require('stream') const pipelineAsync = promisify(pipeline) const { sum } = require('./Math') let counter = 0 Http.createServer(async (req, res) => { try { await pipelineAsync( req, async function * (source) { source.setEncoding('utf8') for await (const body of source) { console.log(`[${++counter}] - request!`, body) const item = JSON.parse(body) const result = sum(...Object.values(item)) yield `Result: ${result}` } }, res ) } catch (error) { console.log('Error!!', error) } }) .listen(PORT, () => console.log('server running at', PORT)) 

OK, das könnte wie ungewöhnlicher Code für eine einfache Web-API aussehen. Lassen Sie mich erklären, was passiert.

Alternativ basiert diese API auf Node.js Streams . So können Sie On-Demand - Daten von Einkommen lesen werden Anfragen , zu verarbeiten und auf sie reagieren , die unter Verwendung von Antwortobjekt.

On line (11) there is a pipeline function that will manage the event flow. If something goes wrong in any stream function, it will throw an exception and we'll handle errors on the catch statement from try/catch.

On line (6) we are importing the sum function from the Math module and then processing incoming data on line (19). Notice that on (19) there is an Object.valuesfunction which will spread all object values and return them as an array. For example, an object {v1: 10, v2: 20} will be parsed to [10, 20] .

Running

If you have a Unix based system you can use the cURL command, which is a native command to make Web requests. If you're working on the Windows Operating system, you can use Windows Subsystem for Linux or Git bash to execute Unix instructions.

Create a run.sh file with the following code. You'll create code to request your API. If you're familiar with Postman you can skip this file and execute from there.

curl -i \ -X POST \ -d '{"valor1": "120", "valor2": "10"}' \ //localhost:3000

Note that youneed to install Node.js version 14 or higher.

You'll need to open two terminal sessions. On mine, I spliced two terminals in my VSCode instance. On the left run node server.js and on the right run bash run.sh as follows:

Debugging using Node.js Read-Eval-Print-Loop (REPL)

Node.js can help you create the best application possible. REPL is a mechanism for debugging and inspecting Node.js applications from the terminal. When you add the inspect flag after the node command, the program will stop right on the first code line as shown below:

First, you'll write the debugger keyword right after the counter's console.log on line (17) and then execute node inspect server.js again.

Note that you can interact with the REPL APIby using the commands listed in the official documentation.

In the next image, you'll see a practical example of how REPL works using some of the following commands:

  1. list(100): shows the first 100 lines of code
  2. setBreakpoint(17): sets a breakpoint on the 17th line
  3. clearBreakpoint(17): removes a breakpoint on the 17th line
  4. exec body: evaluates the body variable and prints out its result
  5. cont: continues the program's execution

The image below shows in practice how it works:

I highly recommend that you try using the watch statement. As in the browser, you can watch statements on demand. In your REPL session write watch(counter) and then cont.

To test the watch you need to choose a breakpoint – use setBreakpoint(line) for it. As you run run.sh, the program will stop on your breakpoint and show the watchers. You may see the following result on your console:

Debugging using Chromium-based browsers

Debugging in the browser is more common than debugging from terminal sessions. Instead of stopping the code on the first line, the program will continue its execution right before its initialization.

Run node --inspect server.js  and then go to the browser. Open the DevTools menu (pressing F12 opens the DevToolson most browsers). Then the Node.js icon will appear. Click on it. Then, in the Sources section you can select the file you want to debug as shown in the image below:

Debugging in VSCode

Going back and forth to the browser isn't really that fun as long as you write code in an editor. The best experience is to run and debug code in the same place.

But it's not magic. You configure and specify which is the main file. Let's configure it following the steps below:

  1. You'll need to open the launch.json file. You can open it by pressing Ctrl + Shift + P or Command + Shift + P on macOS, then writing launch. Choose the Debug: Open launch.json option. Additionally, you can press F5 and it might open the file as well.
  2. In the next step of the wizard, click on the Node.js option.
  3. You may have seen a JSON file on the editor with the pre-configuration for debugging. Fill in the program field with your filename – this tells VSCode which is the main file. Notice that there is a ${workspaceFolder} symbol. I wrote it to specify that the file is in the current folder I'm working on:
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "skipFiles": [ "/**" ], "program": "${workspaceFolder}/server.js" } ] }

Almost there! Go to the source code on server.js and set a breakpoint on the 16th line by clicking on the left side of the code line indicator. Run it by pressing F5 and trigger the server.js using the run.sh, whichwill show the following output:

Debugging Docker-based applications

I personally love using Docker. It helps us stay as close as possible to the production environment while isolating dependencies in a receipt file.

If you want to use Docker you need to configure it in a Docker config file. Copy the code below, and create a new file beside the server.js and paste it in.

FROM node:14-alpine ADD . . CMD node --inspect=0.0.0.0 server.js

First, you'll need to execute the Docker build command on your folder to build the app running docker build -t app . . Second, you'll need to expose the debug port (9229) and the server port (3000) so either the browser or VSCode can watch it and attach a debugger statement.

docker run \ -p 3000:3000 \ -p 9229:9229 \ app

If you run the run.sh, file again, it should request the server which is running on Docker.

Debugging Docker apps on VSCode is not a tough task. You need to change the configuration to attach a debugger on a remote root. Replace your launch.json file with the code below:

{ "configurations": [ { "type": "node", "request": "attach", "name": "Docker: Attach to Node", "remoteRoot": "${workspaceFolder}", "localRoot": "${workspaceFolder}" } ] }

As long as your app is running on Docker and exposing the default debug port (9229) the configuration above will link the app to the current directory. Running F5 and triggering the app will have the same outcome as running locally.

Debugging remote code using VSCode

Remote debugging is exciting! You should keep in mind a few concepts before starting to code:

  1. What's is the IP Address of the target?
  2. How is the remote working directory set up?

I'll change my launch.json file and add the remote address. I have another PC at home which is connected to the same network. Its IP address is 192.168.15.12.

Also, I have the Windows Machine's working directory here: c://Users/Ana/Desktop/remote-vscode/.

The macOS is based on Unix systems so the folder structure is different than on my Windows machine. The directory structure mapping must change to /Users/Ana/Desktop/remote-vscode/.

{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "attach", "name": "Attach to Remote", "address": "192.168.15.12", "port": 9229, "localRoot": "${workspaceFolder}", "remoteRoot": "/Users/Ana/Desktop/remote-vscode/", "trace": true, "sourceMaps": true, "skipFiles": [ "/**" ] } ] }

In this particular case, you'll need at least two different machines to test it. I made a short video showing how it works in practice below:

Stop using console.log for debugging!

My tip for you today is about being lazy for manual stuff. Learn one new shortcut or tool per day to improve productivity. Learn more about the tools you've been working on every day and it will help you spend more time thinking than coding.

In this post, you saw how VSCode can be a helpful tool for debugging apps. And VSCode was just an example. Use whatever is most comfortable for you. If you follow these tips, the sky is the ?

Thank you for reading

Ich schätze die Zeit, die wir zusammen verbracht haben, sehr. Ich hoffe, dieser Inhalt ist mehr als nur Text. Ich hoffe, es hat Sie zu einem besseren Denker und auch zu einem besseren Programmierer gemacht. Folgen Sie mir auf Twitter und besuchen Sie meinen persönlichen Blog, in dem ich alle meine wertvollen Inhalte teile.

Tschüss! ?