使用 Visual Studio 代码调试 ExpressJS 服务器端代码

Question

我使用

制作了一个简单的 CRUD 应用程序

快递：4.13.4
gulp: 3.9.1
mongodb:v3.0.6
反应：15.0.2.
节点：4.0.0

对于服务器端代码，我听说可以通过 Visual Studio 代码 (v1.1.1.).

进行调试

从 git bash 我通过 gulp serve 启动应用程序。但我不知道如何开始调试！

我的 gulp 任务的片段。

gulp.task('serve',['bundle','start-server'],function(){

    browserSync.init({
        proxy:'http://localhost:3000',
        port:9001
    });

});

当我们单击 VS Code 上的调试按钮以启动调试界面时，我们会看到一个 launch.json ，其中有两个配置选项。

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}",
        "stopOnEntry": false,
        "args": [],
        "cwd": "${workspaceRoot}",
        "preLaunchTask": null,
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "env": {
            "NODE_ENV": "development"
        },
        "externalConsole": false,
        "sourceMaps": false,
        "outDir": null
    },
    {
        "name": "Attach",
        "type": "node",
        "request": "attach",
        "port": 3000,
        "address": "localhost",
        "restart": false,
        "sourceMaps": false,
        "outDir": null,
        "localRoot": "${workspaceRoot}",
        "remoteRoot": null
    }
]

}

我猜这些是启动和附加配置。但是我们如何通过调试实际启动 gulp。

我看到人们通过将 "program" 键修改为 "program": "/usr/local/bin/grunt" 来启动 grunt 进程。但似乎我无法为 gulp

做到这一点

即使我通过 git bash 启动了我的应用程序并尝试 'attach' 提到的调试器，vs 代码也只显示一条错误消息说 'Cancelled' !

TLDR;

当我们在 VS 代码中启动调试时，我们如何启动 gulp（或）grunt（或）启动服务器？
是否可以通过 cmd 或 bash 从外部启动应用程序并且仍然能够使用调试器调试服务器端代码？如果是这样，launch.json 需要进行哪些更改？

Answer 1

好吧，大量的书签和链接之后我终于通过启动和附加调试成功了。

通过启动配置进行调试：

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

在下拉菜单中选择了启动选项的情况下，在 VSC 调试视图上按下绿色 > 按钮，您应该会在 VSC 控制台中看到类似这样的内容。

node --debug-brk=21735 --nolazy server.js

并且调试器应该在 server.js 文件的第一行暂停。使用断点调试！ :)

通过附加配置进行调试：

       {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        }

从外部启动您的服务器

$node --debug-brk server.js

您的提示应该在

处暂停

Debugger listening on port 5858

在下拉菜单中选择附加选项的情况下，在 VSC 调试视图上按绿色 > 按钮，调试器应自动附加自身并在 server.js

的第一行暂停

令人作呕的调试

使用 Visual Studio 代码调试 ExpressJS 服务器端代码

Debug ExpressJS server side code using Visual Studio Code

debugging

express

gulp

visual-studio-code

vscode-debugger