Как отлаживать код Node.js с помощью нескольких инструментов

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

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

Давайте погрузимся прямо в.

Обзор отладки

«Отладка» — это название, данное различным средствам устранения дефектов программного обеспечения. Исправить ошибку часто просто. Поиск причины ошибки может быть значительно более сложным и потребовать многих часов головоломок.

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

Синтаксические ошибки

Ваш код не следует правилам языка — например, когда вы опускаете закрывающую скобку или делаете ошибку в операторе, таком как console.lag(x) .

Хороший редактор кода может помочь обнаружить распространенные проблемы следующим образом:

• Цветовое кодирование допустимых или недопустимых утверждений
• Переменные проверки типов
• Автодополнение функций и имен переменных
• Выделение соответствующих скобок
• Блоки кода с автоматическим отступом
• Обнаружение недостижимого кода
• Рефакторинг грязных функций

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

Линтер кода, такой как ESLint, также будет сообщать об ошибках синтаксиса, неправильных отступах и необъявленных переменных. ESLint — это инструмент Node.js, который вы можете установить глобально:

 npm i eslint -g

Вы можете проверить файлы JavaScript из командной строки, используя:

 eslint mycode.js

…но проще использовать плагин редактора, такой как ESLint для VS Code или linter-eslint для Atom, которые автоматически проверяют код при вводе:

Логические ошибки

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

Логические ошибки могут быть вызваны:

• Использование неправильной переменной
• Неправильные условия, например, if (a > 5) , а не if (a < 5)
• Вычисления, которые не учитывают приоритет оператора, например 1+2*3 , дают 7, а не 9.

Это неизбежно: ваш код Node.js в какой-то момент даст сбой. Посмотрите, какие инструменты вы можете использовать для отладки приложений и найдите причину проблемы прямо здесь Нажмите, чтобы твитнуть

Ошибки выполнения (или выполнения)

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

• Деление на переменную, которая была установлена ​​​​на ноль
• Попытка доступа к несуществующему элементу массива
• Попытка записи в файл только для чтения

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

1. Используйте разработку через тестирование: TTD рекомендует вам писать тесты до того, как функция будет разработана, например, X возвращается из функции Y, когда Z передается в качестве параметра. Эти тесты выполняются во время начальной разработки и последующих обновлений, чтобы убедиться, что код продолжает работать должным образом.
2. Используйте систему отслеживания проблем: нет ничего хуже, чем электронное письмо с заявлением «Ваше программное обеспечение не работает» ! Системы отслеживания проблем позволяют записывать конкретные проблемы, документировать этапы воспроизведения, определять приоритеты, назначать разработчиков и отслеживать ход исправления.
3. Используйте систему управления исходным кодом: система управления исходным кодом, такая как Git, поможет вам создать резервную копию кода, управлять версиями и определять, где была допущена ошибка. Онлайн-репозитории, включая Github и Bitbucket, предоставляют бесплатное пространство и инструменты для небольших проектов или проектов с открытым исходным кодом.

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

Установите соответствующие переменные среды Node.js

Переменные среды, установленные в основной операционной системе, могут управлять настройками приложения и модуля Node.js. Наиболее распространенным является NODE_ENV , который обычно устанавливается на разработку при отладке или на производство при работе на рабочем сервере. Установите переменные среды в macOS или Linux с помощью команды:

 NODE_ENV=development

или в (классической) командной строке Windows:

 set NODE_ENV=development

или Windows PowerShell:

 $env:NODE_ENV="development"

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

 // running in development mode? const devMode = (process.env.NODE_ENV !== 'production'); if (devMode) { console.log('application is running in development mode'); }

Вы также можете использовать метод Node util.debuglog для условного вывода сообщений об ошибках, например

 import { debuglog } from 'util'; const myappDebug = debuglog('myapp'); myappDebug('log something');

