Cum să depanați aplicațiile Node.js în Visual Studio Code

Depanarea aplicației dvs. Node.js în Visual Studio Code este posibilă și simplă. Editorul VS Code vine cu un depanator încorporat capabil să depaneze orice aplicație care vizează runtime-ul Node.js. Aceasta înseamnă că puteți depana JavaScript sau orice alt limbaj care se compilează în el (de exemplu, TypeScript).

Acest articol vă va ghida prin pașii pentru depanarea aplicației dvs. Node.js în VS Code. Veți învăța cum să începeți o sesiune de depanare, să inserați puncte de întrerupere, să atașați un proces extern și să depanați codul TypeScript folosind hărți sursă.

De ce aveți nevoie pentru a începe

Înainte de a începe, instalați atât Node.js, cât și VS Code pe mașina dvs. locală. Cea mai recentă versiune de Node.js este disponibilă pe Node.js site oficial. În mod similar, pentru Visual Studio Code, descărcați cea mai recentă versiune din

Cod VS site-ul web. Pentru instrucțiuni despre cum se configurează VS Code pe Windows, citiți ghidul nostru de configurare.

De asemenea, aveți nevoie de un proiect Node.js. Puteți crea o aplicație simplă Node.js de la zero sau utilizați o aplicație existentă.

Procesul de depanare în VS Code

Pornirea unei sesiuni de depanare în editorul VS Code este destul de simplă. Deschideți fișierul cu VS Code și faceți clic pe Rulați și depanați pictograma din bara laterală (sau apăsați Ctrl + Shift + D pe tastatură). Apoi, faceți clic pe Rulați și depanați butonul pentru a începe procesul.

În mod implicit, Node.js va încerca să descopere mediul de depanare al proiectului dumneavoastră. Dar dacă detectarea automată nu reușește, vă solicită să selectați mediul potrivit. Pentru acest tutorial, acel mediu este Node.js.

După ce ați selectat mediul, VS Code activează depanatorul și îl atașează procesului. Puteți vedea rezultatul dvs. în CONSOLA DE DEBUG. Folosind bara de instrumente de depanare din partea de sus, puteți itera prin cod, puteți întrerupe execuția sau puteți încheia sesiunea.

Aveți și opțiunea de a crea un fișier de configurare. The launch.json fișier vă permite să configurați și să configurați detaliile de depanare. Dacă scriptul dvs. necesită un argument, furnizați aceste argumente în fișierul launch.json fişier. Pot fi setate mai multe opțiuni pentru fiecare configurație:

{ 
"versiune": "0.2.0", 
"configuratii": [ 
 { "tip": "nodul", 
"cerere": "lansa", 
"Nume": „Program de lansare”, 
"skipFiles": [ "/**" ], 
"program": „${workspaceFolder}\\index.js”
 } 
 ]
}

Veți observa, de asemenea, cinci panouri în partea stângă a editorului. Aceste panouri sunt VARIABILE, CEAS, STACK DE APELURI, SCRIPTURI ÎNCĂRCATE, și PUNCTE DE RUPE:

Când ați terminat de configurat, selectați și executați programul prin meniul de configurare.

Atașați un proces extern

O altă metodă pentru configurarea unei sesiuni de depanare Node.js este atașarea unui proces extern. Porniți programul cu următoarea comandă:

nod --inspect index.js

Introduceți -brk steag după --inspecta dacă doriți să-l atașați înainte ca programul să înceapă să ruleze.

Apoi, deschideți selectorul de procese în VS Code. Aceasta listează toate procesele disponibile în mediul Node.js. Pentru a deschide selectorul, apăsați Ctrl + Shift + P și găsiți Depanare: atașați la comanda Node.js.

Faceți clic pe comandă și selectați opțiunea potrivită pentru a începe procesul de depanare.

Crearea unui punct de întrerupere

