Что самое важное для изучения nodejs? Может у каждого свой ответ.
На мой взгляд, помимо освоения базовых API и некоторых часто используемых пакетов, самая важная способность изучать nodejs — это научиться использовать отладчик. Потому что, когда процесс сложен, отладка точки останова может помочь вам лучше прояснить логику и быстрее найти проблему, когда есть ошибки.
Дядя Вольф сказал, что использовать ли отладчик — важный признак, позволяющий отличить уровень программиста от nodejs.
В этой статье рассказывается о принципе отладчика и навыках использования отладчика vscode.
принцип отладчика
При запуске кода nodejs, если вы приносите--inspect(можно прервать) или--inspect-brk(можно сломать точку и остановиться на первой строке), тогда он запустится в режиме отладчика:
Как видите, узел запустил сервер веб-сокетов по адресу: ws://127.0.0.1:9229/78637688-e8e0-4582-80cc-47655f4bff66.
Почему отладчик запускает сервер веб-сокетов?
Смысл отладчика в том, чтобы где-то остановиться, можно пройти и просмотреть переменные в среде. Итак, как установить точки останова и как выставить переменные текущего контекста, чтобы запустить сервер веб-сокетов, В это время просто запустите клиент веб-сокета и подключитесь к серверу для отладки кода nodejs.
v8 debug protocol
Как сервер отладчика и клиент отладчика взаимодействуют после подключения? Это включает в себя протокол отладки v8.
Общайтесь в формате, узнаваемом обеими сторонами, например:
Установите точку останова в строке 100 файла test.js:
{
"seq":118,
"type":"request",
"command":"setbreakpoint",
"arguments":{
"type":"script",
"target":"test.js",
"line":100
}
}
Затем посмотрите на переменные в текущей области видимости:
{
"seq":117,
"type":"request",
"command":"scope"
}
Выполнить выражение:
{
"seq":118,
"type":"request",
"command":"evaluate",
"arguments":{
"expression":"a()"
}
}
Затем продолжите выполнение:
{
"seq":117,
"type":"request",
"command":"continue"
}
Таким образом, клиент может сообщить серверу отладчика, как выполнять код.
debugger client
У клиента отладчика вообще есть ui (конечно, можно и через команды в командной строке отлаживать, но в основном это не делается). Общие клиенты отладчика js включают chrome devtools и отладчик vscode.
Напишем простой js-скрипт и запустим его через node --inspect-brk:
Вы можете видеть, что он начинается на порту 9229,
Затем мы подключаемся к нему через два типа клиентов соответственно.
chrome devtools
Введите chrome://inspect в адресной строке Chrome и нажмите «Настроить», чтобы настроить целевой порт:
Заполните порт 9229 прямо сейчас:
Затем вы увидите, что хром отсканировал цель, и нажмите «Проверить», чтобы подключиться к серверу отладчика.
После этого вы можете устанавливать точки останова, пошагово, выполнять выражения, просматривать переменные области видимости и т. д. Все эти функции реализованы через протокол отладки v8.
vscode debugger
Написание кода в vscode, отладка в chrome devtools более проблематична, vscode также реализует поддержку отладчика, вы можете использовать vscode для прямой отладки.
Чтобы использовать возможности отладки vscode, нужно изменить конфигурацию .vscode/launch.json в корневом каталоге проекта.
attach
Нажмите кнопку в правом нижнем углу, чтобы добавить элемент конфигурации. Здесь выберите присоединение nodejs:
Поскольку сервер отладчика websocket был запущен через node --inspect-brk, вам нужно только запустить клиент websocket и подключить его к порту 9229.
Нажмите кнопку слева, чтобы подключиться к серверу отладчика и начать отладку:
launch
Таким образом, слишком сложно запустить сервер отладчика через node --inspect-brk, а затем добавить конфигурацию отладки vscode для подключения.Можно ли объединить эти два шага?
Конечно, просто добавьте конфигурацию запуска:
Здесь типом является запуск, то есть запуск сервера отладчика и запуск клиента отладчика для подключения к серверу. Выполняется программа index2.js в корневом каталоге.Вы также можете установить stopOnEntry для остановки на первой строке.
Нажмите «Отладка», вы увидите, что файл js можно успешно отладить.
vscode запустит сервер отладчика, а затем запустит клиент отладчика для автоматического подключения к серверу.Нам не нужно заботиться об этом.
Таким образом, мы можем успешно использовать отладчик vscode для отладки кода nodejs.
расширенный отладчик vscode
Наиболее часто используемый клиент отладчика — vscode.Здесь мы сосредоточимся на настройке отладчика vscode в различных сценариях.
sourcemap
Если вы отлаживаете ts-код, вы не можете отлаживать скомпилированный код.Он должен иметь возможность сопоставляться с исходным кодом.Это то, что делает sourcemap. Инструменты отладки поддерживают исходную карту, например chrome devtools и отладчик vscode, оба поддерживают синтаксический анализ URL-адреса исходной карты в конце файла:
//# sourceMappingURL=index.js.map
Таким образом, при отладке index.js, если он скомпилирован ts, он автоматически найдет соответствующий ts.
Конечно, если ts прямо указан в конфигурации отладки, то для возможности отладки вам нужно настроить outFiles, чтобы указать vscode, где найти исходную карту.
Таким образом, точки останова, попадающие в исходный код ts, и точки останова, попадающие в скомпилированный js, могут вступить в силу.
Отладка нескольких процессов
Когда в коде есть дочерний процесс, есть второй поток управления, и нужно запускать другой отладчик.
Например, vscode, основанный на электронах, должен запускать основной процесс и некоторые процессы рендеринга. Основной процесс запускается через запуск, а процесс рендерера подключается позже.
Основной процесс порта запускается, когда дочерний указан параметром --remote-debugging-port автоматически, когда сервер отладчика.
outFiles, чтобы указать расположение исходной карты, чтобы можно было напрямую отлаживать исходный код ts. runtimeExecutable заменяет nodejs средой выполнения vscode (как правило, установка не требуется).
Затем процесс рендеринга запускается позже.Мы настраиваем его для запуска на порту 9222 с помощью параметров, поэтому, пока он подключен к этому порту, процесс можно отлаживать.
vscode поддерживает многоцелевую отладку, то есть в vscode можно одновременно запускать несколько отладчиков. Различные отладчики можно переключать для отладки разных процессов.
пасхальные яйца
Может ли отладчик прерывать только точки?Нет, его все еще можно использовать так, добавляя логи, не загрязняя исходный код.
Суммировать
Использование отладчика — очень важная возможность повысить уровень полезности nodejs.
Принцип отладчика nodejs заключается в том, что js-движки запускают сервер-отладчик (веб-сокет), ожидая клиентских подключений, мы даже не можем прийти через различные отладчики отладчика-клиента, такие как chrome devtools, отладчик vscode.
Для отладки кода nodejs лучше использовать отладчик vscode (конечно, иногда для отладки используется chrome devtools на основе памяти chrome devtools для анализа памяти, что очень полезно при обнаружении утечек памяти).
Отладчик vscode используется в основном для добавления конфигурации отладки в .vscode/launch.json.
Существует два типа конфигураций отладки: запуск и подключение:
- launch запустит сервер отладчика и соединится с клиентом отладчика
- attach просто запускает клиент отладчика для подключения к существующему серверу отладчика, поэтому укажите порт
Обычно используются следующие элементы конфигурации:
- outFiles sourcemap указанная позиция, другая для отладки исходного кода ts для компиляции
- stopOnEntry останавливается на первой строке
- args для указания некоторых аргументов командной строки
- runtimeExecutable необходимо указать, если среда выполнения не является nodejs, например, vscode или какая-либо другая среда выполнения.
На основе этих конфигураций мы можем отлаживать код nodejs в различных сценариях, которые необходимо скомпилировать, или в нескольких процессах.
Не будет преувеличением сказать, что если вы знакомы с использованием отладчика, понимание различных кодов nodejs будет намного проще.Я надеюсь, что эта статья поможет вам понять принцип работы отладчика и использовать chrome devtools или отладчик vscode для отладки кода nodejs. Знать, как отлаживать исходную карту и несколько процессов.