Cum să depanați codul Node.js folosind mai multe instrumente

Node.js este un runtime JavaScript bazat pe același motor V8 folosit în browserul Google Chrome. Este adesea folosit pentru a construi aplicații multiplatforme pe partea de server și terminale. Node.js a devenit din ce în ce mai popular în ultimul deceniu, deoarece este ușor de instalat, practic de utilizat, rapid și permite dezvoltatorilor web la nivelul clientului să-și folosească abilitățile în altă parte.

Cu toate acestea, dezvoltarea software-ului rămâne o sarcină complexă, iar codul dvs. Node.js va eșua la un moment dat. Acest tutorial demonstrează diverse instrumente pentru a ajuta la depanarea aplicațiilor și pentru a găsi cauza unei probleme.

Să ne scufundăm direct.

Prezentare generală de depanare

„Depanare” este numele dat diferitelor mijloace de remediere a defectelor software. Remedierea unei erori este adesea simplă. Găsirea cauzei bug-ului poate fi considerabil mai complexă și poate implica multe ore de zgârieturi de cap.

Următoarele secțiuni descriu trei tipuri generale de erori pe care le veți întâlni.

Erori de sintaxă

Codul dvs. nu respectă regulile limbii - de exemplu, atunci când omiteți o paranteză de închidere sau scrieți greșit o declarație precum console.lag(x) .

Un editor de cod bun poate ajuta la identificarea problemelor comune prin:

• Declarații valide sau nevalide cu coduri de culori
• Variabile de verificare a tipului
• Funcția de completare automată și numele variabilelor
• Evidențierea parantezelor potrivite
• Blocuri de cod cu indentare automată
• Detectarea codului inaccesibil
• Refactorizarea funcțiilor dezordonate

Editorii gratuiti, cum ar fi VS Code și Atom, au un suport excelent pentru Node.js, JavaScript și TypeScript (care se transpilează în JavaScript). Problemele de sintaxă de bază pot fi de obicei identificate înainte de a salva și de a testa codul.

Un linter de cod precum ESLint va raporta, de asemenea, erori de sintaxă, indentare greșită și variabile nedeclarate. ESLint este un instrument Node.js pe care îl puteți instala la nivel global cu:

 npm i eslint -g

Puteți verifica fișierele JavaScript din linia de comandă folosind:

 eslint mycode.js

…dar este mai ușor să utilizați un plugin de editor, cum ar fi ESLint pentru VS Code sau linter-eslint pentru Atom, care validează automat codul pe măsură ce tastați:

Erori logice

Codul dvs. rulează, dar nu funcționează așa cum vă așteptați. De exemplu, un utilizator nu este deconectat atunci când îl solicită; un raport arată cifre incorecte; datele nu sunt salvate complet într-o bază de date; etc.

Erorile logice pot fi cauzate de:

• Folosind variabila greșită
• Condiții incorecte, de exemplu if (a > 5) mai degrabă decât if (a < 5)
• Calculele care nu țin cont de prioritatea operatorului, de exemplu, 1+2*3 au ca rezultat 7 în loc de 9.

Este inevitabil: codul tău Node.js va eșua la un moment dat. Vedeți ce instrumente puteți utiliza pentru a depana aplicațiile și pentru a găsi cauza unei probleme chiar aici Faceți clic pentru a Tweet

Erori de rulare (sau de execuție).

O eroare devine evidentă numai atunci când aplicația este executată, ceea ce duce adesea la o blocare. Erorile de rulare pot fi cauzate de:

• Împărțirea la o variabilă care a fost setată la zero
• Încercarea de a accesa un element de matrice care nu există
• Încercarea de a scrie într-un fișier numai pentru citire

Erorile de logică și de rulare sunt mai greu de detectat, deși următoarele tehnici de dezvoltare pot ajuta:

1. Utilizați dezvoltarea bazată pe teste: TTD vă încurajează să scrieți teste înainte ca o funcție să fie dezvoltată, de exemplu, X este returnat de la funcțiaY când Z este transmis ca parametru. Aceste teste sunt efectuate în timpul dezvoltării inițiale și al actualizărilor ulterioare pentru a se asigura că codul continuă să funcționeze conform așteptărilor.
2. Utilizați un sistem de urmărire a problemelor: nu există nimic mai rău decât un e-mail care susține „Software-ul dvs. nu funcționează” ! Sistemele de urmărire a problemelor vă permit să înregistrați probleme specifice, să documentați pașii de reproducere, să determinați prioritățile, să atribuiți dezvoltatori și să urmăriți progresul remedierii.
3. Utilizați controlul sursei: un sistem de control al sursei, cum ar fi Git, vă va ajuta să faceți copii de siguranță ale codului, să gestionați revizuirile și să identificați unde a fost introdusă o eroare. Arhivele online, inclusiv Github și Bitbucket, oferă spațiu și instrumente gratuite pentru proiecte mai mici sau open-source.

