От Робби | 17 ноября 2021 г.

Введение

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

Почему вы должны использовать настоящий отладчик вместо console.log()

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

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

Если вы когда-либо использовали console.log() для вывода значения на консоль, вы, возможно, знаете, насколько это утомительно, если вы пытаетесь отлаживать что-то сложное. Он печатает одно значение за раз, и вам нужно написать новый оператор console.log() для каждого значения, которое вы хотите увидеть. Если значение, на которое вы смотрите, изменилось, вам нужно console.log() его снова. Это немного похоже на ковыряние с завязанными глазами или в темноте.

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

Я начал просто с отладки кода своего собственного приложения, но со временем и по мере того, как я становился старше, я обнаружил, что могу получить ценную информацию, отлаживая код фреймворка (например, код самого Express). Мне удалось найти ответы на вопросы, которых даже не было в документации.

Предпосылки

Для этого руководства вам необходимо установить как Visual Studio Code, так и Node.js. Если вы хотите запускать и отлаживать свое приложение с общедоступным URL-адресом, а не только с localhost, вам также понадобится expose.sh.

Пример экспресс-приложения

Я рекомендую использовать мой пример приложения Express, весь код показан ниже.

// app.js
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
    const foo = "bar";
    const bar = "baz";
    const one = 1;
    const two = 2;
    const three = 2;
    const five = two + three;
    res.send('2 + 3 = ' + five);
});
app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
});

Создайте новую папку где-нибудь на своем устройстве, затем скопируйте и вставьте этот код в файл с именем app.js.

Настройте свой проект с помощью npm init, затем следуйте инструкциям.

Затем запустите npm install --save express, чтобы установить зависимость Express.

Вы можете запустить код с помощью node app.js. Нажмите http://localhost:3000 в своем браузере, и вы сразу увидите, что в этом коде есть ошибка, потому что вывод неверен.

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

Для начала вам нужно настроить Visual Studio Code (VSCode), IDE с открытым исходным кодом от Microsoft. Если у вас его еще нет, скачайте бесплатную копию с сайта code.visualstudio.com. Есть версии для Linux, Mac и Windows.

Настроить VSCode

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

Создайте папку с именем .vscode

Затем создайте файл .vscode/launch.json и вставьте в него следующее содержимое:

// .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Express App",
            "program": "${workspaceFolder}/app.js",
            "request": "launch",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "type": "pwa-node"
        }
    ]
}

Установить точку останова

Точка останова — это место, которое вы устанавливаете в своем коде, где вы хотите, чтобы ваше приложение приостанавливалось, чтобы вы могли проверить локальные переменные и общее состояние вашего приложения. В VSCode — точка останова, представленная красной точкой слева от номера строки, на которой вы хотите приостановить работу приложения. Точки останова устанавливаются простым нажатием на область слева от номера строки.

Мы видим, что некоторые числа были добавлены неправильно, поэтому установите точку останова на строке res.send('2 + 3 = ' + five), нажав на область слева от номера строки. Там, где вы щелкнули, должна появиться красная точка, как в строке 14 ниже:

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

Запустите приложение с отладкой

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

Вот увидишь

в верхней части левой панели.

Нажмите на маленькую зеленую стрелку слева от «Запустить экспресс-приложение».

Ваше приложение Express теперь будет запускаться внутри VSCode с полной поддержкой отладки. На панели «Консоль отладки» в нижней части окна VSCode вы увидите, как она запускается:

Теперь приложение запускается в VSCode с поддержкой отладки.

Активируйте точку останова

Запустив приложение в VSCode, перейдите по адресу http://localhost:3000 в браузере (или просто щелкните по этой ссылке).

После этого будет достигнута точка останова. Это будет выглядеть так:

Здесь происходит несколько вещей, поэтому давайте объясним ниже.

Слева под RUN AND DEBUG вы увидите список локальных переменных. req — объект Express request, res — объект Express response. Их полезно посмотреть, если вы хотите увидеть параметры запроса и данные, отправленные в ваше приложение.

Вы можете увидеть все локальные переменные и их значения в области видимости в строке, на которой находится ваша точка останова. Чтобы увидеть всю эту информацию с помощью console.log(), вам нужно будет регистрировать каждую переменную одну за другой. С отладчиком и точкой останова вы можете увидеть все мгновенно.

Над строкой res.send я провел базовые арифметические действия. Вы увидите результаты этого в списке локальных переменных. Например, значение two равно 2.

Теперь посмотрите на значение three. Ясно, что должно быть 3, а не 2, вот и ошибка. Обновите значение three до 3, затем остановите и перезапустите приложение, и вывод будет правильным.

Отладка с общедоступным URL

Вы научились отлаживать с помощью URL-адреса localhost, доступного только с вашего компьютера. Используя expose, с помощью одной команды терминала вы можете указать локально работающему приложению Express общедоступный URL-адрес HTTPS, которым вы можете поделиться с другими. Весь трафик на этот общедоступный URL-адрес будет автоматически направляться на localhost через безопасный туннель.

Почему вы хотите это сделать? Допустим, вы создаете API для приложения и работаете с разработчиком внешнего интерфейса (например, React), который будет интегрироваться с вашим API. Это очень распространенный вариант использования Express.

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

Другое использование — вебхуки. Если вам когда-либо понадобится интегрировать веб-перехватчик, вы можете настроить свой общедоступный URL-адрес с помощью поставщика веб-перехватчика и инициировать их для выполнения запроса к локально работающему приложению, которое вы отлаживаете в VSCode.

Теперь вы можете точно видеть, что отправляет ваш поставщик веб-перехватчиков, и вам даже не нужно читать (или даже понимать) их документацию. Теперь вы точно знаете, какой код нужно написать, чтобы использовать этот запрос. Независимо от того, насколько хороша или плоха их документация, теперь вы знаете, что делать.

Чтобы установить expose, перейдите на Страницу установки и следуйте показанным инструкциям. Это установка методом копирования и вставки для Linux и Mac. Загружаемый exe доступен для Windows.

Запустите expose 3000, и вы должны увидеть что-то вроде:

$ expose 3000
http://mofgjp.expose.sh is forwarding to localhost:3000
https://mofgjp.expose.sh is forwarding to localhost:3000

Теперь, когда точка останова все еще установлена ​​и ваше приложение работает в VSCode, перейдите по URL-адресу HTTPS, показанному в вашем браузере.

Точка останова будет достигнута, как если бы вы только что сделали запрос к localhost. Если вы хотите пофантазировать, попробуйте перейти по этому URL-адресу с другого компьютера или телефона, и точка останова все равно сработает.

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

Использование консоли отладки

Приятной маленькой особенностью отладчика VSCode является консоль отладки. Он открывается в нижней части окна, когда вы начинаете отладку внутри панели с заголовком DEBUG CONSOLE. Если вы когда-либо использовали консоль внутри devtools для своего любимого веб-браузера, это почти то же самое, но для внутреннего кода Node.js.

Иногда вам может понадобиться попробовать выражение без изменения кода. В консоли отладки попробуйте ввести one + three. Результат 4 появится в консоли:

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

Шаг к следующей строке

Установите новую точку останова в строке const foo = "bar". Запустите приложение Express в VSCode, затем нажмите URL-адрес в браузере.

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

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

.

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

Заключение

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

Как только вы научитесь отладке, вам больше никогда не понадобится использовать console.log для отладки.

Удачного кодирования!