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

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

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

Подготовить

Перед запуском установите Node.js и VS Code на локальный компьютер. Последняя версия Node.js доступна на официальном сайте. Точно так же для Visual Studio Code загрузите последнюю версию из Интернета VS Code. Вы можете обратиться к статье Как установить Visual Studio Code в Windows 10 на сайте TipsMake.com.com.

Вам также нужен проект 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. Для каждого профиля можно установить несколько параметров:

{ “версия”: “0.2.0”, “конфигурации”: ( { “тип”: “узел”, “запрос”: “запуск”, “имя”: “Запуск программы”, “skipFiles”: ( “/* *” ), “program”: “${workspaceFolder}index.js” } ) }

Вы также увидите 5 панелей в левой части редактора, в том числе: ПЕРЕМЕННЫЕ, НАБЛЮДЕНИЕ, СТЕК ВЫЗОВОВ, ЗАГРУЖЕННЫЕ СКРИПТЫ и ТОЧКИ РАЗВЯЗКИ:

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

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

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

узел –inspect index.js

Вставьте флаг -brk после –inspect, если вы хотите прикрепить его до того, как эта программа запустится.

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

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

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

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

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

В BREAKPOINTS вы найдете все точки останова, включенные в проекте. Здесь вы будете управлять, редактировать и отключать точки останова. Вы также можете приостановить код при запуске необработанного исключения или исключения. Это позволяет проверить наличие проблем перед выходом из процесса.

Взгляните на точки останова в действии. Щелкните значок запуска, чтобы начать сеанс отладки. Эта программа остановится на первой точке останова и выведет значение для проверки:

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

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

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

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

{ “compilerOptions”: { “sourceMaps”: правда }}

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

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

{ “версия”: “0.2.0”, “конфигурации”: ( { “тип”: “узел”, “запрос”: “запуск”, “имя”: “Запуск программы”, “skipFiles”: ( “/* *” ), “program”: “${workspaceFolder}index.js”, “outFiles”: “${workspaceFolder}index.js”, } ) }

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

{ “версия”: “0.2.0”, “конфигурации”: ( { “тип”: “pwa-узел”, “запрос”: “запуск”, “имя”: “Запуск сервера”, “skipFiles”: ( ” /**” ), “runtimeArgs”: (“-r”, “ts-node/register” ), “args”: ( “${workspaceFolder}/src/server.ts” ) }) }

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

Выше описано, как отлаживать приложение Node.js в Visual Studio Code. Надеюсь, статья будет вам полезна.