vscode 调试 ES6 应用程序

Question

我有 VSCode 0.5.0。我将 compilerOptions 标志设置为 "ES6"，编辑器开始识别我的 ES6 代码是正确的。我安装了 babel。我的 Mocha 测试使用 babel 编译器并且我的测试通过了。当我使用 babel-node 启动它时，我的应用程序从命令行运行没有任何问题。当我从 VSCode 中调试应用程序时，它在没有 ES6 支持的情况下启动，并且应用程序因 ES6 语法问题而失败。是否有我错过打开的调试设置？

Answer 1

默认情况下 VSCode 仅使用 --debug-brk 选项启动节点。这不足以启用 ES6 支持。如果你能找出 'babel-node' 传递给节点的选项，你可以在 VSCode 启动配置中指定相同的选项（通过 runtimeArgs 属性）。但这并不能解决 babel-node 在运行之前转译你的 ES6 代码的问题。

或者您可以尝试将启动配置中的 'runtimeExecutable' 设置为 'babel-node'。这种方法适用于其他节点包装器，但我尚未验证是否适用于 babel-node。

第三个选项（应该有效）是使用 VSCode 的附加模式：为此从带有“--debug”选项的命令行启动 babel-node。它应该打印一个端口号。然后使用该端口在 VSCode 中创建一个 'attach' 启动配置。

Answer 2

假设您已 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"
            ],
...

Answer 3

以下是如何让 VSCode 调试器与 Babel 6+ 一起工作：

首先在本地安装依赖：

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

然后运行 babel-node:

$ 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

最后，如上所示附加调试器。

Answer 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 添加了 babel-register 运行时参数。

Answer 5

有两种方法：

第一个选项使用 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 window，导航到您的 package.json 文件并执行：

npm run build

打开您的 VS Code 并运行您的代码。它会运行并且会在你所有的断点处停止。它起作用的原因是生成了源映射并且 VS 知道如何将它们映射到您的代码。

使用 VS Code 任务的第二个选项：

在 VS Code 中添加以下任务 (Ctrl + Shift + P) 并键入 'Tasks: Configure Task Runner':

将以下代码添加到 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 在第一步中所做的相同。

您还需要在 .babelrc（位于项目的根目录）文件中配置 babel，如下所示：

{
  "presets": [
    "es2015-node6"
  ]
}

和jsconfig.json（位于项目的根目录）

{
  "compilerOptions": {
    "target": "ES6"
  },
  "include": [
    "src/**/*"
  ]
}

Answer 6

babel + nodemon

在 VS 代码终端中，使用 --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.

从现在开始，您可以调试您的应用程序。

Answer 7

babel-node & vs 代码附加

在 package.json 中配置 npm 脚本:

"scripts": {
    "debug": "babel-node --debug-brk demo.js --presets es2015,stage-2"
}

添加vs代码调试配置：

{
    "name": "Attach",
    "type": "node",
    "protocol": "legacy",
    "request": "attach",
    "port": 5858
}

Answer 8

使用 bael-node 转译时，您应该在脚本中添加“--inspect-brk”，这样脚本可能会在遇到断点时中断。

例如：

"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-code 添加以下调试器配置以附加到此进程：（在 launch.json）

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

保存后，点击"start debugging"按钮，附加到节点之前发起的进程。您可以阅读更多相关内容 here

Answer 9

这是我的配置，效果很好！我正在使用 VSCode 调试、mocha 6.1.4、节点：v8.16.0 和 Babel 版本 6。

确保在runtimeArgs中加载babel-register和babel-polyfill，否则你会得到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
}

vscode 调试 ES6 应用程序

vscode debug ES6 application

debugging

node.js

ecmascript-6

babeljs

visual-studio-code

babel + nodemon