Последнее обновление 09.05.2023 — Василий Иванов
Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.
Отладка приложения 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 Code загрузите последнюю версию с веб-сайта VS Code. Инструкции по настройке VS Code в Windows см. в нашем руководстве по установке.
Вам также нужен проект Node.js. Вы можете создать простое приложение Node.js с нуля или использовать существующее приложение.
Процесс отладки в VS Code
Запустить сеанс отладки в редакторе VS Code довольно просто. Откройте файл с VS Code и щелкните значок «Выполнить и отладить» на боковой панели (или нажмите Ctrl + Shift + D на клавиатуре). Затем нажмите кнопку «Выполнить и отладить», чтобы начать процесс.
По умолчанию Node.js попытается определить среду отладки вашего проекта. Но если автоопределение не увенчалось успехом, вам будет предложено выбрать нужное окружение. Для этого руководства этой средой является Node.js.
После того, как вы выбрали среду, VS Code активирует отладчик и прикрепляет его к процессу. Вы можете увидеть результат в DEBUG CONSOLE. Используя панель инструментов отладки вверху, вы можете перебирать код, приостанавливать выполнение или завершать сеанс.
У вас также есть возможность создать файл конфигурации. Файл launch.json позволяет настраивать и настраивать детали отладки. Если вашему сценарию требуется аргумент, укажите эти аргументы в файле launch.json. Для каждой конфигурации можно задать несколько параметров:
{
"version": "0.2.0",
"configurations": [
{ "type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [ "<node_internals>/**" ],
"program": "${workspaceFolder}\\index.js"
}
]
}
Вы также заметите пять панелей в левой части редактора. Это панели ПЕРЕМЕННЫЕ, НАБЛЮДЕНИЕ, СТЕК ВЫЗОВОВ, ЗАГРУЖЕННЫЕ СКРИПТЫ и ТОЧКИ РАЗВЯЗКИ:
Когда вы закончите настройку конфигурации, выберите и запустите программу через меню конфигурации.
Присоединить внешний процесс
Другой способ настройки сеанса отладки Node.js — подключение внешнего процесса. Запустите программу следующей командой:
node --inspect index.js
Вставьте флаг -brk после —inspect, если вы хотите прикрепить его до запуска программы.
Затем откройте средство выбора процессов в VS Code. Здесь перечислены все процессы, доступные в среде Node.js. Чтобы открыть средство выбора, нажмите Ctrl + Shift + P и найдите команду Отладка: прикрепить к Node.js.
Нажмите на команду и выберите правильный вариант, чтобы начать процесс отладки.
Создание точки останова
Если вы хотите сделать паузу в определенных точках вашей программы для проверки кода, установите там точки останова. Вы можете установить точки останова практически в любом месте вашего кода. Сюда входят объявления переменных, выражения и комментарии. Но вы не можете устанавливать точки останова в объявлениях функций.
Создать точку останова довольно просто. Когда вы перемещаете указатель мыши к левой стороне номеров строк, на каждой строке появляется красный кружок. Определите номер строки в вашем коде, куда вы хотите вставить точку останова. Затем нажмите на эту строку, чтобы добавить точку останова:
На панели BREAKPOINTS вы найдете все точки останова, включенные в вашем проекте. Здесь вы будете управлять, редактировать и отключать точки останова. Вы также можете остановить код при возникновении исключения или в случае неперехваченных исключений. Это позволяет вам проверить проблему до завершения процесса.
Давайте посмотрим на точки останова в действии. Щелкните значок запуска, чтобы начать сеанс отладки. Программа остановится на первой точке останова и выдаст значение для проверки:
Вы можете щелкнуть значок «Продолжить» (или нажать F5), чтобы переместить программу к следующей точке останова. Это будет продолжаться до тех пор, пока вы не дойдете до конца программы.
Отладка TypeScript с исходными картами
Поскольку Typescript продолжает становиться все более популярным, количество проектов Node.js, написанных на TypeScript, неизбежно будет увеличиваться. К счастью, вы также можете отлаживать проекты на основе TypeScript с помощью VS Code.
Сначала создайте файл tsconfig.json в корневом каталоге вашего проекта (если он еще не создан) и включите исходные карты:
{ "compilerOptions": { "sourceMaps": true }}
Затем подключите запущенный процесс и установите точки останова в файле TypeScript. Visual Studio Code найдет исходные карты и использует их.
Вы можете явно указать VS Code, где найти исходные карты. Для этого добавьте атрибут outFiles в файл конфигурации запуска и укажите точное расположение исходных карт:
{
"version": "0.2.0",
"configurations": [ {
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [ "<node_internals>/**" ],
"program": "${workspaceFolder}\\index.js",
"outFiles": "${workspaceFolder}\\index.js",
}
]
}
Если вы используете ts-node для запуска своего проекта без шага сборки, используйте это вместо приведенной выше конфигурации:
{
"version": "0.2.0",
"configurations": [ {
"type": "pwa-node",
"request": "launch",
"name": "Launch Server",
"skipFiles": [ "<node_internals>/**" ],
"runtimeArgs": [ "-r", "ts-node/register" ],
"args": [ "${workspaceFolder}/src/server.ts" ]
}]
}
Поскольку атрибута программы нет, аргументы времени выполнения регистрируют ts-node в качестве обработчика файлов TypeScript. Первый аргумент args — это входной файл для программы. Теперь вы можете начать сеанс отладки. Если вы разрабатываете с помощью ванильного JavaScript или интерфейсной среды, вы также можете отлаживать код JavaScript в браузере.
Другие возможности Visual Studio Code
Visual Studio Code — это мощный редактор исходного кода с потрясающими функциями. Мы рассмотрели встроенный инструмент отладчика VS Code. Мы также продемонстрировали, как его можно использовать для отладки приложения Node.js.
Но в VS Code есть много других полезных функций. Хотя некоторые из них могут быть вам знакомы, некоторые могут быть совершенно новыми для вас. В этом случае вам может быть интересно узнать об этих функциях и о том, как их использовать.
