Отладка кода Node.js в Visual Studio Code

Development, Java | Amber | Комментировать запись

Редактор Visual Studio Code предлагает огромное количество встроенных функций. Кроме того, он предоставляет поддержку приложений по отладке кода. В этом руководстве мы расскажем, как настроить VS Code для отладки кода Node.js. Для этого мы загрузим расширение Debugger для Chrome, затем создадим и запустим конфигурацию отладки, а также установим точки останова.

Требования

• Локальная установка Node.js (чтобы найти инструкции по установке, выберите соответствующую систему: mac OS, Debian, CentOS, Ubuntu).
• Последняя версия Visual Studio Code.
• Расширение Debugger, установленное в Visual Studio Code.

В данном мануале мы выполним отладку кода приложения по имени Quick Chat. Конечно, описанные здесь инструкции вы можете протестировать на любом своем проекте JavaScript, который можно запустить на сервере Node.

Если у вас нет такого проекта, создайте простой тестовый проект.

1: Создание тестового приложения (опционально)

Разумеется, чтобы выполнить примеры из этого мануала, вам нужно подготовить проект. Как сказано выше, здесь мы используем в этих целях приложение Quick Chat.

С помощью Git клонируйте репозиторий приложения Design-and-Build-a-Chat-Application-with-Socket.io. Помимо этого, вы можете скачать zip-файл и распаковать его.

Читайте также: Разработка проектов с открытым исходным кодом: начало работы с Git

В этом руководстве мы будем использовать код из 8 части проекта. Прежде всего найдите минутку, чтобы ознакомиться с тем, как в идеале должно работать приложение.

Перейдите в каталог проекта, а затем в каталог part-8:

cd Design-and-Build-a-Chat-Application-with-Socket.io
cd part-8

Далее установите пакеты npm для данного проекта:

npm install

Наконец, запустите сервер:

npm start

Если вы откроете адрес 127.0.0.1:3000 в Chrome, браузер запросит имя пользователя. Введите имя и нажмите кнопку Chat!, после чего вы будете перенаправлены в приложение и увидите следующее:

User joined the chat...

Если ввести в поле внизу окна какой-то текст и нажать кнопку Send, ваше сообщение отобразится в чате.

Если вы откроете новую вкладку браузера и посетите тот же URL, вы сможете войти в систему как другой пользователь. Таким образом, вы сможете читать сообщения чата в обеих вкладках браузера. Это нормальное и ожидаемое поведение нашего приложения.

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

Далее мы создадим в приложении точку останова – такие точки позволяют приостановить выполнение кода и проверить его.

Quick Chat – это приложение Node/Express, которое использует Socket.io, чтобы пользователи могли общаться друг с другом в режиме реального времени. Давайте добавим точку останова при подключении клиента к серверу.

Чтобы создать такую точку в VS Code, кликните на пустое пространство слева от номеров строк.

Создайте точку останова внутри функции, которая вызывается при каждом подключении пользователя, это 15 по счету строка. При этом слева от номера строки появится красный кружок.

part-8/server.js

// ...
io.on('connection', socket => {
console.log('a user connected');
// ...
});

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

3: Панель отладки VS Code

Обратите внимание на боковую панель редактора (по умолчанию она находится слева). Чтобы открыть панель отладки, найдите в этой панели кнопку с перечеркнутым жуком и нажмите ее. Здесь вы увидите четыре разных раздела: variables, watch, call stack и breakpoints.

В верхней части панели вы увидите зеленую кнопку воспроизведения и выпадающий список – на нем будет надпись No Configurations, если вы еще не создали конфигурацию отладки. Соответственно, если ранее вы создали конфигурацию, вы увидите ее в этом списке.

VS Code хранит конфигурации отладки в файле launch.json внутри папки .vscode. VS Code помогает создать не только эту папку и файл, но в том числе и предопределенные конфигурации. Давайте попробуем создать нашу первую конфигурацию.

