Kako otkloniti pogreške Node.js aplikacija u Visual Studio Code

Otklanjanje pogrešaka vaše aplikacije Node.js u samom Visual Studio Codeu moguće je i jednostavno. Uređivač VS koda dolazi s ugrađenim programom za ispravljanje pogrešaka koji može otkloniti pogreške bilo koje aplikacije koja cilja na Node.js runtime. To znači da možete debugirati JavaScript ili bilo koji drugi jezik koji se na njega kompajlira (npr. TypeScript).

Ovaj će vas članak provesti kroz korake za otklanjanje pogrešaka vaše aplikacije Node.js u VS Codeu. Naučit ćete kako započeti sesiju ispravljanja pogrešaka, umetati prijelomne točke, priložiti vanjski proces i ispravljati pogreške TypeScript koda pomoću izvornih mapa.

Što vam je potrebno za početak

Prije nego počnete, instalirajte Node.js i VS Code na vašem lokalnom računalu. Najnovija verzija Node.js dostupna je na Node.js službena stranica. Slično, za Visual Studio Code preuzmite najnoviju verziju s

VS kod web stranica. Za upute o kako postaviti VS Code na Windows, pročitajte naš vodič za postavljanje.

Također vam je potreban Node.js projekt. Možete stvoriti jednostavnu Node.js aplikaciju od nule ili koristiti postojeću aplikaciju.

Proces otklanjanja pogrešaka u VS kodu

Pokretanje sesije otklanjanja pogrešaka u uređivaču VS koda prilično je jednostavno. Otvorite datoteku s VS kodom i kliknite Pokreni i ispravi pogreške ikonu na bočnoj traci (ili pritisnite Ctrl + Shift + D na vašoj tipkovnici). Zatim kliknite na Pokreni i ispravi pogreške gumb za početak procesa.

Prema zadanim postavkama, Node.js će pokušati otkriti okruženje za otklanjanje pogrešaka vašeg projekta. Ali ako je automatsko otkrivanje neuspješno, od vas se traži da odaberete pravo okruženje. Za ovaj vodič, to okruženje je Node.js.

Nakon što ste odabrali okruženje, VS Code aktivira debugger i pripaja ga procesu. Svoj rezultat možete vidjeti u KONZOLA ZA DEBUG. Pomoću alatne trake za otklanjanje pogrešaka na vrhu možete iterirati kroz kod, pauzirati izvođenje ili završiti sesiju.

Također imate mogućnost stvaranja konfiguracijske datoteke. The pokretanje.json omogućuje vam konfiguriranje i postavljanje pojedinosti o otklanjanju pogrešaka. Ako vaša skripta zahtijeva argument, navedite te argumente u pokretanje.json datoteka. Za svaku konfiguraciju može se postaviti više opcija:

{ 
"verzija": "0.2.0", 
"konfiguracije": [ 
 { "tip": "čvor", 
"zahtjev": "lansirati", 
"Ime": "Pokreni program", 
"preskoči datoteke": [ "/**" ], 
"program": "${workspaceFolder}\\index.js"
 } 
 ]
}

Također ćete primijetiti pet ploča na lijevoj strani uređivača. Ovi paneli su VARIJABLE, GLEDATI, SKUP POZIVA, UČITANE SKRIPTE, i PRIJELOMI:

Kada ste gotovi s postavljanjem konfiguracije, odaberite i pokrenite program kroz konfiguracijski izbornik.

Priključite vanjski proces

Druga metoda za postavljanje Node.js sesije otklanjanja pogrešaka je pripajanje vanjskog procesa. Pokrenite program sljedećom naredbom:

čvor --inspect index.js

Umetnite -brk zastava poslije --pregledati ako ga želite priložiti prije nego što se program počne izvoditi.

Zatim otvorite birač procesa u VS Codeu. Ovo navodi sve procese dostupne u okruženju Node.js. Za otvaranje alata za odabir pritisnite Ctrl + Shift + P i pronaći Otklanjanje pogrešaka: priložite naredbu Node.js.

Kliknite na naredbu i odaberite pravu opciju za početak postupka otklanjanja pogrešaka.

Stvaranje prijelomne točke

