Отладка ES6 в коде Visual Studio

Отладка ES6 в коде Visual Studio

Я родом из Java. Отладка приложения Java проста. Вы просто настраиваете свою IDE для последней версии JDK, пишете приложение, используя все новейшие синтаксические совершенства, добавляете точку останова и запускаете его в режиме отладки. Вуаля! Вы отлаживаете…

Сейчас я пишу в основном на JavaScript (Node.js и браузер). Меня постоянно удивляет, насколько сложно и обременительно отлаживать простое приложение ES6 JavaScript. Почему мы не можем просто сообщить нашему редактору / IDE версию JavaScript, на которую мы ориентируемся, и начать отладку? Если бы это было так просто ...

Как долгое время довольный клиент JetBrains, я недавно перешел с WebStorm на Visual Studio Code. Мне регулярно нравится пробовать редакторы с открытым исходным кодом, но я всегда возвращался к IntelliJ или WebStorm. Затмение? NetBeans? Атом? Скобки? Пытался их все, но всегда возвращался «домой» в отчаянии. Тем не менее, VS Code - это мое последнее увлечение, и похоже, что у этих отношений есть шанс.

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

Шаг 1 - Установите Node.js 8.x

Самый простой способ, который я нашел для отладки ES6 в VS Code, - это использовать последнюю версию Node.js. В этой версии используется новый протокол отладки «инспектор», который намного более надежен, чем устаревший протокол, используемый в более старых версиях. Если вы еще не установили Node, установите его отсюда:

Https://nodejs.org/

Если он у вас уже установлен, проверьте версию следующим образом:

$ node --version

Если вы не используете версию 8.x (или более позднюю), вы можете установить последнюю версию с помощью диспетчера версий Node, например «n» здесь:

Https://github.com/tj/n

Или «nvm» здесь:

Https://github.com/creationix/nvm

Лично я предпочитаю «n», но любое решение хорошо подходит для установки и управления несколькими версиями Node. После того, как вы использовали один из этих инструментов для установки последней версии Node и подтвердили из командной строки, что вы перешли на эту версию, вы готовы двигаться дальше.

Шаг 2 - Настройте новый проект ES6

Давайте начнем с создания очень простого проекта npm и запуска его в VS Code:

$ mkdir debug-es6 && cd debug-es6
$ npm init -y
$ code .

Конечно, это предполагает, что вы уже установили Visual Studio Code. Если нет, сделайте это сейчас. Вперед, продолжать. Я буду ждать…

Затем нам нужно будет установить необходимые модули Babel, чтобы транспилировать наш код. Эта команда сделает свое дело:

$ npm install --save-dev babel-cli babel-preset-es2015

babel-cli - это компилятор Babel, а babel-preset-es2015 - это плагин, который добавляет поддержку ES6. После их установки нам нужно будет обновить package.json файл или создать .babelrc файл, чтобы настроить Babel на использование плагина ES6. Для простоты мы просто обновим package.json следующим образом:

  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  },
  "babel": {
    "presets": [
      "es2015"
    ]
  }

Теперь давайте напишем простое приложение, которое мы сможем отлаживать. Создайте папку src в корне вашего проекта и файл src/math.js, который выглядит следующим образом:

export function add(num1, num2) {
  return num1 + num2;
}
export function multiply(num1, num2) {
  return num1 * num2;
}

Также создайте src/app.js файл, который использует наш математический модуль следующим образом:

import {add, multiply} from './math';
const num1 = 5, num2 = 10;
console.log('Add: ', add(num1, num2));
console.log('Multiply: ', multiply(num1, num2));

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

Шаг 3 - Настройте Babel для преобразования ES6 в ES5

Первым шагом к отладке ES6 является настройка транспилятора для перевода вашего кода ES6 во что-то, что Node может запускать изначально. Другими словами, ES5. Но в дополнение к транспилированному коду нам также необходимо сгенерировать исходные карты, которые позволят отладчику Node в VS Code сопоставлять точки останова между нашим исходным и скомпилированным кодом.