Veți întâlni în continuare erori Node.js, dar următoarele secțiuni descriu modalități de a localiza această eroare evazivă.

Setați variabilele de mediu Node.js corespunzătoare

Variabilele de mediu setate în sistemul de operare gazdă pot controla setările aplicației și modulelor Node.js. Cel mai comun este NODE_ENV , care de obicei este setat la dezvoltare la depanare sau la producție atunci când rulează pe un server live. Setați variabilele de mediu pe macOS sau Linux cu comanda:

 NODE_ENV=development

sau la promptul de comandă (clasic) Windows:

 set NODE_ENV=development

sau Windows Powershell:

 $env:NODE_ENV="development"

În cadrul popular Express.js, setarea NODE_ENV la dezvoltare dezactivează stocarea în cache a fișierelor șablon și emite mesaje de eroare detaliate, care ar putea fi utile la depanare. Alte module pot oferi caracteristici similare și puteți adăuga o condiție NODE_ENV la aplicațiile dvs., de ex

 // running in development mode? const devMode = (process.env.NODE_ENV !== 'production'); if (devMode) { console.log('application is running in development mode'); }

De asemenea, puteți utiliza metoda util.debuglog a lui Node pentru a afișa în mod condiționat mesaje de eroare, de ex

 import { debuglog } from 'util'; const myappDebug = debuglog('myapp'); myappDebug('log something');

Această aplicație va afișa mesajul de jurnal numai atunci când NODE_DEBUG este setat la myapp sau un wildcard, cum ar fi * sau my*.

Utilizați opțiunile pentru linia de comandă Node.js

Scripturile de nod sunt de obicei lansate cu nodul urmat de numele scriptului de intrare:

 node app.js

De asemenea, puteți seta opțiuni de linie de comandă pentru a controla diferite aspecte ale timpului de execuție. Indicatoarele utile pentru depanare includ:

• --check
  verificați sintaxa script-ul fără a fi executat
• --trace-warnings
  emite o urmărire a stivei atunci când promisiunile JavaScript nu se rezolvă sau nu se resping
• --enable-source-maps
  afișați hărțile sursă atunci când utilizați un transpiler, cum ar fi TypeScript
• --throw-deprecation
  avertizează când sunt utilizate funcții Node.js depreciate
• --redirect-warnings=file
  scoateți avertismente într-un fișier, mai degrabă decât stderr
• --trace-exit
  scoate o urmărire a stivei atunci când este apelat process.exit() .

Trimiteți mesaje către consolă

Trimiterea unui mesaj de consolă este una dintre cele mai simple moduri de a depana o aplicație Node.js:

 console.log(`someVariable: ${ someVariable }`);

Puțini dezvoltatori realizează că există multe alte metode de consolă:

console.log() acceptă și o listă de valori separate prin virgulă:

 let x = 123; console.log('x:', x); // x: 123

…deși destructurarea ES6 oferă rezultate similare cu mai puțin efort:

 console.log({ x }); // { x: 123 }

Comanda console.dir() pretty-tipărește proprietățile obiectului în același mod ca util.inspect():

 console.dir(myObject, { depth: null, color: true });

Controversa pe consolă

Unii dezvoltatori susțin că nu ar trebui să utilizați niciodată console.log() deoarece:

• Schimbați codul și este posibil să modificați ceva sau să uitați să îl eliminați și
• Nu este nevoie când există opțiuni de depanare mai bune.

Nu credeți pe nimeni care pretinde că nu folosește niciodată console.log() ! Înregistrarea este rapidă și murdară, dar toată lumea o folosește la un moment dat. Utilizați orice instrument sau tehnică preferați. Remedierea unei erori este mai importantă decât metoda pe care o adoptați pentru a-l găsi.

Utilizați un sistem de înregistrare terță parte

Sistemele de jurnalizare de la terțe părți oferă caracteristici mai sofisticate, cum ar fi niveluri de mesagerie, nivel de verbozitate, sortare, ieșire de fișiere, profilare, raportare și multe altele. Soluțiile populare includ cabină, loglevel, morgan, pino, signale, storyboard, tracer și winston.

