Как да отстранявате грешки в Node.js приложения в Visual Studio Code

Дебъгването на вашето приложение Node.js в самия Visual Studio Code е възможно и лесно. Редакторът на VS Code идва с вграден дебъгер, способен да дебъгва всяко приложение, което е насочено към Node.js runtime. Това означава, че можете да отстранявате грешки в JavaScript или всеки друг език, който се компилира към него (напр. TypeScript).

Тази статия ще ви преведе през стъпките за отстраняване на грешки във вашето Node.js приложение във VS Code. Ще научите как да стартирате сесия за отстраняване на грешки, да вмъкнете точки на прекъсване, да прикачите външен процес и да отстраните грешки в TypeScript кода с помощта на изходни карти.

Какво ви е необходимо, за да започнете

Преди да започнете, инсталирайте Node.js и VS Code на вашата локална машина. Най-новата версия на Node.js е достъпна на Node.js

официален сайт. По същия начин за Visual Studio Code изтеглете най-новата версия от VS код уебсайт. За инструкции относно как да настроите VS Code на Windows, прочетете нашето ръководство за настройка.

Имате нужда и от проект Node.js. Можете да създадете просто Node.js приложение от нулата или използвайте съществуващо приложение.

Процесът на отстраняване на грешки във VS Code

Стартирането на сесия за отстраняване на грешки в редактора на VS Code е доста лесно. Отворете файла с VS Code и щракнете върху Стартирайте и отстранете грешки икона в страничната лента (или натиснете Ctrl + Shift + D на вашата клавиатура). След това щракнете върху Стартирайте и отстранете грешки бутон за стартиране на процеса.

По подразбиране Node.js ще се опита да разбере средата за отстраняване на грешки на вашия проект. Но ако автоматичното откриване е неуспешно, то ви подканва да изберете правилната среда. За този урок тази среда е Node.js.

След като сте избрали средата, VS Code активира дебъгера и го прикачва към процеса. Можете да видите резултата си в КОНЗОЛА ЗА ОТСТРАНЯВАНЕ НА ГРЕШКИ. Използвайки лентата с инструменти за отстраняване на грешки в горната част, можете да преминете през кода, да поставите на пауза изпълнението или да прекратите сесията.

Освен това имате възможност да създадете конфигурационен файл. The launch.json файл ви позволява да конфигурирате и настройвате подробности за отстраняване на грешки. Ако вашият скрипт изисква аргумент, предоставете тези аргументи в launch.json файл. Множество опции могат да бъдат зададени за всяка конфигурация:

{ 
"версия": "0.2.0", 
"конфигурации": [ 
 { "Тип": "възел", 
"заявка": "стартирам", 
"име": "Стартира програма", 
"пропускане на файлове": [ "/**" ], 
"програма": "${workspaceFolder}\\index.js"
 } 
 ]
}

Ще забележите и пет панела от лявата страна на редактора. Тези панели са ПРОМЕНЛИВИ, ГЛЕДАМ, СТЕК ЗА ОБАЖДАНЕ, ЗАРЕДЕНИ СКРИПТОВЕ, и ТОЧКИ НА ПРЕПАРАТИ:

Когато приключите с настройването на конфигурацията, изберете и изпълнете програмата през менюто за конфигурация.

Прикачете външен процес

Друг метод за настройка на Node.js сесия за отстраняване на грешки е чрез прикачване на външен процес. Стартирайте програмата със следната команда:

възел --inspect index.js

Поставете -brk флаг след --проверявам ако искате да го прикачите, преди програмата да започне да работи.

След това отворете инструмента за избор на процес във VS Code. Това изброява всички процеси, налични в средата Node.js. За да отворите инструмента за избор, натиснете Ctrl + Shift + P и намерете Отстраняване на грешки: Прикачете към команда Node.js.

Щракнете върху командата и изберете правилната опция, за да стартирате процеса на отстраняване на грешки.

Създаване на точка на прекъсване

