Vscode отладка ES6 приложение
У меня VSCode 0.5.0. Я установил флаг compilerOptions в "ES6", и редактор начал правильно распознавать код ES6.
У меня есть babel.
Мои тесты Mocha используют компиляторы babel, и мои тесты проходят.
Мое приложение запускается из командной строки без проблем, когда я запускаю его с помощью babel-node.
Когда я отлаживаю приложение из VSCode, он запускается без поддержки ES6, а приложение терпит неудачу в вопросах синтаксиса ES6.
Есть ли настройки отладки, которые я пропустил?
Ответы
Ответ 1
По умолчанию VSCode запускает node только с опцией -debug-brk. Этого недостаточно для поддержки ES6. Если вы узнаете, какие опции "babel- node" переходят на node, вы можете указать те же параметры в конфигурации запуска VSCode (через атрибут runtimeArgs). Но это не решает проблему, что babel-node переводит ваш код ES6 перед запуском.
В качестве альтернативы вы можете попытаться установить "runtimeExecutable" в своей конфигурации запуска на "babel- node". Этот подход работает с другими обертки node, но я не проверял, что работает с babel- node.
Третий вариант (который должен работать) заключается в использовании режима подключения VSCode: для этого запуска babel- node из командной строки с опцией '--debug'. Он должен напечатать номер порта. Затем создайте конфигурацию запуска "attach" в VSCode с этим портом.
Ответ 2
Вот как заставить отладчик VSCode работать с Бабелем 6+:
Сначала установите зависимости локально:
$ npm install babel-cli --save
$ npm install babel-preset-es2015 --save
Затем запустите babel-узел:
$ node_modules/babel-cli/bin/babel-node.js --inspect --presets es2015 -- server.js --inspect
По умолчанию отладчик будет прослушивать порт 5858
, поэтому убедитесь, что порт соответствует в launch.json
для конфигурации Attach
:
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858
}
Теперь присоедините отладчик в VSCode:
- убедитесь, что конфигурация отладки установлена на
Attach
а не на Launch
- беги с F5
Nodemon
Хотя это и не обязательно, но если вы также хотите использовать nodemon
для получения изменений кода без перезапуска сервера, вы можете сделать это:
Убедитесь, что установлен nodemon:
$ npm install nodemon --save-dev
Запустите сервер
$ node_modules/.bin/nodemon node_modules/babel-cli/bin/babel-node.js --inspect --presets es2015 -- server.js --inspect
Наконец, присоедините отладчик, как показано выше.
Ответ 3
Предполагая, что в вашем проекте установлен babel-cli
в качестве локального модуля, выполните следующие действия.
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/babel-cli/bin/babel-node.js",
"stopOnEntry": false,
"args": [
"${workspaceRoot}/server.js"
],
...
Ответ 4
Вы можете попробовать babel-register
(вам также понадобятся другие вспомогательные модули babel):
npm install --save-dev babel-register
с конфигурацией launch.json
в этих строках:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/src/index.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy",
"--require",
"babel-register"
],
"env": {
"NODE_ENV": "development"
},
"console": "internalConsole",
"sourceMaps": true,
"outFiles": [
]
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outFiles": [],
"localRoot": "${workspaceRoot}",
"remoteRoot": null
},
{
"name": "Attach to Process",
"type": "node",
"request": "attach",
"processId": "${command.PickProcess}",
"port": 5858,
"sourceMaps": false,
"outFiles": []
}
]
}
Это свободно основано на vscode-debug-nodejs-es6 с добавлением аргумента runtime-регистрового регистра.
Ответ 5
babel + nodemon
В терминале VS Code запустите сервер с аргументом --inspect
:
nodemon --inspect --watch src --exec node_modules/.bin/babel-node --presets react,es2015 src/server.js
Среди других строк будет показан порт, на котором прослушивает отладчик:
...
Debugger listening on port 9229
...
Создайте следующую конфигурацию отладки:
{
"type": "node",
"request": "attach",
"name": "Attach to Port",
"address": "localhost",
"port": 9229
}
Запустите отладчик, и если все будет хорошо, вы увидите в выходном терминале:
Debugger attached.
Отныне вы можете отлаживать свое приложение.
Ответ 6
Есть два способа сделать это:
Первый вариант с помощью командной строки npm
В файле package.json создайте команду сборки, которая выполнит babel
{
"scripts": {
"build": "babel src --out-dir dist --watch --source-maps"
},
"devDependencies": {
"babel-cli": "^6.23.0",
"babel-preset-es2015-node6": "^0.4.0",
"eslint": "^3.16.0"
}
}
В launch.json Введите следующий код:
{
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/src/index.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"runtimeArgs": [
"--nolazy"
],
"sourceMaps": true,
"outFiles": [
"${workspaceRoot}/dist/**/*.js"
]
}
]
}
Откройте окно cmd, перейдите к файлу package.json и выполните:
npm run build
Откройте свой код VS и запустите свой код. Он будет работать, и он остановится на всех ваших контрольных точках. Причина, по которой это работает, потому что исходные карты сгенерированы, и VS знает, как сопоставить их с вашим кодом.
Второй вариант с использованием задачи VS Code:
В VS Code добавьте следующую задачу (Ctrl + Shift + P) и введите "Задачи: Настроить Run Run":
Добавьте следующий код в файл tasks.json
{
"version": "0.1.0",
"command": "${workspaceRoot}/node_modules/.bin/babel",
"isShellCommand": true,
"tasks": [
{
"taskName": "watch",
"args": [
"src",
"--out-dir",
"dist",
"--watch",
"--source-maps"
],
"suppressTaskName": true,
"isBuildCommand": true
}
]
}
Теперь выполните задачу, но нажав Ctrl + Shift + B (команда сборки), и теперь вы можете запускать и отлаживать свой код. VS Code делает то же самое, что делает npm на первом шаге.
Вам также необходимо настроить babel в файле .babelrc(расположенном в корне проекта) следующим образом:
{
"presets": [
"es2015-node6"
]
}
и jsconfig.json(находится в корне проекта)
{
"compilerOptions": {
"target": "ES6"
},
"include": [
"src/**/*"
]
}
Ответ 7
babel- node и vs code attach
-
config npm script в package.json
:
"scripts": {
"debug": "babel-node --debug-brk demo.js --presets es2015,stage-2"
}
-
добавить конфигурацию отладки кода:
{
"name": "Attach",
"type": "node",
"protocol": "legacy",
"request": "attach",
"port": 5858
}
Ответ 8
При перекодировании с помощью bael- node вы должны добавить "-inspect-brk" в script, чтобы script мог разорваться при ударе точки останова.
Пример:
"start": "babel-node --inspect-brk app.js --presets es2015,stage-2"
Теперь, когда вы запускаете с помощью npm run start
, будет запущен отладчик, и вы можете увидеть следующее в консоли:
Debugger listening on ws://127.0.0.1:9229/cf72a33c-ab38-4798-be5e-8b8df072f724
For help see https://nodejs.org/en/docs/inspector
Это показывает, что процесс отладки начался, и мы можем подключиться к нему на порту # 9229.
Теперь вам нужно добавить следующую конфигурацию отладчика для vs-кода для присоединения к этому процессу: (в launch.json)
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Process",
"type": "node",
"request": "attach",
"port": 9229
}
]
}
После сохранения нажмите кнопку "начать отладку", чтобы подключиться к процессу, инициированному node ранее. Вы можете прочитать об этом здесь
Ответ 9
Это моя конфигурация и она прекрасно работает! Я использую отладку VSCode, mocha 6.1.4, узел: v8.16.0 и версию 6 Babel.
Обязательно загрузите babel-register
и babel-polyfill
в runtimeArgs
, иначе вы получите regeneratorRuntime is not defined
!
{
"type": "node",
"request": "launch",
"name": "Mocha test debug",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/mocha",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"protocol": "inspector",
"stopOnEntry": false,
"runtimeArgs": [
"--nolazy",
"--require",
"babel-register",
"--require",
"babel-polyfill",
"tests/*.js"
],
"sourceMaps": true
}