Подробное объяснение настройки VS Code/Webstorm для отладки JavaScript

Node.js JavaScript TypeScript Chrome

Переводчик пресса:В этой статье рассказывается об использовании Node Inspector для отладки приложений JavaScript и TypeScript.

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

Я подготовил пример расчета последовательности Фибоначчи и поместил его вРепозиторий на гитхабе. Я предлагаю вам поставить егоклонСпустись и следуй за мной. Конечно, это не обязательно.

$ git clone https://github.com/andrerpena/medium-node-inspector-tests.git
$ cd medium-node-inspector-tests
$ npm i

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

"scripts": {
  "build:ts": "tsc",
  "start": "node index.js",
  "start:watch": "nodemon index.js",
  "start:debug": "node --inspect index.js",
  "start:debug:brk": "node --inspect-brk index.js",
  "start:debug:ts": "node --inspect --require ts-node/register index.ts",
  "start:debug:ts:brk": "node --inspect-brk --require ts-node/register index.ts"
}

Когда ваша среда настроена, вы можете использоватьnpm startзапустить программу и получить доступlocalhost:3000/[n]для просмотра последовательности Фибоначчи.

Поскольку я хотел продемонстрировать отладку JavaScript и TypeScript, все, что я написал,index.tsФайл и соответствующая версия JavaScript генерируются командой tsc. Итак, версия JavaScript будет выглядеть немного некрасиво.

Работа в режиме отладки

Мы будем использовать два режима для отладки. использовать отдельно--inspectа также--inspect-brk. Разница между ними в том, что второй фактически не запустится, пока не будет подключен такой агент, как Chrome DevTools. И после запуска он автоматически останавливается на первой строке кода пользователя.

Когда приложение Node.js работает в режиме проверки, следует обратить внимание на две вещи:

  • Этому сеансу отладки будет назначен UUID. При этом всегда будет подключен WebSockets-терминал (ws://127.0.0.1:9229/[UUID]). Терминал будет отправлять статус кода в режиме реального времени.

  • HTTP-терминал (http://127.0.0.1:9229/json) будет предоставляться, чтобы конечные точки, такие как Chrome DevTools, знали о сеансе Node и соответствующем UUID.

Ты сможешьcurl http://127.0.0.1:9229/json. Для получения дополнительной информации см.:legacy-debugger.

Отладка JavaScript с помощью Chrome DevTools

бегать:

npm start:debug // if you're on the suggested repo or...
node --inspect index.js // ...otherwise.

ты увидишь:

Вы можете видеть, что сервер WebSocket запущен и прослушивает порт 9229. и, как вы можете видеть, UUID5dc97.... Каждая сессия имеет свой собственный UUID. Если вы перезапустите службу, UUID изменится.

Следующий шаг — открыть Chrome и ввести Chrome://inspect в поле URL.

Вот что я хочу сказать: доступ Chromehttp://127.0.0.1:9229/jsonЗапущенные сеансы могут быть обнаружены автоматически. Теперь нажмите на нижнюю часть изображения вышеinspectчтобы начать отладку. Откроется новое окно DevTools. Вы можете посетить файл, который хотите отладить, и добавить точки останова для отладки.

Если вы запускаете:

npm start:debug:brk // if you're on the suggested repo or...
node --inspect-brk index.js // ...otherwise.

можно увидеть:

Когда вы вводите Chrome://Inspect в Google Chrome, вы найдете две версии файлов TypeScript: одну с соответствующей исходной картой (отмеченной как [sm] ), а другую без. Конечно, если вы хотите отладить, поставьте точку останова в файле, отмеченном sm.

С таким количеством инструментов, доступных для разработки, что будет после запуска? Вы все еще можете отлаживать с удовольствием? Вы можете, добро пожаловать в использованиеFundebug!

Отладка JavaScript с помощью Visual Studio

Выберите целевой файл JavaScript для отладки, выберите параметр «Отладка» (Mac: Shift+Cmd+D), а затем нажмите кнопку «Выполнить» (▶️). Visual Studio автоматически запустит Node с параметром проверки.

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

Вы также можете создать файл конфигурации запуска, если хотите запускать из консоли. Автозаполнение Visual Studio просто великолепно. Помните, что 9929 — это номер порта Node Inspector по умолчанию.

{
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach",
            "port": 9229
        }
    ]
}

Если вы достаточно внимательны, вы обнаружите, что в приведенном выше файле конфигурации не указан UUID. На самом деле Visual Studio будет автоматически получать доступws://127.0.0.1:9229чтобы получить статус текущего сеанса. После того, как вы настроили его, вы можете запустить его в консоли:

npm start:debug // if you're on the suggested repo or...
node --inspect index.js // ...otherwise.

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

Отладка TypeScript с помощью Visual Studio

В Visual Studio, если настроен «тип»: «узел», файлы с суффиксом .ts не разрешены, тогда у вас есть два метода: либо скомпилировать .ts с ts-узлом.

{
    "configurations": [
        {
            "name": "Current TS File",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/.bin/ts-node",
            "args": ["${relativeFile}"],
            "protocol": "inspector"
        }
    ]
}

Или укажите runtimeExecutable как NPM вместо узла по умолчанию.

{
    "configurations": [
       {
           "type": "node",
           "request": "launch",
           "name": "Launch via NPM",
           "runtimeExecutable": "npm",
           "runtimeArgs": [
               "run-script",
               "start:debug:ts"
           ],
           "port": 9229
       },
    ]
}

Если вы хотите запустить TypeScript в консоли следующим образом:

npm start:debug:ts // if you're on the suggested repo or...
node --require ts-node/register index.ts // ...otherwise.

Конфигурация запуска следующая:

{
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach",
            "port": 9229
        }
    ]
}

Отладка JavaScript с помощью WebStorm

В правом верхнем углу вы можете выбратьRun/Debug Configurations, нажмите и выберите знак +, и будет отображено множество конфигураций-кандидатов. Затем выберите Node.js и дайте ему имя. В опции файла JavaScript заполните свой входной файл. Тогда вы можете запустить его.

Отладка TypeScript с помощью WebStorm

Это почти то же самое, что и конфигурация для обработки JavaScript, но в опции Node Parameters вам нужно заполнить--inspect --require ts-node/register.

Я надеюсь, что эта статья поможет вам (весело) отладить с удовольствием!

Категории