Ако искате да направите пауза в определени точки от вашата програма, за да проверите кода, задайте точки на прекъсване там. Можете да зададете точки на прекъсване почти навсякъде във вашия код. Това включва декларации на променливи, изрази и коментари. Но не можете да задавате точки на прекъсване в декларациите на функциите.

Създаването на точка на прекъсване е доста лесно. Когато преместите мишката от лявата страна на номерата на редовете, на всеки ред се появява червен кръг. Идентифицирайте номера на реда във вашия код, където искате да вмъкнете точката на прекъсване. След това щракнете върху този ред, за да добавите точката на прекъсване:

В ТОЧКИ НА ПРЕПАРАТИ прозорец, ще намерите всички точки на прекъсване, активирани във вашия проект. Това е мястото, където ще управлявате, редактирате и деактивирате точките на прекъсване. Можете също така да спрете кода, когато хвърля изключение или в случаи на неуловени изключения. Това ви позволява да проверите проблема, преди процесът да излезе.

Нека видим точките на прекъсване в действие. Щракнете върху Стартирайте икона за стартиране на сесията за отстраняване на грешки. Програмата ще спре на първата точка на прекъсване и ще даде стойността за проверка:

Можете да щракнете върху продължи икона (или натиснете F5), за да преместите програмата до следващата точка на прекъсване. Това ще продължи, докато стигнете до края на програмата.

Отстраняване на грешки в TypeScript с изходни карти

Тъй като Typescript продължава да става все по-популярен, количеството Node.js проекти, написани на TypeScript, ще се увеличи. За щастие можете също да отстранявате грешки в проекти, базирани на TypeScript, с VS Code.

Първо създайте a tsconfig.json файл в главната директория на вашия проект (ако вече не е създаден) и активирайте изходните карти:

{ "опции на компилатора": { "sourceMaps": вярно }}

След това прикачете изпълнявания процес и задайте точките на прекъсване във вашия TypeScript файл. Visual Studio Code ще намери изходните карти и ще ги използва.

Можете изрично да кажете на VS Code къде да намерите изходните карти. За да направите това, добавете outFiles атрибут във вашия конфигурационен файл за стартиране и го насочете към точното местоположение на вашите изходни карти:

{ 
"версия": "0.2.0", 
"конфигурации": [ { 
"Тип": "възел", 
"заявка": "стартирам", 
"име": "Стартира програма", 
"пропускане на файлове": [ "/**" ], 
"програма": "${workspaceFolder}\\index.js", 
"изходни файлове": "${workspaceFolder}\\index.js", 
 } 
 ]
}

Ако използвате ts-възел за да стартирате проекта си без стъпка на изграждане, използвайте това вместо конфигурацията по-горе:

{ 
"версия": "0.2.0", 
"конфигурации": [ { 
"Тип": "pwa-възел", 
"заявка": "стартирам", 
"име": „Стартиране на сървър“, 
"пропускане на файлове": [ "/**" ], 
"runtimeArgs": [ "-r", "ts-node/register" ], 
"args": [ "${workspaceFolder}/src/server.ts" ] 
 }]
}

Тъй като няма програмен атрибут, runtime аргументи регистри ts-възел като манипулатор за TypeScript файлове. Първият аргумент за аргументи е входният файл за програмата. Сега можете да започнете вашата сесия за отстраняване на грешки. Ако разработвате с ванилен JavaScript или предна рамка, можете също отстраняване на грешки в JavaScript кода в браузъра.

Други функции в Visual Studio Code

Visual Studio Code е мощен редактор на изходен код, пълен с невероятни функции. Покрихме вградения инструмент за отстраняване на грешки на VS Code. Ние също така демонстрирахме как можете да го използвате за отстраняване на грешки във вашето приложение Node.js.

Но има много други удобни функции във VS Code. Въпреки че може да сте запознати с някои от тях, някои може да са напълно нови за вас. В такъв случай може да ви е интересно да научите за тези функции и как да ги използвате.