vscode调试ES6应用程序

Question

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

Answer 1

以下是如何让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 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

您可以尝试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 4

默认情况下,VSCode仅使用--debug-brk选项启动节点.这还不足以启用ES6支持.如果您可以找到'babel-node'传递给节点的选项,您可以在VSCode启动配置中指定相同的选项(通过runtimeArgs属性).但这并没有解决babel-node在运行之前转换ES6代码的问题.

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

第三个选项(应该可以使用)是使用VSCode的附加模式:对于这个启动babel-node来自命令行的'--debug'选项.它应该打印一个端口号.然后在VSCode中使用该端口创建"附加"启动配置.

Answer 5

babel + nodemon

在VS Code Terminal中,使用以下--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.

从现在开始,您可以调试您的应用程序.