Это приложение будет выводить сообщение журнала только в том случае, если для параметра NODE_DEBUG установлено значение myapp или подстановочный знак, например * или my*.

Используйте параметры командной строки Node.js

Сценарии узла обычно запускаются с узлом, за которым следует имя сценария входа:

 node app.js

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

• --check
  синтаксис проверить скрипт без выполнения
• --trace-warnings
  выводить трассировку стека, когда промисы JavaScript не разрешаются или не отклоняются
• --enable-source-maps
  показывать исходные карты при использовании транспилятора, такого как TypeScript
• --throw-deprecation
  предупреждать, когда используются устаревшие функции Node.js
• --redirect-warnings=file
  выводить предупреждения в файл, а не в stderr
• --trace-exit
  выводить трассировку стека при вызове process.exit() .

Вывод сообщений в консоль

Вывод консольного сообщения — один из самых простых способов отладки приложения Node.js:

 console.log(`someVariable: ${ someVariable }`);

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

console.log() также принимает список значений, разделенных запятыми:

 let x = 123; console.log('x:', x); // x: 123

… хотя деструктуризация ES6 предлагает аналогичный результат с меньшими усилиями:

 console.log({ x }); // { x: 123 }

Команда console.dir() красиво выводит свойства объекта так же, как и util.inspect():

 console.dir(myObject, { depth: null, color: true });

Консольная полемика

Некоторые разработчики утверждают, что вы никогда не должны использовать console.log() , потому что:

• Вы меняете код и можете что-то изменить или забыть удалить, и
• Нет необходимости, когда есть лучшие варианты отладки.

Не верьте никому, кто утверждает, что никогда не использует console.log() ! Ведение журнала быстрое и грязное, но все используют его в какой-то момент. Используйте любой инструмент или технику, которые вы предпочитаете. Исправление ошибки важнее, чем метод, который вы используете для ее поиска.

Используйте стороннюю систему ведения журнала

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

Используйте инспектор V8

Механизм JavaScript V8 предоставляет клиент отладки, который можно использовать в Node.js. Запустите приложение, используя проверку узла, например

 node inspect app.js

Отладчик останавливается на первой строке и отображает приглашение debug>:

 $ node inspect .\mycode.js < Debugger listening on ws://127.0.0.1:9229/143e23fb < For help, see: https://nodejs.org/en/docs/inspector < ok < Debugger attached. < Break on start in mycode.js:1 > 1 const count = 10; 2 3 for (i = 0; i < counter; i++) { debug>

Введите help для просмотра списка команд. Вы можете пройти через приложение, введя:

• cont или c : продолжить выполнение
• next или n : запустить следующую команду
• step or s : шаг в вызываемую функцию
• out или o : выйти из функции и вернуться к вызывающему оператору
• pause : приостановить выполнение кода
• watch('myvar') : смотреть переменную
• setBreakPoint() или sb() : установить точку останова
• перезапустить : перезапустить скрипт
• .выход или Ctrl | Cmd + D : выйти из отладчика

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

Используйте браузер Chrome для отладки кода Node.js

Опция проверки Node.js, использованная выше, запускает сервер веб-сокетов, который прослушивает локальный порт 9229. Он также запускает текстовый клиент отладки, но можно использовать графические клиенты, такие как встроенный в Google Chrome и на основе Chrome. браузеры, такие как Chromium, Edge, Opera, Vivaldi и Brave.

Для отладки типичного веб-приложения запустите его с параметром –inspect, чтобы включить сервер веб-сокетов отладчика V8:

 node --inspect index.js

Примечание:

• Предполагается, что index.js является сценарием входа в приложение.
• Убедитесь, что вы используете --inspect с двойными дефисами, чтобы не запускать текстовый клиент отладчика.
• Вы можете использовать nodemon вместо node, если хотите автоматически перезапускать приложение при изменении файла.

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

 node --inspect=0.0.0.0:9229 index.js