Итак, чтобы создать исходный файл launch.json, кликните на выпадающий список No Configurations и выберите Add Configuration. На экране появится всплывающее окно, которое можно проигнорировать. Приступим же к созданию нашей первой конфигурации.

Ключевыми компонентами конфигурации отладки являются:

• name – имя вашей конфигурации, отображаемое в выпадающем списке.
• request – тип действия, которое вы хотите выполнить.
• type – тип отладчика конфигурации. Это может быть Node, Chrome, PHP и т.д.

Кроме того, VS Code поможет определить другие свойства через IntelliSense.

4: Отладка с помощью программы запуска

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

.vscode/launch.json

{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/app.js"
},

Чтобы запустить эту конфигурацию, выберите ее в выпадающем списке и нажмите зеленую кнопку воспроизведения. В правом верхнем углу появится панель действий отладки с кнопками step, continue, restart и stop.

В дальнейшем используйте флаг –inspect, чтобы запустить приложение Node в режиме отладки.

5: Отладка по идентификатору процесса

Вторая конфигурация, которую мы рассмотрим, – это подключение к процессу Node по ID этого процесса. Подобный сценарий будет актуален для приложений, которые уже запущены в вашей локальной среде.

.vscode/launch.json

{
"type": "node",
"request": "attach",
"name": "Attach by Process ID",
"processId": "${command:PickProcess}"
},

Для этого перед запуском конфигурации отладки нам нужно самостоятельно запустить сервер Node. Используйте следующую команду для запуска вашего сервера (вместе с флагом –inspect, как говорилось ранее). Замените app.js именем вашего файла.

node --inspect app.js

Теперь, когда сервер запущен, вы можете запустить конфигурацию отладки. При появлении запроса выберите процесс Node, соответствующий команде, которую вы только что выполнили для запуска сервера.

После этого соединение будет установлено успешно.

6: Отладка через подключение к порту

Третий пример конфигурации – подключение к существующему приложению Node, работающему по заданному порту.

.vscode/launch.json

{
"type": "node",
"request": "attach",
"name": "Attach to Port",
"port": 9229
},

9229 – стандартный порт для отладки при использовании флага –inspect, поэтому мы и будем использовать его здесь.

Мы уже запустили наш сервер с помощью предыдущей конфигурации, поэтому мы можем продолжить работу. Выберите конфигурацию Attach to Port в списке и нажмите кнопку воспроизведения.

Если вы указываете port, localRoot и remoteRoot, вы можете также выполнить отладку, подключившись через сетевое соединение к удаленному компьютеру.

7: Отладка через подключение к порту и Nodemon

Это наш последний пример конфигурации. Здесь мы настроим предыдущую конфигурацию для поддержки автоматической перезагрузки с помощью Nodemon. Nodemon – это пакет, который автоматически перезагружает ваш сервер Node и при этом сохраняет все файлы. Обычно он устанавливается глобально через npm. Этот пакет значительно упрощает параллельное внесение изменений и тестирование.

.vscode/launch.json

{
"type": "node",
"request": "attach",
"name": "Nodemon Debug",
"port": 9229,
"restart": true
},

Примечание: Современные версии VS Code поддерживают параметр runtimeExecutable, который можно использовать для другой конфигурации Node.js+Nodemon.

Чтобы установить Nodemon, используйте следующую команду:

npm install -g nodemon

Пакет Nodemon автоматически перезапускает сервер, поэтому мы установили значение true для свойства restart в конфигурации отладки. Таким образом, при перезапуске сервера отладчик подключится повторно. Чтобы проверить, как это работает, запустите свой сервер с помощью этой команды (заменив node на nodemon):

nodemon --inspect app.js

Затем запустите вашу конфигурацию.

Здесь мы используем Nodemon, значит, наш сервер будет автоматически перезагружен, если мы внесем изменения в файл и сохраним его.

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

Заключение

В этом мануале вы настроили VS Code для отладки кода Node.js. Теперь у вас есть рабочие конфигурации, благодаря которым вы можете начать отладку своего кода.