Отладка в Visual Studio Code с помощью babel-узла

Я использую:

  • VS Code v1.3.1
  • узел v6.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
        }
    ]
}
Источник

3 ответа

Решение

Я смог заставить его работать, выполнив следующие действия:

Package.json

Убедитесь, что у вас есть скрипт сборки с генерацией исходных карт.

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

tasks.json

Убедитесь, что у вас есть задача, позволяющая создавать VS Code с npm скрипт.

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

launch.json

Сконфигурируйте скрипт для сборки перед запуском с preLaunchTask, начать program с точки входа источника, но с outDir указывая на папку dist и 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"
}

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

Источник

Нет необходимости переносить с вавилонским узлом

Когда используешь babel-node Вы не ДОЛЖНЫ сначала передавать свой код.

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

Обратите внимание sourceMaps а также retainLines варианты в .babelrc:

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

А потом в launch.json:

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

Предварительная настройка (исходные карты - только отладка)

Вы можете настроить вышеперечисленное так, чтобы генерировать исходные карты /retainLines только в режиме отладки:

{
  "presets": ["env"],
  "env": {
    "debug": {
      "sourceMaps": "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"
  },
}
Источник

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

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

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

.vscode / launch.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,

package.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 / tasks.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

Исходные карты

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

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

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

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

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

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

Если сгенерированные (перенесенные) файлы JavaScript находятся не рядом с их источником, а в отдельном каталоге, вы должны помочь отладчику кода VS найти их, установив outFiles приписывать. Этот атрибут принимает несколько шаблонов глобуса для включения и исключения файлов из набора сгенерированных файлов JavaScript. Всякий раз, когда вы устанавливаете точку останова в исходном источнике, VS Code пытается найти сгенерированный код JavaScript в файлах, указанных outFiles,

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

tsc --sourceMap --outDir bin app.ts

Это соответствующая конфигурация запуска для программы TypeScript:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch TypeScript",
            "type": "node",
            "request": "launch",
            "program": "app.ts",
            "outFiles": [ "bin/**/*.js" ]
        }
    ]
}

Источник

Источник

Вот что сработало для меня (Ни одно из других решений не работало для меня с vscode v1.33):

./project.json

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

.vscode / task.json

{
  "version": "2.0.0",
  "tasks": [{
    "label": "build-babel",
    "type": "npm",
    "script": "build",
    "group": "build"
  }]
}

.vscode / launch.json

{
  "version": "0.2.0",
  "configurations": [{
    "type": "node",
    "request": "launch",
    "preLaunchTask": "build-babel",
    "name": "Debug",
    "program": "${workspaceRoot}/src/server.js",
    "outFiles": ["${workspaceRoot}/dist/**/*.js"]
  }]
}
Источник

Добавьте этот конфиг в свой launch.json,

{
"version": "0.2.0",
"configurations": [
    {   
        "cwd":"<path-to-application>",
        "type": "node",
        "request": "launch",
        "name": "babel-node debug",
        "runtimeExecutable": "<path-to-app>/node_modules/.bin/babel-node",
        "program": "<path-to-app-entry-file>/server.js",
        "runtimeArgs": ["--nolazy"]
    }
]
}

Не забудьте иметь файл.babelrc с предустановкой, определенной в корне вашего проекта. Также атрибут cwd в launch.json должен быть правильным, иначе компилятор babel не сможет найти.babelrc, и вы получите ошибки компиляции.

    {
        "presets": ["@babel/preset-env"]
    }

Запуск с этой конфигурацией автоматически запустит приложение на порту по умолчанию (обычно 5000) и подключится к сгенерированному порту отладки. Исходные карты будут работать без какой-либо дополнительной конфигурации, если вы не используете какой-то супер старый vscode

Источник

Чего не хватало в моем случае (VSCode 1.36.0), так это переопределения путей исходной карты:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug",
            "program": "${workspaceRoot}/src/cli/index.js",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "*": "${workspaceRoot}/src/*"
            },
            "outFiles": [
                "${workspaceRoot}/lib/**/*.js"
            ]
        }
    ]
}

Компиляция была вызвана через конвейер gulp, а исходные карты ссылались на cli/index.js вместо того src/cli/index.js. Переназначение с sourceMapPathOverrides исправил это.

Источник
Другие вопросы по тегам