Ako želite pauzirati na određenim točkama u svom programu kako biste pregledali kod, tamo postavite točke prekida. Prijelomne točke možete postaviti gotovo bilo gdje u svom kodu. To uključuje deklaracije varijabli, izraze i komentare. Ali ne možete postaviti prijelomne točke u deklaracijama funkcija.

Stvaranje prijelomne točke prilično je jednostavno. Dok pomičete miš na lijevu stranu brojeva redaka, na svakom retku pojavljuje se crveni krug. Identificirajte broj retka u svom kodu gdje želite umetnuti prijelomnu točku. Zatim kliknite na taj redak da dodate prijelomnu točku:

u PRIJELOMI oknu, pronaći ćete sve prijelomne točke omogućene u vašem projektu. Ovdje ćete upravljati, uređivati ​​i onemogućavati prijelomne točke. Također možete zaustaviti kod kada se izbaci iznimka ili u slučajevima neuhvaćenih iznimaka. To vam omogućuje da provjerite problem prije nego što proces izađe.

Pogledajmo prijelomne točke na djelu. Kliknite na Pokreni ikonu za početak sesije otklanjanja pogrešaka. Program će se zaustaviti na prvoj prijelomnoj točki i dati vrijednost za pregled:

Možete kliknuti na Nastaviti ikonu (ili pritisnite F5) za pomicanje programa na sljedeću prijelomnu točku. To će se nastaviti sve dok ne dođete do kraja programa.

Otklanjanje pogrešaka u TypeScriptu s mapama izvora

Kako Typescript postaje sve popularniji, količina Node.js projekata napisanih u TypeScriptu sigurno će rasti. Srećom, također možete ispravljati pogreške u projektima temeljenim na TypeScriptu pomoću VS koda.

Najprije stvorite a tsconfig.json datoteku u korijenskom direktoriju vašeg projekta (ako već nije stvorena) i omogućite izvorne karte:

{ "Opcije kompilatora": { "sourceMaps": pravi }}

Zatim priložite pokrenuti proces i postavite prijelomne točke u vašoj TypeScript datoteci. Visual Studio Code će pronaći izvorne karte i koristiti ih.

Možete eksplicitno reći VS Code-u gdje pronaći izvorne karte. Da biste to učinili, dodajte izlazne datoteke atribut u konfiguracijskoj datoteci pokretanja i usmjerite ga na točnu lokaciju vaših izvornih mapa:

{ 
"verzija": "0.2.0", 
"konfiguracije": [ { 
"tip": "čvor", 
"zahtjev": "lansirati", 
"Ime": "Pokreni program", 
"preskoči datoteke": [ "/**" ], 
"program": "${workspaceFolder}\\index.js", 
"outFiles": "${workspaceFolder}\\index.js", 
 } 
 ]
}

Ako koristite ts-čvor da biste pokrenuli svoj projekt bez koraka izgradnje, upotrijebite ovo umjesto gornje konfiguracije:

{ 
"verzija": "0.2.0", 
"konfiguracije": [ { 
"tip": "pwa-čvor", 
"zahtjev": "lansirati", 
"Ime": "Pokreni poslužitelj", 
"preskoči datoteke": [ "/**" ], 
"runtimeArgs": [ "-r", "ts-čvor/registar" ], 
"args": [ "${workspaceFolder}/src/server.ts" ] 
 }]
}

Budući da nema atributa programa, runtime args registri ts-čvor kao rukovatelj za TypeScript datoteke. Prvi argument za args je ulazna datoteka za program. Sada možete započeti sesiju otklanjanja pogrešaka. Ako razvijate s vanilla JavaScriptom ili front-end okvirom, također možete debug JavaScript koda u pregledniku.

Ostale značajke u Visual Studio Code

Visual Studio Code moćan je uređivač izvornog koda prepun nevjerojatnih značajki. Pokrili smo VS Code ugrađeni alat za ispravljanje pogrešaka. Također smo demonstrirali kako ga možete koristiti za otklanjanje pogrešaka vaše aplikacije Node.js.

Ali postoji mnogo drugih korisnih značajki u VS Codeu. Iako su vam neki od njih možda poznati, neki bi vam mogli biti potpuno novi. U tom slučaju, moglo bi vas zanimati da naučite o ovim značajkama i kako ih koristiti.