Nincs szüksége külső hibakereső eszközre. A Node.js alkalmazásait közvetlenül a VS Code szerkesztőben végezheti el, annak beépített eszközével.

A Node.js alkalmazás hibakeresése a Visual Studio Code-ban lehetséges és egyszerű. A VS Code szerkesztő beépített hibakeresővel rendelkezik, amely képes minden olyan alkalmazás hibakeresésére, amely a Node.js futási környezetet célozza meg. Ez azt jelenti, hogy hibakeresést végezhet a JavaScriptben vagy bármely más nyelven, amely arra fordítható (pl. TypeScript).

Ez a cikk végigvezeti a Node.js alkalmazás hibakeresésének lépésein a VS Code-ban. Megtanulja, hogyan indíthat el hibakeresési munkamenetet, hogyan illeszthet be töréspontokat, hogyan csatolhat külső folyamatot, és hogyan lehet hibakeresni a TypeScript-kódot a forrásleképezések segítségével.

Amire szüksége van a kezdéshez

Mielőtt elkezdené, telepítse a Node.js-t és a VS Code-ot is a helyi számítógépére. A Node.js legújabb verziója elérhető a Node.js hivatalos honlapján. Hasonlóképpen a Visual Studio Code esetében töltse le a legújabb verziót a

instagram viewer
VS kód weboldal. Útmutatásért hogyan kell beállítani a VS kódot Windows rendszeren, olvassa el beállítási útmutatónkat.

Szüksége van egy Node.js projektre is. Létrehozhat egy egyszerű Node.js alkalmazást a semmiből vagy használjon egy meglévő alkalmazást.

A hibakeresési folyamat a VS kódban

A hibakeresési munkamenet indítása a VS Code szerkesztőben meglehetősen egyszerű. Nyissa meg a fájlt a VS Code segítségével, és kattintson a gombra Futtatás és hibakeresés ikont az oldalsávon (vagy nyomja meg Ctrl + Shift + D a billentyűzeten). Ezután kattintson a Futtatás és hibakeresés gombot a folyamat elindításához.

Alapértelmezés szerint a Node.js megpróbálja kitalálni a projekt hibakeresési környezetét. Ha azonban az automatikus felismerés sikertelen, akkor a megfelelő környezet kiválasztására kéri. Ebben az oktatóanyagban ez a környezet a Node.js.

A környezet kiválasztása után a VS Code aktiválja a hibakeresőt, és csatolja a folyamathoz. A kimenetet a HIBAKERESÉS KONZOL. A tetején található hibakereső eszköztár segítségével ismételheti a kódot, szüneteltetheti a végrehajtást vagy befejezheti a munkamenetet.

Lehetősége van konfigurációs fájl létrehozására is. A launch.json fájl segítségével konfigurálhatja és beállíthatja a hibakeresési részleteket. Ha a szkriptnek argumentumra van szüksége, adja meg ezeket az argumentumokat a launch.json fájlt. Minden konfigurációnál több lehetőség is beállítható:

{ 
"változat": "0.2.0", 
"konfigurációk": [ 
 { "típus": "csomópont", 
"kérés": "dob", 
"név": "Program indítása", 
"skipFiles": [ "/**" ], 
"program": "${workspaceFolder}\\index.js"
 } 
 ]
}

A szerkesztő bal oldalán öt panel is látható. Ezek a panelek VÁLTOZÓK, NÉZ, HÍVÁSI LISTA, BETÖLTÖTT SZkriptek, és TÖRÉSPONTOK:

Ha végzett a konfiguráció beállításával, válassza ki és futtassa a programot a konfigurációs menüben.

Külső folyamat csatolása

A Node.js hibakereső munkamenet beállításának másik módja egy külső folyamat csatolása. Indítsa el a programot a következő paranccsal:

node --inspect index.js

Helyezze be a -brk zászló után -- vizsgálja meg ha a program futása előtt szeretné csatolni.

Ezután nyissa meg a folyamatválasztót a VS Code-ban. Ez felsorolja a Node.js környezetben elérhető összes folyamatot. A kiválasztó megnyitásához nyomja meg a gombot Ctrl + Shift + P és megtalálja a Hibakeresés: Csatolás a Node.js parancshoz.

Kattintson a parancsra, és válassza ki a megfelelő lehetőséget a hibakeresési folyamat elindításához.

