Как использовать VSCode для отладки приложения Node.js

Отладка является важным этапом в разработке программного обеспечения, поскольку она позволяет разработчикам исправить ошибки перед выпуском программы в свет. Инструменты отладки могут быть интегрированы в редакторы кода, что делает процесс отладки более эффективным. Это руководство покажет вам, как отлаживать node.js в Visual Studio Code.

Что такое Node.js?

Node.js — это среда выполнения JavaScript, которая позволяет выполнять код JavaScript вне браузера. Это не фреймворк, а технология, построенная на движке V8 JavaScript в Chrome, что позволяет использовать ее для разработки приложений на стороне сервера и инструментов командной строки. Она также популярна в сфере Интернета вещей (IoT). Node.js имеет большое сообщество разработчиков, которые создали множество модулей, которые вы можете использовать в своих собственных проектах.

Приложения Node.js — это приложения, написанные на JavaScript, которые выполняются на сервере с помощью среды выполнения Node.js. Эти приложения часто строятся на основе популярных JavaScript-фреймворков и библиотек, таких как Express, React, Angular и Vue.

Основными особенностями Node.js являются:

  • Это среда выполнения JavaScript на стороне сервера с открытым исходным кодом.
  • Node.js — это кроссплатформенная среда выполнения, которая позволяет выполнять код JavaScript на стороне сервера.
  • Приложения пишутся на JavaScript и могут быть запущены в среде выполнения Node.js на OS X, Microsoft Windows и Linux.
  • Приложения являются однопоточными, то есть один процесс может обрабатывать несколько запросов одновременно.
  • Они асинхронны, что означает, что они могут обрабатывать несколько запросов одновременно, не дожидаясь завершения каждого из них перед запуском следующего.
  • Он использует модель неблокирующего ввода-вывода, ориентированную на события, что делает его легким и эффективным.
  • Он доступен под лицензией MIT.

Хотя все вышеперечисленное является фантастикой, там, где есть код, есть и ошибки. Отладка становится обычной задачей для каждого разработчика, как побочный эффект.

Пошаговое руководство по отладке Node.js в VSCode

Предварительные условия

Прежде чем приступить к этому руководству, мы предположим следующее:

  • у вас установлен Node.js,
  • у вас есть VSCode

В этом учебнике мы создадим простую программу Node.js с ошибкой.

Затем мы выполним процесс отладки, который даст вам базовое представление о том, как использовать инструмент отладки в VSCode для Node.js.

Чтобы создать нашу простую программу, запустите npm init внутри пустого каталога проекта в вашей консоли. Это даст нам файл package.json.

В том же каталоге создайте файл app.js со следующим кодом.

const calculate = (A, B) => {
  console.log('Adding...')
  let sum = 0

  sum = A + B + B + A
  return sum
 }
 ​
 const num1 = 1
 const num2 = 1
 ​
 const result = calculate(num1, num2)
 console.log(num1 + ' plus ' + num2 + ' = ' + result)
Вход в полноэкранный режим Выход из полноэкранного режима

JavaScript

Копировать
Мы знаем, что это неверно. В переменную sum намеренно внесена ошибка. Если мы запустим программу с помощью команды node app.js, то получим следующий результат:

 Adding...
 1 plus 1 = 4.
Вход в полноэкранный режим Выход из полноэкранного режима

JavaScript

Скопировать

Использование инструмента отладки VSCode

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

Также вы можете использовать сочетание клавиш Ctrl + Shift + D для переключения на панель отладки.

Далее нажмите на ‘create and launch.json file’ и выберите node.js.

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

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\src\app.js"
        }
    ]
 }

Войти в полноэкранный режим Выход из полноэкранного режима

JSON

Копирование

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

Вы также можете настроить отладчик на пропуск определенных файлов, перечисленных в массиве skipFile.

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

Когда вы нажмете на кнопку play рядом с кнопкой run, произойдет запуск и выполнение программы через отладчик. Консоль отладчика запустится и выйдет с кодом Process exited with code 0, что означает, что все прошло, как ожидалось.