Utilizați V8 Inspector

Motorul JavaScript V8 oferă un client de depanare pe care îl puteți utiliza în Node.js. Porniți o aplicație folosind node inspect, de ex

 node inspect app.js

Depanatorul se oprește la prima linie și afișează un prompt de depanare>:

 $ node inspect .\mycode.js < Debugger listening on ws://127.0.0.1:9229/143e23fb < For help, see: https://nodejs.org/en/docs/inspector < ok < Debugger attached. < Break on start in mycode.js:1 > 1 const count = 10; 2 3 for (i = 0; i < counter; i++) { debug>

Introduceți ajutor pentru a vizualiza o listă de comenzi. Puteți parcurge aplicația introducând:

• cont sau c : continua execuția
• next sau n : rulați următoarea comandă
• step sau s : pas într-o funcție care este apelată
• out sau o : ieșiți dintr-o funcție și reveniți la instrucțiunea de apelare
• pauză : întrerupe codul de rulare
• watch('myvar') : urmăriți o variabilă
• setBreakPoint() sau sb() : setează un punct de întrerupere
• restart : reporniți scriptul
• .exit sau Ctrl | Cmd + D : ieșiți din depanator

Desigur, această opțiune de depanare necesită timp și este greoaie. Utilizați-l numai atunci când nu există altă opțiune, cum ar fi atunci când rulați cod pe un server la distanță și nu vă puteți conecta din altă parte sau instalați software suplimentar.

Utilizați browserul Chrome pentru a depana codul Node.js

Opțiunea de inspecție Node.js folosită mai sus pornește un server Web Socket care ascultă pe portul localhost 9229. Pornește, de asemenea, un client de depanare bazat pe text, dar este posibil să se utilizeze clienți grafici - cum ar fi cel încorporat în Google Chrome și bazat pe Chrome browsere precum Chromium, Edge, Opera, Vivaldi și Brave.

Pentru a depana o aplicație web tipică, porniți-o cu opțiunea –inspect pentru a activa serverul Web Socket al depanatorului V8:

 node --inspect index.js

Notă:

• Se presupune că index.js este scriptul de intrare al aplicației.
• Asigurați-vă că utilizați --inspect cu liniute duble pentru a vă asigura că nu porniți clientul de depanare bazat pe text.
• Puteți utiliza nodemon în loc de node dacă doriți să reporniți automat aplicația atunci când un fișier este schimbat.

În mod implicit, depanatorul va accepta numai conexiuni de intrare de la mașina locală. Dacă rulați aplicația pe alt dispozitiv, mașină virtuală sau container Docker, utilizați:

 node --inspect=0.0.0.0:9229 index.js

De asemenea, puteți utiliza --inspect-brk în loc de --inspect pentru a opri procesarea (setați un punct de întrerupere) pe prima linie, astfel încât să puteți parcurge codul de la început.

Deschideți un browser bazat pe Chrome și introduceți chrome://inspect în bara de adrese pentru a vedea dispozitivele locale și din rețea:

Dacă aplicația dvs. Node.js nu apare ca țintă la distanță , fie:

• Faceți clic pe Deschideți instrumente dedicate DevTools pentru Node și alegeți adresa și portul sau
• Bifați Descoperiți ținte de rețea , faceți clic pe Configurare , apoi adăugați adresa IP și portul dispozitivului pe care rulează.

Faceți clic pe linkul de inspectare al țintei pentru a lansa clientul de depanare DevTools. Acest lucru ar trebui să fie familiar pentru oricine a folosit DevTools pentru depanarea codului pe partea clientului:

Comutați la panoul Surse . Puteți deschide orice fișier apăsând Cmd | Ctrl + P și introducerea numelui său de fișier (cum ar fi index.js).

Cu toate acestea, este mai ușor să adăugați folderul de proiect la spațiul de lucru. Acest lucru vă permite să încărcați, să editați și să salvați fișiere direct din DevTools (dacă credeți că este o idee bună este o altă problemă!)

1. Faceți clic pe + Adăugați folderul în spațiul de lucru
2. Selectați locația proiectului dvs. Node.js
3. Apăsați de acord pentru a permite modificările fișierelor

Acum puteți încărca fișiere din arborele de directoare din stânga:

Faceți clic pe orice număr de linie pentru a seta un punct de întrerupere notat cu un marcator albastru.