Вы также можете использовать --inspect-brk вместо --inspect , чтобы остановить обработку (установить точку останова) в первой строке, чтобы вы могли выполнить код с самого начала.

Откройте браузер на базе Chrome и введите chrome://inspect в адресной строке, чтобы просмотреть локальные и сетевые устройства:

Если ваше приложение Node.js не отображается как удаленная цель :

• Нажмите «Открыть выделенные инструменты разработчика для узла» и выберите адрес и порт или
• Установите флажок «Обнаружение сетевых целей » , нажмите « Настроить » и добавьте IP-адрес и порт устройства, на котором оно работает.

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

Переключитесь на панель « Источники ». Вы можете открыть любой файл, нажав Cmd | Ctrl + P и введите имя файла (например, index.js).

Однако проще добавить папку проекта в рабочую область. Это позволяет загружать, редактировать и сохранять файлы непосредственно из DevTools (другой вопрос, считаете ли вы это хорошей идеей!)

1. Нажмите + Добавить папку в рабочую область
2. Выберите расположение вашего проекта Node.js.
3. Нажмите «Согласен », чтобы разрешить изменения файла.

Теперь вы можете загружать файлы из левого дерева каталогов:

Щелкните любой номер строки, чтобы установить точку останова, отмеченную синим маркером.

Отладка основана на точках останова . Они указывают, где отладчик должен приостановить выполнение программы и показывать текущее состояние программы (переменные, стек вызовов и т. д.).

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

Загрузите и используйте свое веб-приложение, чтобы перейти к оператору, в котором установлена ​​точка останова. В приведенном здесь примере http://localhost:3000/ открыт в любом браузере, и DevTools остановит выполнение в строке 44:

Правая панель показывает:

• Ряд значков действий (см. ниже).
• Панель наблюдения позволяет отслеживать переменные, щелкнув значок + и введя их имена.
• Панель точек останова показывает список всех точек останова и позволяет включать и отключать их.
• Панель Scope показывает состояние всех локальных, модульных и глобальных переменных. Вы будете проверять эту панель чаще всего.
• Панель стека вызовов показывает иерархию функций, вызываемых для достижения этой точки.

Ряд значков действий показан выше Paused on breakpoint :

Слева направо они выполняют следующие действия:

• возобновить выполнение : продолжить обработку до следующей точки останова.
• step over : выполнить следующую команду, но остаться в текущем блоке кода — не переходить ни в одну функцию, которую она вызывает.
• шаг в : выполнить следующую команду и перейти к любой функции по мере необходимости
• step out : продолжить обработку до конца функции и вернуться к вызывающей команде
• step : Аналогичен шагу , за исключением того, что он не будет переходить к асинхронным функциям.
• деактивировать все точки останова
• пауза при исключениях : остановить обработку при возникновении ошибки.