Töréspont létrehozása

Ha a program bizonyos pontjain szünetet szeretne tartani a kód ellenőrzéséhez, állítson be ott töréspontokat. A kódban szinte bárhol beállíthat töréspontokat. Ez magában foglalja a változók deklarációit, kifejezéseket és megjegyzéseket. De nem lehet töréspontokat beállítani a függvénydeklarációkban.

A töréspont létrehozása meglehetősen egyszerű. Ahogy az egeret a sorszámok bal oldalára viszi, minden soron piros kör jelenik meg. Határozza meg a sor számát a kódban, amelybe be szeretné szúrni a töréspontot. Ezután kattintson erre a sorra a töréspont hozzáadásához:

Ban,-ben TÖRÉSPONTOK panelen megtalálja a projektben engedélyezett összes töréspontot. Itt kezelheti, szerkesztheti és letilthatja a töréspontokat. A kódot akkor is leállíthatja, ha kivétel jelentkezik, vagy nem elkapott kivételek esetén. Ez lehetővé teszi a probléma vizsgálatát a folyamat befejezése előtt.

Lássuk a töréspontokat működés közben. Kattints a Dob ikonra a hibakeresési munkamenet elindításához. A program az első töréspontnál megáll, és az ellenőrzéshez szükséges értéket adja meg:

Kattintson a Folytatni ikonra (vagy nyomja meg az F5 billentyűt), hogy a programot a következő töréspontra helyezze. Ez addig folytatódik, amíg meg nem érkezik a program végére.

TypeScript hibakeresés forrástérképekkel

Ahogy a Typescript egyre népszerűbbé válik, a TypeScriptben írt Node.js projektek száma biztosan növekedni fog. Szerencsére a TypeScript-alapú projekteket is hibakeresheti a VS Code segítségével.

Először hozzon létre a tsconfig.json fájlt a projekt gyökérkönyvtárába (ha még nincs létrehozva), és engedélyezze a forrásleképezéseket:

{ "compilerOptions": { "forrástérképek": igaz }}

Ezután csatolja a futó folyamatot, és állítsa be a töréspontokat a TypeScript-fájlban. A Visual Studio Code megtalálja a forrástérképeket, és felhasználja azokat.

Kifejezetten megmondhatja a VS Code-nak, hogy hol találja meg a forrástérképeket. Ehhez adjon hozzá egy outFiles attribútumot az indítási konfigurációs fájlban, és mutasson rá a forrástérképek pontos helyére:

{ 
"változat": "0.2.0", 
"konfigurációk": [ { 
"típus": "csomópont", 
"kérés": "dob", 
"név": "Program indítása", 
"skipFiles": [ "/**" ], 
"program": "${workspaceFolder}\\index.js", 
"outFiles": "${workspaceFolder}\\index.js", 
 } 
 ]
}

Ha használsz ts-csomópont a projekt összeállítási lépés nélküli futtatásához használja ezt a fenti konfiguráció helyett:

{ 
"változat": "0.2.0", 
"konfigurációk": [ { 
"típus": "pwa-node", 
"kérés": "dob", 
"név": "Kiszolgáló indítása", 
"skipFiles": [ "/**" ], 
"runtimeArgs": [ "-r", "ts-node/register" ], 
"args": [ "${workspaceFolder}/src/server.ts" ] 
 }]
}

Mivel nincs programattribútum, futásidejű args regisztereket ts-csomópont mint a TypeScript fájlok kezelője. Az első érv, hogy args a program belépési fájlja. Most elindíthatja a hibakeresési munkamenetet. Ha vanilla JavaScript-szel vagy front-end keretrendszerrel fejleszt, azt is megteheti hibakeresés a JavaScript kódban a böngészőben.

A Visual Studio Code egyéb szolgáltatásai

A Visual Studio Code egy erőteljes forráskód-szerkesztő, amely lenyűgöző funkciókkal rendelkezik. Kitértünk a VS Code beépített hibakereső eszközére. Azt is bemutattuk, hogyan használhatja a Node.js alkalmazás hibakeresésére.

De sok más hasznos funkció is van a VS Code-ban. Bár néhányat ismerhet, néhány teljesen új lehet az Ön számára. Ebben az esetben érdemes lehet megismerni ezeket a funkciókat és használatukat.