Τρόπος εντοπισμού σφαλμάτων μιας εφαρμογής Node.js με VSCode, Docker και το τερματικό σας

Σε αυτό το άρθρο, θα βρούμε μερικά ισχυρά εργαλεία που θα σας βοηθήσουν να βρείτε και να διορθώσετε σφάλματα χρησιμοποιώντας το VSCode, το Docker και το τερματικό σας. Θα μάθουμε επίσης (και θα εφαρμόσουμε) τους 6 τρόπους εντοπισμού σφαλμάτων μιας εφαρμογής Node.js.

Μπορείτε να μαντέψετε ποιοι είναι οι 6 πιθανοί τρόποι εντοπισμού σφαλμάτων μιας εφαρμογής Node.js; Μία από τις πιο κοινές πρακτικές στη ζωή κάθε προγραμματιστή περιλαμβάνει την εύρεση σφαλμάτων γρήγορα και την κατανόηση του τι συμβαίνει στις εφαρμογές τους.

Τα περισσότερα παραδείγματα που εμφανίζονται εδώ θα χρησιμοποιούν το Node.js, αλλά μπορείτε επίσης να τα χρησιμοποιήσετε στις εφαρμογές διεπαφής JavaScript. Μπορείτε να χρησιμοποιήσετε άλλους συντάκτες ή IDE όπως το Visual Studio ή το Web Storm, αλλά σε αυτήν την ανάρτηση θα χρησιμοποιήσω τον VSCode. Απλώς πάρτε ό, τι μαθαίνετε εδώ και εφαρμόστε το στο πρόγραμμα επεξεργασίας της επιλογής σας.

Μέχρι το τέλος αυτής της ανάρτησης θα έχετε μάθει πώς να ελέγχετε τις εφαρμογές σας χρησιμοποιώντας τα ακόλουθα εργαλεία:

  • Node.js Read-Eval-Print-Loop (REPL)
  • Πρόγραμμα περιήγησης
  • Λιμενεργάτης
  • VSCode & Τοπικό περιβάλλον
  • VSCode & Docker
  • VSCode & απομακρυσμένο περιβάλλον

Απαιτήσεις

Στα επόμενα βήματα, θα δημιουργήσετε ένα API Ιστού χρησιμοποιώντας το Node.js και θα εντοπίσετε σφάλματα στην εφαρμογή σας χρησιμοποιώντας το VSCode και το Docker. Πριν ξεκινήσετε τον κωδικό, βεβαιωθείτε ότι έχετε εγκαταστήσει τα ακόλουθα εργαλεία στο μηχάνημά σας:

  • Λιμενεργάτης
  • Node.js v14
  • Κωδικός VS

Εισαγωγή

Εάν εργάζεστε ως προγραμματιστής για λίγο, ίσως γνωρίζετε ότι δεν είναι όπως στις ταινίες. Στην πραγματικότητα, οι προγραμματιστές πρέπει να ξοδεύουν το 80% της δουλειάς τους σκέψης και μόνο 20% να γράφουν κώδικα.

Στην πραγματικότητα, το μεγαλύτερο μέρος αυτού του 80% δαπανάται για την επίλυση προβλημάτων, τη διόρθωση σφαλμάτων και την προσπάθεια κατανόησης του τρόπου αποφυγής περαιτέρω προβλημάτων. Τα βράδια της Παρασκευής μπορεί να μοιάζουν με το gif παρακάτω:

κωδικοποίηση προγραμματιστή όταν όλα πάνε στραβά

Όταν συνειδητοποιώ ότι κάτι περίεργο έχει συμβεί στη δουλειά μου, προσπαθώ να κάνω μερικές ερωτήσεις, όπως θα δείτε στις επόμενες ενότητες.

Ήταν ορθογραφικό λάθος;

Σε αυτήν την περίπτωση, το πρόβλημα μπορεί να σχετίζεται με κάποια λειτουργία ή μεταβλητή που προσπαθώ να καλέσω. Η κονσόλα θα μου δείξει πού βρίσκεται το σφάλμα και έναν σύντομο πιθανό λόγο για να ρίξω το σφάλμα όπως φαίνεται στην παρακάτω εκτύπωση:

Είναι αυτή η συμπεριφορά κάτι που πρέπει να λειτουργεί με την τρέχουσα εφαρμογή;

Θα μπορούσε να είναι αν μια δήλωση που δεν έχει αξιολογήσει τις συνθήκες μου ή ακόμη και έναν βρόχο που θα πρέπει να σταματήσει μετά από ορισμένες αλληλεπιδράσεις αλλά δεν σταματά.

Τι συμβαίνει εδώ;

