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

Отладка приложения Node.js в самом Visual Studio Code возможна и проста. Редактор VS Code поставляется со встроенным отладчиком, способным отлаживать любое приложение, предназначенное для среды выполнения Node.js. Это означает, что вы можете отлаживать JavaScript или любой другой язык, который компилируется в него (например, TypeScript).

В этой статье описаны шаги по отладке приложения Node.js в VS Code. Вы узнаете, как запустить сеанс отладки, вставить точки останова, подключить внешний процесс и отладить код TypeScript с помощью исходных карт.

Что нужно для начала

Прежде чем начать, установите Node.js и VS Code на свой локальный компьютер. Последняя версия Node.js доступна на Node.js Официальный веб-сайт. Аналогично, для кода Visual Studio загрузите последнюю версию с веб-сайта Код ВС Веб-сайт. Инструкции по как настроить VS Code в Windows, прочтите наше руководство по установке.

Вам также нужен проект Node.js. Вы можете создать простое приложение Node.js с нуля или используйте существующее приложение.

Процесс отладки в VS Code

Запустить сеанс отладки в редакторе VS Code довольно просто. Откройте файл с VS Code и нажмите кнопку Запуск и отладка на боковой панели (или нажмите Ctrl + Shift + D на клавиатуре). Далее нажмите на Запуск и отладка кнопку, чтобы начать процесс.

По умолчанию Node.js попытается определить среду отладки вашего проекта. Но если автоопределение не увенчалось успехом, вам будет предложено выбрать нужное окружение. Для этого руководства этой средой является Node.js.

После того, как вы выбрали среду, VS Code активирует отладчик и прикрепляет его к процессу. Вы можете увидеть свой вывод в КОНСОЛЬ ОТЛАДКИ. Используя панель инструментов отладки вверху, вы можете перебирать код, приостанавливать выполнение или завершать сеанс.

У вас также есть возможность создать файл конфигурации. запуск.json файл позволяет настроить и настроить детали отладки. Если вашему сценарию требуется аргумент, укажите эти аргументы в запуск.json файл. Для каждой конфигурации можно задать несколько параметров:

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

Вы также заметите пять панелей в левой части редактора. Эти панели ПЕРЕМЕННЫЕ, СМОТРЕТЬ, СТЕК ВЫЗОВОВ, ЗАГРУЖАЕМЫЕ СКРИПТЫ, и КОНТРОЛЬНЫЕ ТОЧКИ:

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

Присоединить внешний процесс

Другой способ настройки сеанса отладки Node.js — подключение внешнего процесса. Запустите программу следующей командой:

узел --inspect index.js

Вставьте -брк флаг после --осмотреть если вы хотите прикрепить его до запуска программы.

Затем откройте средство выбора процессов в VS Code. Здесь перечислены все процессы, доступные в среде Node.js. Чтобы открыть окно выбора, нажмите Ctrl + Shift + P и найти Отладка: присоединить к команде Node.js.

Нажмите на команду и выберите правильный вариант, чтобы начать процесс отладки.

Создание точки останова

Если вы хотите сделать паузу в определенных точках вашей программы для проверки кода, установите там точки останова. Вы можете установить точки останова практически в любом месте вашего кода. Сюда входят объявления переменных, выражения и комментарии. Но вы не можете устанавливать точки останова в объявлениях функций.

Создать точку останова довольно просто. Когда вы перемещаете указатель мыши к левой стороне номеров строк, на каждой строке появляется красный кружок. Определите номер строки в вашем коде, куда вы хотите вставить точку останова. Затем нажмите на эту строку, чтобы добавить точку останова:

в КОНТРОЛЬНЫЕ ТОЧКИ панели, вы найдете все точки останова, включенные в вашем проекте. Здесь вы будете управлять, редактировать и отключать точки останова. Вы также можете остановить код при возникновении исключения или в случае неперехваченных исключений. Это позволяет вам проверить проблему до завершения процесса.

Давайте посмотрим на точки останова в действии. Нажмите на Запуск значок, чтобы начать сеанс отладки. Программа остановится на первой точке останова и выдаст значение для проверки:

Вы можете нажать на Продолжать (или нажмите F5), чтобы переместить программу к следующей точке останова. Это будет продолжаться до тех пор, пока вы не дойдете до конца программы.

Отладка TypeScript с исходными картами

Поскольку Typescript продолжает становиться все более популярным, количество проектов Node.js, написанных на TypeScript, неизбежно будет увеличиваться. К счастью, вы также можете отлаживать проекты на основе TypeScript с помощью VS Code.

Сначала создайте tsconfig.json файл в корневом каталоге вашего проекта (если он еще не создан) и включите исходные карты:

{ "Параметры компилятора": { "исходные карты": истинный }}

Затем подключите запущенный процесс и установите точки останова в файле TypeScript. Visual Studio Code найдет исходные карты и использует их.

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

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

Если вы используете ts-узел чтобы запустить проект без этапа сборки, используйте это вместо приведенной выше конфигурации:

{ 
"версия": "0.2.0", 
"конфигурации": [ { 
"тип": "pwa-узел", 
"запрос": "запуск", 
"имя": «Запустить сервер», 
"пропустить файлы": [ "/**" ], 
"runtimeArgs": [ "-р", "ts-узел/регистр" ], 
"аргументы": [ "${workspaceFolder}/src/server.ts" ] 
 }]
}

Поскольку атрибута программы нет, время выполнения аргументы регистры ts-узел в качестве обработчика файлов TypeScript. Первый аргумент в аргументы является входным файлом для программы. Теперь вы можете начать сеанс отладки. Если вы разрабатываете с помощью ванильного JavaScript или интерфейсной среды, вы также можете отлаживать код JavaScript в браузере.

Другие возможности Visual Studio Code

Visual Studio Code — это мощный редактор исходного кода с потрясающими функциями. Мы рассмотрели встроенный инструмент отладчика VS Code. Мы также продемонстрировали, как его можно использовать для отладки приложения Node.js.

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