Процесс отладки приложения node.js

Для отладки файла app.js вы можете установить точки останова, нажав на красную точку при наведении курсора на номер строки, которую вы хотите поставить. Точка останова — это место, где отладчик VSCode намеренно останавливает или приостанавливает выполнение программы, чтобы вы могли просмотреть изменения состояния в переменных и панелях стека часов и вызовов, расположенных в левой части пользовательского интерфейса.

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

Здесь наши переменные A и B имеют значения, но переменная result не определена, потому что она еще не определена в программе — это означает, что она еще не существует.

Панель VARIABLE выводит все текущие переменные и их состояния.

Между тем, панель WATCH позволяет вам выбрать определенные переменные, за которыми вы хотите следить. Эта панель полезна тем, что дает вам мгновенное представление о том, что происходит с кодом. 

Если вы посмотрите в верхнюю часть пользовательского интерфейса, то увидите панель управления, которая выглядит примерно так:

Эта панель управляет продвижением отладчика по программе. Каждый элемент управления выполняет следующие действия:

  • Продолжить (F5) пропустит точку останова и продолжит выполнение программы до следующей точки останова.
  • Step over (F10) переводит отладчик на следующую строку.
  • Step into (F11) — переводит отладчик в следующую функцию.
  • Шаг наружу (F12) — выводит отладчик из функции на следующий шаг.
  • Перезапустить (Ctrl+shift+F5) — перезапустить весь отладчик.
  • Остановить (shift+F5) — остановить процесс отладки и выйти из него.

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

Если вернуться к нашему примеру кода, то при нажатии на кнопку step into мы перейдем к функции calculate. Если мы посмотрим на панель VARIABLE, то увидим, что переменные изменились, чтобы отразить локальные переменные. Если щелкнуть правой кнопкой мыши на переменной, можно выбрать ее в качестве цели для наблюдения. Установка этого параметра добавит переменную на панель WATCH, как показано ниже.

Если вы нажмете на кнопку step over, будет запущена следующая строка. В нашей консоли будет просто написано Adding… *, поскольку выполняется console.log. Однако наблюдаемая переменная теперь изменилась с *undefined на 0.

Если мы выполним следующую строку, то увидим, что переменная sum внутри watch изменилась на неправильное значение. Можно сделать вывод, что в предыдущей строке произошло что-то не то. Теперь мы можем исправить проблему, повторно запустить весь отладчик и убедиться, что все работает.

Отладка кода с помощью инструмента Lightrun

Если отладка кода во время разработки достаточно проста в VSCode, то при отладке в производстве это совсем другая игра. Когда в производстве возникает ошибка, мы не можем просто выключить сервер и взять код для отладки. Мало того, воспроизведение производственных ошибок в среде разработки может оказаться невозможным. Именно здесь может помочь Lightrun.

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

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

Lightrun для Web уже доступен!

Мы хотим, чтобы вы сосредоточились на главном и работали как можно продуктивнее. Lightrun для Web теперь доступен, не требуя никаких интеграций или конфигураций. Все мощные возможности и функции IDE, которые предлагает Lightrun, теперь работают полностью в браузере и еще более доступны для любого из наших пользователей. 

Вы можете подключаться к своим живым приложениям прямо из браузера, не загружая специальный плагин. Опыт использования Lightrun для Web совпадает с опытом использования расширения VS Code один к одному, поэтому вы можете рассчитывать на многофункциональную, удобную платформу, готовую к использованию в любое время. Кроме того, у вас есть все средства контроля безопасности, обеспечиваемые Lightrun Sandbox™, и множество других полезных расширений, таких как глубокая интеграция с GitHub. Кроме того, вы можете открыть любой репозиторий GitHub в VSCode простым изменением URL. Готовы попробовать? Зарегистрируйтесь здесь и начните использовать Lightrun для Web прямо сейчас.

Оцените статью
Procodings.ru
Добавить комментарий