Условные точки останова

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

 for (let i = 0; i < 1000; i++) { // set breakpoint here }

Вместо того, чтобы 999 раз нажимать « Возобновить выполнение », вы можете щелкнуть строку правой кнопкой мыши, выбрать « Добавить условную точку останова » и ввести условие, например i = 999 :

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

Очки журнала

Точки журнала эффективно реализуют console.log() без какого-либо кода! Выражение может быть выведено, когда код выполняет любую строку, но оно не останавливает обработку, в отличие от точки останова.

Чтобы добавить точку журнала, щелкните правой кнопкой мыши любую строку, выберите « Добавить точку журнала » и введите выражение, например, 'loop counter i', i :

Консоль DevTools выводит loop counter i: 0 в loop counter i: 999 в приведенном выше примере.

Используйте VS Code для отладки приложений Node.js

VS Code или Visual Studio Code — это бесплатный редактор кода от Microsoft, который стал популярным среди веб-разработчиков. Приложение доступно для Windows, macOS и Linux и разработано с использованием веб-технологий на платформе Electron.

VS Code поддерживает Node.js и имеет встроенный клиент отладки. Большинство приложений можно отлаживать без какой-либо настройки; редактор автоматически запустит сервер отладки и клиент.

Откройте исходный файл (например, index.js), активируйте панель «Выполнить и отладить», нажмите кнопку « Выполнить и отладить » и выберите среду Node.js. Щелкните любую строку, чтобы активировать точку останова, показанную в виде значка красного круга. Затем откройте приложение в браузере, как и раньше — VS Code останавливает выполнение при достижении точки останова:

Панели Variables , Watch , Call Stack и Breakpoints аналогичны тем, что показаны в Chrome DevTools. Панель « Загруженные сценарии » показывает, какие сценарии были загружены, хотя многие из них являются внутренними для Node.js.

Панель инструментов значков действий позволяет:

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

Как и в Chrome DevTools, вы можете щелкнуть правой кнопкой мыши любую строку, чтобы добавить условные точки останова и точки журнала .

Дополнительные сведения см. в разделе Отладка в Visual Studio Code.

Расширенная конфигурация отладки VS Code

Дальнейшая настройка VS Code может потребоваться, если вы хотите отлаживать код на другом устройстве, виртуальной машине или использовать альтернативные параметры запуска, такие как nodemon.

VS Code хранит конфигурации отладки в файле launch.json внутри каталога .vscode вашего проекта. Откройте панель « Выполнение и отладка», нажмите «Создать файл launch.json » и выберите среду Node.js для создания этого файла. Приведен пример конфигурации:

Любое количество параметров конфигурации может быть определено как объекты в массиве "configurations" . Нажмите « Добавить конфигурацию… » и выберите соответствующий вариант.

Индивидуальная конфигурация Node.js может:

1. Запустить сам процесс или
2. Подключитесь к отладочному серверу Web Socket, возможно, работающему на удаленном компьютере или в контейнере Docker.

Например, чтобы определить конфигурацию nodemon, выберите Node.js: Nodemon Setup и при необходимости измените сценарий входа «program»:

 { // custom configuration "version": "0.2.0", "configurations": [ { "console": "integratedTerminal", "internalConsoleOptions": "neverOpen", "name": "nodemon", "program": "${workspaceFolder}/index.js", "request": "launch", "restart": true, "runtimeExecutable": "nodemon", "skipFiles": [ "<node_internals>/**" ], "type": "pwa-node" } ] }

Сохраните файл launch.json , и nodemon («имя» конфигурации) появится в раскрывающемся списке в верхней части панели « Выполнение и отладка ». Щелкните зеленый значок запуска, чтобы начать использовать эту конфигурацию и запустить приложение с помощью nodemon:

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

Дополнительные сведения см. в разделе Конфигурации запуска VS Code.

Следующие расширения VS Code также могут помочь вам в отладке кода, размещенного на удаленных или изолированных серверных средах:

• Remote — Containers: подключение к приложениям, работающим в контейнерах Docker.
• Удаленный — SSH: подключение к приложениям, работающим на удаленном сервере.
• Удаленный — WSL: подключение к приложениям, работающим в подсистеме Windows для Linux (WSL).

Другие параметры отладки Node.js

Руководство по отладке Node.js содержит советы по ряду текстовых редакторов и IDE, включая Visual Studio, JetBrains WebStorm, Gitpod и Eclipse. Atom предлагает расширение node-debug, которое интегрирует отладчик Chrome DevTools в редактор.

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

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

Резюме

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

Используйте любой удобный инструмент, чтобы найти проблему. Нет ничего плохого в console.log() для быстрого поиска ошибок, но Chrome DevTools или VS Code могут быть предпочтительнее для более сложных проблем. Эти инструменты помогут вам создать более надежный код, и вы потратите меньше времени на исправление ошибок.

Какой практикой отладки Node.js вы дорожите? Поделитесь в разделе комментариев ниже!