Depanarea se bazează pe puncte de întrerupere . Acestea specifică unde depanatorul ar trebui să întrerupă execuția programului și să arate starea curentă a programului (variabile, stiva de apeluri etc.)

Puteți defini orice număr de puncte de întrerupere în interfața cu utilizatorul. O altă opțiune este să plasați un depanator; declarație în codul dvs., care se oprește atunci când este atașat un depanator.

Încărcați și utilizați aplicația dvs. web pentru a ajunge la declarația în care este setat un punct de întrerupere. În exemplul de aici, http://localhost:3000/ este deschis în orice browser, iar DevTools va opri execuția pe linia 44:

Panoul din dreapta arată:

• Un rând de pictograme de acțiune (vezi mai jos).
• Un panou de urmărire vă permite să monitorizați variabilele făcând clic pe pictograma + și introducând numele acestora.
• Un panou Puncte de întrerupere arată o listă cu toate punctele de întrerupere și permite activarea sau dezactivarea acestora.
• Un panou Scop arată starea tuturor variabilelor locale, modulare și globale. Veți inspecta acest panou cel mai des.
• Un panou de stivă de apeluri arată ierarhia funcțiilor apelate pentru a ajunge la acest punct.

Un rând de pictograme de acțiune este afișat deasupra Întrerupt la punctul de întrerupere :

De la stânga la dreapta, acestea efectuează următoarele acțiuni:

• reluați execuția : Continuați procesarea până la următorul punct de întrerupere
• pas peste : Executați următoarea comandă, dar rămâneți în blocul de cod curent - nu treceți la nicio funcție pe care o apelează
• pas în : Executați următoarea comandă și treceți la orice funcție după cum este necesar
• ieșiți : Continuați procesarea până la sfârșitul funcției și reveniți la comanda de apelare
• pas : Similar cu pas în , cu excepția faptului că nu va trece la funcțiile asincrone
• dezactivați toate punctele de întrerupere
• pauză la excepții : opriți procesarea când apare o eroare.

Puncte de întrerupere condiționate

