使用Visual Studio Code調試ExpressJS服務器端代碼

Question

我使用了一個簡單的CRUD應用程序

• 表達：4.13.4
• gulp：3.9.1
• mongodb：v3.0.6
• reactjs：15.0.2。
• 節點：4.0.0

對於服務器端代碼，我聽說可以通過Visual Studio Code（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
    }
]

}

我猜這些是啟動和附加配置。 但是我們如何通過調試來實現這一目標。

我看到人們通過將“程序”鍵修改為"program": "/usr/local/bin/grunt"來啟動grunt進程。 但似乎我無法為gulp做到這一點

即使我已經通過git bash啟動我的應用程序並嘗試“附加” 此處提到的調試器，vs代碼只顯示一條錯誤消息，說“已取消”！

TLDR;

• 當我們在VS代碼中啟動調試時，我們如何啟動gulp（或）grunt（或）啟動服務器？
• 是否可以通過cmd或bash從外部啟動應用程序，仍然可以使用調試器調試服務器端代碼？ 如果是這樣，launch.json需要進行哪些更改？

Answer 1

Allrighty，眾多書簽和鏈接后來我終於成功通過啟動和附加進行調試。

通過啟動配置調試：

      {
            "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的第一行暫停

調試廣告惡心