Dacă doriți să faceți pauză în anumite puncte din program pentru a inspecta codul, setați puncte de întrerupere acolo. Puteți seta puncte de întrerupere aproape oriunde în cod. Aceasta include declarații de variabile, expresii și comentarii. Dar nu puteți seta puncte de întrerupere în declarațiile de funcție.

Crearea unui punct de întrerupere este destul de simplă. Pe măsură ce mutați mouse-ul în partea stângă a numerelor liniilor, pe fiecare linie apare un cerc roșu. Identificați numărul liniei din codul dvs. în care doriți să introduceți punctul de întrerupere. Apoi faceți clic pe acea linie pentru a adăuga punctul de întrerupere:

În PUNCTE DE RUPE panoul, veți găsi toate punctele de întrerupere activate în proiectul dvs. Aici veți gestiona, edita și dezactiva punctele de întrerupere. Puteți, de asemenea, să opriți codul atunci când se afișează o excepție sau în cazurile de excepții neprinse. Acest lucru vă permite să inspectați problema înainte de încheierea procesului.

Să vedem punctele de întrerupere în acțiune. Apasă pe Lansa pictograma pentru a începe sesiunea de depanare. Programul se va întrerupe la primul punct de întrerupere și va da valoarea pentru inspecție:

Puteți face clic pe Continua pictograma (sau apăsați F5) pentru a muta programul la următorul punct de întrerupere. Acest lucru va continua până când ajungeți la sfârșitul programului.

Depanare TypeScript cu hărți sursă

Pe măsură ce Typescript continuă să devină mai popular, cantitatea de proiecte Node.js scrise în TypeScript este neapărat să crească. Din fericire, puteți depana și proiecte bazate pe TypeScript cu VS Code.

Mai întâi, creați un tsconfig.json fișier în directorul rădăcină al proiectului (dacă nu este deja creat) și activați hărțile sursă:

{ "compilerOptions": { „sursă hărți”: Adevărat }}

Apoi, atașați procesul de rulare și setați punctele de întrerupere în fișierul TypeScript. Visual Studio Code va găsi hărțile sursă și le va folosi.

Puteți spune în mod explicit VS Code unde să găsească hărțile sursă. Pentru a face acest lucru, adăugați un outFiles în fișierul de configurare de lansare și indicați-l către locația exactă a hărților sursă:

{ 
"versiune": "0.2.0", 
"configuratii": [ { 
"tip": "nodul", 
"cerere": "lansa", 
"Nume": „Program de lansare”, 
"skipFiles": [ "/**" ], 
"program": „${workspaceFolder}\\index.js”, 
"outFiles": „${workspaceFolder}\\index.js”, 
 } 
 ]
}

Dacă utilizați ts-nod pentru a rula proiectul fără un pas de construire, utilizați acest lucru în loc de configurația de mai sus:

{ 
"versiune": "0.2.0", 
"configuratii": [ { 
"tip": "pwa-node", 
"cerere": "lansa", 
"Nume": „Lansați serverul”, 
"skipFiles": [ "/**" ], 
"runtimeArgs": [ "-r", "ts-node/registru" ], 
"args": [ „${workspaceFolder}/src/server.ts” ] 
 }]
}

Deoarece nu există un atribut de program, runtime argumente registre ts-nod ca handler pentru fișierele TypeScript. Primul argument la argumente este fișierul de intrare pentru program. Acum puteți începe sesiunea de depanare. Dacă dezvoltați cu vanilla JavaScript sau un cadru front-end, puteți, de asemenea depanați codul JavaScript în browser.

Alte caracteristici în Visual Studio Code

Visual Studio Code este un editor de cod sursă puternic, plin de funcții uimitoare. Am acoperit instrumentul de depanare încorporat al VS Code. De asemenea, am demonstrat cum îl puteți folosi pentru a vă depana aplicația Node.js.

Dar există o mulțime de alte funcții utile în VS Code. Deși s-ar putea să fii familiarizat cu unele dintre ele, unele ar putea fi complet noi pentru tine. În acest caz, v-ar putea interesa să aflați despre aceste funcții și despre cum să le utilizați.