отладка в коде Visual Studio с babel-узлом

Я:

  • VS код v1.3.1
  • узел В6.3.1
  • Вавилон-узел v6.11.4
  • Windows 10

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

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/src/app.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node.cmd",
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": false,
            "outDir": null
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        },
        {
            "name": "Attach to Process",
            "type": "node",
            "request": "attach",
            "processId": "${command.PickProcess}",
            "port": 5858,
            "sourceMaps": false,
            "outDir": null
        }
    ]
}
15
babel-node visual-studio-code

3 ответов

я смог заставить его работать после следующих шагов:

.в JSON

убедитесь, что у вас есть скрипт для сборки с sourcemaps поколения.

"scripts": {
    "build": "babel src -d dist --source-maps"
}

задач.в JSON

убедитесь, что у вас есть задание, что позволит VS Code строить с помощью npm сценарий. 

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "build",
            "args": [ "run", "build" ],
            "isBuildCommand": true
        }
    ]
}

запуск.в JSON

настроить скрипт построить до запуска С a preLaunchTask, начните program от точки входа источника, но с outDir указывая на р-н и sourceMaps включено.

{
    "name": "Launch",
    "type": "node",
    "request": "launch",
    "program": "${workspaceRoot}/src/server.js",
    "stopOnEntry": false,
    "args": [],
    "cwd": "${workspaceRoot}",
    "preLaunchTask": "build",
    "runtimeExecutable": null,
    "runtimeArgs": [ "--nolazy" ],
    "env": {
        "NODE_ENV": "development"
    },
    "externalConsole": false,
    "sourceMaps": true,
    "outDir": "${workspaceRoot}/dist"
}

теперь, каждый раз, когда вы нажимаете Ф5 на babel транспиляция выполняется до начала процесса узла, но при синхронизации всех исходных карт. С его помощью я смог использовать точки останова и все другие вещи отладчика.

15

нет необходимости транспилировать с babel-node

при использовании babel-node вы не должны transpile первый код.

базовая настройка (исходные карты - всегда)

Примечание sourceMaps и retainLines опции .babelrc:

{
  "presets": [
    "env"
  ],
  "sourceMap": "inline",
  "retainLines": true
}

а потом в launch.json:

{
  "type": "node",
  "request": "launch",
  "name": "Debug",
  "program": "${workspaceFolder}/index.js",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
  "runtimeArgs": ["--nolazy"]
}

предварительная настройка (sourcemaps - только отладка)

вы можете настроить выше только для генерации исходных карт / retainLines в debug режим:

{
  "presets": ["env", "flow"],
  "env": {
    "debug": {
      "sourceMap": "inline",
      "retainLines": true
    }
  }
}

и:

{
  "type": "node",
  "request": "launch",
  "name": "Debug",
  "program": "${workspaceFolder}/index.js",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
  "runtimeArgs": ["--nolazy"],
  "env": {
    "BABEL_ENV": "debug"
  },
}
10

начиная с версии 1.9 VS Code автоматически пытается использовать исходные карты по умолчанию, но вы должны указать outFiles если транспилированные файлы находятся не в той же папке, что и исходные файлы.

в качестве примера, вот соответствующие файлы. В этом случае babel трансплицируется из до .

Примечание: записи package.json и .vscode/tasks.json требуются только если вы хотите, чтобы VS-код транспилировал файлы до отладка.

.vscode / запуск.в JSON

Ctrl+ Shift+P, >Debug: Open launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/lib/index.js",
            "cwd": "${workspaceRoot}",
            "preLaunchTask": "build",
            "outFiles": [
                "${workspaceRoot}/lib/**.js"
            ]
        }
    ]
}

Примечание: только указать preLaunchTask если вы создали build задачи package.json и .vscode/tasks.json.

пакета.в JSON

Ctrl+P, package.json

{
  "scripts": {
    "build": "babel src -d lib -s"
  },
  "devDependencies": {
    "babel-cli": "^6.23.0",
    "babel-preset-env": "^1.1.10"
  }
}

Примечание: вы можете использовать другую версию из babel-cli и различные пресеты babel.

.vscode / задачи.в JSON

Ctrl+ Shift+P, >Tasks: Configure Task Runner

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "build",
            "args": ["run", "build"],
            "isBuildCommand": true
        }
    ]
}

официальная документация VS Code

Карты Источник

Узел.отладчик JS кода VS поддерживает исходные карты JavaScript, которые помогают отладке транспилированных языков, например TypeScript или minified/uglified JavaScript. С исходными картами это возможно чтобы выполнить один шаг или установить точки останова в исходном источнике. Если исходная карта не существует для исходного источника или если исходная карта нарушена и не может успешно сопоставляться между исходным кодом и сгенерированным JavaScript, точки останова отображаются как непроверенные (серые полые круги).

исходные карты могут быть сгенерированы с двумя видами встраивания:

  • встроенные исходные карты: созданный файл JavaScript содержит исходную карту в виде URI данных в конце (вместо ссылки на исходную карту через URI файла).
  • встроенный источник: исходная карта содержит исходный источник (вместо ссылки на источник через путь).

VS Code поддерживает оба встроенные исходные карты и встроенный источник.

функция карты источника управляется значение по умолчанию true начиная с VS Code 1.9.0. Этот означает, что отладка узла всегда пытается использовать исходные карты (если они могут найти), и, как следствие, вы даже можете указать исходный файл (например, приложение.ТС) с .

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

если сгенерированные (транспилированные) файлы JavaScript находятся не рядом с их источником, а в отдельном каталоге, вы должны помочь отладчику VS Code найти их, установив

7