Конечно, есть способы отладки без настройки транспилятора. Однако мне никогда не везло с такими решениями, как babel-node и babel-register. Либо среда отладки казалась хрупкой, либо для запуска процесса отладки требовался специальный код. Я искал простое решение, которое работало бы практически во всех сценариях. Настройка Babel для транспиляции кода и генерации исходных карт, казалось, была билетом ...

Помимо транспиляции нашего кода и создания исходных карт, мы хотели бы, чтобы Babel продолжал следить за нашим кодом на предмет изменений и при необходимости повторно компилировать. Это делает наш цикл записи-компиляции-отладки красивым и плотным. Для этого добавьте сценарий «компиляции» в ваш package.json файл, как показано здесь:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "compile": "babel src --out-dir .compiled --source-maps --watch"
},

Этот сценарий перенесет код в папку src и выведет результаты в папку .compiled. Параметры --source-maps и --watch инструктируют Babel генерировать исходные карты и продолжать отслеживать исходные файлы на предмет изменений (и повторно компилировать каждый раз, когда происходят изменения). Запустите компилятор Babel:

$ npm run compile

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

Шаг 4 - Добавьте конфигурацию запуска

Пришло время добавить конфигурацию запуска VS Code, чтобы ваше приложение запускалось в режиме отладки. В строке меню нажмите «Отладка -› Открыть конфигурации »и выберите« Node.js », когда будет предложено выбрать среду. Обновите получившийся файл, чтобы он выглядел так:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch App.js",
      "program": "${workspaceRoot}/src/app.js",
      "outFiles": [ "${workspaceRoot}/.compiled/**/*.js" ]
    }
  ]
}

Параметры type и request в этой конфигурации указывают, что вы будете использовать Node.js для запуска приложения ES6, и VS Code должен запустить его за вас (в отличие от подключения к уже запущенному процессу Node). program указывает точку входа в ваше приложение, а outFiles сообщает VS Code, где найти скомпилированные файлы (и исходные карты), которые фактически будут использоваться во время выполнения вашей программы. Исходные карты позволят редактору сопоставить скомпилированный код ES5 с вашим исходным кодом ES6.

Шаг 5 - Отладка вашего приложения

После создания конфигурации запуска давайте установим пару точек останова. Вы можете установить точки останова, щелкнув желоб слева от номера строки. Добавьте точку останова в последнюю строку src/app.js и еще одну внутри одной из функций в src/math.js. Вернитесь на вкладку «Отладка», щелкнув значок отладки на левой панели навигации, выбрав конфигурацию запуска «Launch App.js» из раскрывающегося списка в верхней части окна отладки и нажав зеленую кнопку «Начать отладку». " стрелка. Вы должны достичь своей первой точки останова!

Обратите внимание, что наша конфигурация запуска настроена так, чтобы всегда запускать приложение src/app.js. Что делать, если вы хотите отладить файл, который в данный момент выбран и отображается в редакторе? Вы можете сделать это, добавив вторую конфигурацию запуска. Выберите «Отладка -› Открыть конфигурации »в строке меню, скопируйте / вставьте существующую конфигурацию запуска и измените копию, чтобы она выглядела следующим образом:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch App.js",
      "program": "${workspaceRoot}/src/app.js",
      "outFiles": [ "${workspaceRoot}/.compiled/**/*.js" ]
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Current File",
      "program": "${file}",
      "outFiles": [ "${workspaceRoot}/.compiled/**/*.js" ]
    }
  ]
}

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

Заключение

Ух! Оглядываясь назад на эти шаги, кажется, что это намного больше работы, чем есть на самом деле. Как только вы привыкнете к добавлению зависимостей Babel и созданию конфигурации запуска, настройка проекта ES6 для отладки на самом деле выполняется довольно быстро. Процесс транспиляции, безусловно, добавляет некоторые накладные расходы, но, приложив немного усилий, вы сможете отлаживать свои проекты ES6 в кратчайшие сроки.