如何在vscode中調試nodejs代碼

最近接觸了一個前端react，nodejs做轉發層的項目，打包部署到服務器上的也不再是純靜態文件了，而是要在服務器上安裝node並啟動打包后的項目，由於需要在項目中需要debuge nodejs所以記錄一下

 

package.json的script如下（關注dev即可）：

"scripts": {
    "build": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig.webpack.config.json\" webpack --config webpack.config.ts && tsc --build tsconfig.build.json",
    "build:uat": "cross-env NODE_ENV=uat TS_NODE_PROJECT=\"tsconfig.webpack.config.json\" webpack --config webpack.config.ts && tsc --build tsconfig.build.json && mv ./build/server.uat.js ./build/server.js",
    "test:lint": "tslint -c tslint.json '{src,packages}/**/*.{ts,tsx}'",
    "dev": "cross-env NODE_ENV=development SERVER_PORT=3000 CONSOLE_CONFIG=\"config/console.dev.json\" node -r ts-node/register/transpile-only ./server.dev.ts",
    "start": "ts-node ./server.ts"
  },

 

vscode的tasks.json如下（task.json的配置就是為了執行上面的script dev腳本）

{
// 有關 tasks.json 格式的文檔，請參見
    // https://go.microsoft.com/fwlink/?LinkId=733558
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "dev", //合起來就是npm run dev
            "problemMatcher": []
        }
    ]
}

 

vscode的launch.json如下（launch.json的配置為腳本設置啟動參數，如下，在.vscode/launch.json文件中，紅色部分設置運行條件，黃色部分配置script腳本）

{
  // 使用 IntelliSense 了解相關屬性。
  // 懸停以查看現有屬性的描述。
  // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "runtimeArgs": ["-r", "ts-node/register/transpile-only"], "env": { "NODE_ENV": "development", "SERVER_PORT": "3000", "CONSOLE_CONFIG": "config\\console.dev.json", //此json配置了啟動時的一些項目參數，可選 "CONSOLE_CONFIG_PATH": "C:\\Users\\jim.hu\\Desktop\\project\\operaconnector-console" },
      "args": ["${workspaceFolder}\\server.dev.ts"] //此文件就是項目的啟動文件，如啟動Koa，再由koa加載前端react資源

    }
  ]
}