Σε αυτήν την περίπτωση, θα μπορούσε να είναι ένα εσωτερικό σφάλμα ή κάτι που δεν έχω ξαναδεί. Γι 'αυτό το google για να καταλάβω τι συνέβη στην εφαρμογή μου.

Για παράδειγμα, η παρακάτω εικόνα δείχνει ένα εσωτερικό σφάλμα ροής Node.js που δεν δείχνει τι έκανα λάθος στο πρόγραμμά μου.

Εντοπισμός σφαλμάτων με βάση τις γλώσσες

Συνήθως, προγραμματιστές από γλώσσες που βασίζονται σε δέσμες ενεργειών όπως Ruby, Python ή JavaScript δεν χρειάζεται να χρησιμοποιούν IDE όπως Visual Studio, WebStorm και ούτω καθεξής.

Αντ 'αυτού, συχνά επιλέγουν να χρησιμοποιούν ελαφριά προγράμματα επεξεργασίας όπως Sublime Text, VSCode, VIM και άλλα. Η παρακάτω εικόνα δείχνει μια συνήθη πρακτική για τον έλεγχο και τον εντοπισμό σφαλμάτων εφαρμογών. Εκτυπώνουν δηλώσεις για την επαλήθευση των καταστάσεων και των τιμών της εφαρμογής.

Ξεκινώντας

Η πρακτική που εξετάσαμε στην προηγούμενη ενότητα δεν είναι τόσο παραγωγική όσο θα μπορούσε. Μπορούμε να συγχέουμε τα ονόματα κειμένων με τιμές, να εκτυπώσουμε εσφαλμένες μεταβλητές και να χάνουμε χρόνο σε απλά σφάλματα ή ορθογραφικά λάθη. Στις επόμενες ενότητες θα σας δείξω άλλους τρόπους για να βελτιώσετε την αναζήτησή σας για σφάλματα και επικυρώσεις δηλώσεων.

Ο κύριος στόχος εδώ είναι να δείξουμε πόσο απλό μπορεί να είναι ο εντοπισμός σφαλμάτων μιας εφαρμογής. Χρησιμοποιώντας τα πιο κοινά εργαλεία, θα μπορείτε να ελέγχετε τον κώδικα από απλές εντολές τερματικού σε απομακρυσμένα μηχανήματα από όλο τον κόσμο.

Δημιουργία του δείγματος έργου

Πριν βυθίσουμε τις έννοιες εντοπισμού σφαλμάτων, θα πρέπει να δημιουργήσετε μια εφαρμογή για έλεγχο. Πρώτα λοιπόν, δημιουργήστε ένα Web API χρησιμοποιώντας την εγγενή ενότητα NTP.js. Το API πρέπει να λαμβάνει όλα τα πεδία από το αίτημα, να αθροίζει όλες τις τιμές από αυτό και, στη συνέχεια, να απαντά στον αιτούντα με τα υπολογισμένα αποτελέσματα.

Επιλέξτε έναν κενό φάκελο στον υπολογιστή σας και ας ξεκινήσουμε με το Web API.

Αρχικά, δημιουργήστε ένα Math.jsαρχείο το οποίο θα είναι υπεύθυνο για το άθροισμα όλων των πεδίων από ένα αντικείμενο JavaScript:

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

Δεύτερον, δημιουργήστε ένα αρχείο διακομιστή Node.js χρησιμοποιώντας τον παρακάτω κώδικα. Αντιγράψτε την τιμή και δημιουργήστε το αρχείο σας και επικολλήστε το εκεί. Θα εξηγήσω τι συμβαίνει εκεί αργότερα.

Σημειώστε ότι αυτό το API είναι API βάσει συμβάντων και θα χειριστεί αιτήματα χρησιμοποιώντας την προσέγγιση Node.js Streams.

//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)) 

Εντάξει, αυτό μπορεί να μοιάζει με ασυνήθιστο κώδικα για ένα απλό Web API. Επιτρέψτε μου να εξηγήσω τι συμβαίνει.

Ως εναλλακτική λύση, αυτό το API βασίζεται σε Node.js ρεύματα . Έτσι, θα διαβάσετε δεδομένα κατ 'απαίτηση από αιτήματα εισοδήματος , θα τα επεξεργαστείτε και θα τα απαντήσετε χρησιμοποιώντας το αντικείμενο απόκρισης .

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

Εκτιμώ πραγματικά το χρόνο που περάσαμε μαζί. Ελπίζω ότι αυτό το περιεχόμενο δεν θα είναι απλώς κείμενο. Ελπίζω ότι θα σας έκανε έναν καλύτερο στοχαστή και έναν καλύτερο προγραμματιστή. Ακολουθήστε με στο Twitter και δείτε το προσωπικό μου blog όπου μοιράζομαι όλο το πολύτιμο περιεχόμενό μου.

Τα λέμε! ;