Uneori este necesar să exerciți un pic mai mult control asupra punctelor de întrerupere. Imaginează-ți că ai o buclă care a finalizat 1.000 de iterații, dar ești interesat doar de starea ultimei:

 for (let i = 0; i < 1000; i++) { // set breakpoint here }

În loc să faceți clic pe reluați execuția de 999 de ori, puteți face clic dreapta pe linie, alegeți Adăugare punct de întrerupere condiționat și introduceți o condiție cum ar fi i = 999 :

Chrome arată punctele de întrerupere condiționate în galben și nu în albastru. În acest caz, punctul de întrerupere este declanșat doar la ultima iterație a buclei.

Log Points

Punctele de înregistrare implementează în mod eficient console.log() fără niciun cod! O expresie poate fi scoasă când codul execută orice linie, dar nu oprește procesarea, spre deosebire de un punct de întrerupere.

Pentru a adăuga un punct de log, faceți clic dreapta pe orice linie, alegeți Adăugare punct de log și introduceți o expresie, de exemplu 'loop counter i', i :

Consola DevTools scoate loop counter i: 0 la loop counter i: 999 în exemplul de mai sus.

Utilizați VS Code pentru a depana aplicațiile Node.js

VS Code, sau Visual Studio Code, este un editor de cod gratuit de la Microsoft, care a devenit popular printre dezvoltatorii web. Aplicația este disponibilă pentru Windows, macOS și Linux și este dezvoltată folosind tehnologii web în cadrul Electron.

VS Code acceptă Node.js și are un client de depanare încorporat. Majoritatea aplicațiilor pot fi depanate fără nicio configurație; editorul va porni automat serverul și clientul de depanare.

Deschideți fișierul de pornire (cum ar fi index.js), activați panoul Run and Debug , faceți clic pe butonul Run and Debug și alegeți mediul Node.js. Faceți clic pe orice linie pentru a activa un punct de întrerupere afișat ca pictogramă cerc roșu. Apoi, deschideți aplicația într-un browser ca înainte - VS Code oprește execuția când este atins punctul de întrerupere:

Panourile Variabile , Urmărire , Stack de apeluri și Puncte de întrerupere sunt similare cu cele afișate în Chrome DevTools . Panoul Scripturi încărcate arată ce scripturi au fost încărcate, deși multe sunt interne Node.js.

Bara de instrumente a pictogramelor de acțiune vă permite să:

• reluați execuția : Continuați procesarea până la următorul punct de întrerupere
• pas peste : Executați următoarea comandă, dar rămâneți în funcția curentă - nu treceți la nicio funcție pe care o apelează
• pas în : Executați următoarea comandă și accesați orice funcție pe care o apelează
• ieșiți : Continuați procesarea până la sfârșitul funcției și reveniți la comanda de apelare
• reporniți aplicația și depanatorul
• opriți aplicația și depanatorul

La fel ca Chrome DevTools, puteți face clic dreapta pe orice linie pentru a adăuga puncte de întrerupere condiționate și puncte de jurnal .

Pentru mai multe informații, consultați Depanarea în Visual Studio Code.

Configurație avansată de depanare VS Code

Poate fi necesară o configurare suplimentară VS Code dacă doriți să depanați codul pe un alt dispozitiv, o mașină virtuală sau dacă doriți să utilizați opțiuni de lansare alternative, cum ar fi nodemon.

VS Code stochează configurațiile de depanare într-un fișier launch.json într-un director .vscode din proiectul dvs. Deschideți panoul Run and Debug , faceți clic pe creați un fișier launch.json și alegeți mediul Node.js pentru a genera acest fișier. Este oferit un exemplu de configurare:

Orice număr de setări de configurare pot fi definite ca obiecte în matricea "configurations" . Faceți clic pe Adăugare configurație... și selectați o opțiune adecvată.

O configurație individuală Node.js poate:

1. Lansați un proces în sine, sau
2. Atașați-vă la un server Web Socket de depanare, care poate rula pe o mașină de la distanță sau pe un container Docker.

De exemplu, pentru a defini o configurație nodemon, selectați Node.js: Nodemon Setup și modificați scriptul de intrare „program”, dacă este necesar:

 { // custom configuration "version": "0.2.0", "configurations": [ { "console": "integratedTerminal", "internalConsoleOptions": "neverOpen", "name": "nodemon", "program": "${workspaceFolder}/index.js", "request": "launch", "restart": true, "runtimeExecutable": "nodemon", "skipFiles": [ "<node_internals>/**" ], "type": "pwa-node" } ] }

Salvați fișierul launch.json și nodemon („numele”) de configurare apare în lista derulantă din partea de sus a panoului Run and Debug . Faceți clic pe pictograma verde Run pentru a începe să utilizați configurația respectivă și lansați aplicația folosind nodemon:

Ca și înainte, puteți adăuga puncte de întrerupere, puncte de întrerupere condiționate și puncte de înregistrare. Principala diferență este că nodemon vă va reporni automat serverul atunci când un fișier este modificat.

Pentru mai multe informații, consultați Configurațiile VS Code Launch.

Următoarele extensii VS Code vă pot ajuta, de asemenea, să depanați codul găzduit în medii de server izolate sau la distanță:

• La distanță — Containere: Conectați-vă la aplicațiile care rulează în containerele Docker
• La distanță — SSH: Conectați-vă la aplicațiile care rulează pe un server la distanță
• La distanță — WSL: Conectați-vă la aplicațiile care rulează pe subsistemul Windows pentru Linux (WSL).

Alte opțiuni de depanare Node.js

Ghidul de depanare Node.js oferă sfaturi pentru o serie de editori de text și IDE-uri, inclusiv Visual Studio, JetBrains WebStorm, Gitpod și Eclipse. Atom oferă o extensie de depanare a nodurilor, care integrează depanatorul Chrome DevTools în editor.

Odată ce aplicația dvs. este live, puteți lua în considerare utilizarea serviciilor comerciale de depanare, cum ar fi LogRocket și Sentry.io, care pot înregistra și reda erorile client și server întâlnite de utilizatori reali.

Aveți nevoie de ajutor pentru depanarea aplicațiilor? Începeți de aici Faceți clic pentru a trimite un Tweet

rezumat

Din punct de vedere istoric, depanarea JavaScript a fost dificilă, dar au existat îmbunătățiri uriașe în ultimul deceniu. Alegerea este la fel de bună – dacă nu mai bună – decât cele oferite pentru alte limbi.

Utilizați orice instrument este practic pentru a localiza o problemă. Nu este nimic în neregulă cu console.log() pentru căutarea rapidă a erorilor, dar Chrome DevTools sau VS Code pot fi de preferat pentru probleme mai complexe. Instrumentele vă pot ajuta să creați un cod mai robust și veți petrece mai puțin timp pentru remedierea erorilor.

Pe ce practică de depanare Node.js jurați? Distribuie în secțiunea de comentarii de mai jos!