vscode調試npm包技巧

官網文檔：https://code.visualstudio.com/docs/nodejs/nodejs-debugging

nodet調試方法（日誌和debuuger）：https://blog.risingstack.com/how-to-debug-nodej-js-with-the-best-tools-available/

http://www.javashuo.com/article/p-cdvpojhg-mo.html

https://www.jianshu.com/p/8b034954abc9

(1)調試npm包非script執行，調試vue-cli配置以下

launch.json

{
    // 使用 IntelliSense 瞭解相關屬性。 
    // 懸停以查看現有屬性的描述。
    // 欲瞭解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node", //類型
            "request": "launch",  //有lanch和attach兩種
            "name": "Launch via NPM",
            "runtimeExecutable": "node",
            "args": ["${workspaceRoot}\\node_modules\\@vue\\cli-service\\bin\\vue-cli-service.js","build","--mode=test"],  //經過npm-link後的指令地址從node_modules的bin裏面去找（vue-cli-service build）
            "restart": true,
            "protocol": "inspector",    //至關於--inspect了
            "sourceMaps": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "runtimeArgs": [    //對應nodemon --inspect以後除了啓動文件以外的其餘配置
                // "--exec",
                // "babel-node",
                // "--presets",
                // "env"
            ]
          },
    ]
}

當request爲launch時，就是launch模式了，這是程序是從vscode這裏啓動的，若是是在調試那將一直處於調試的模式。而attach模式，是鏈接已經啓動的服務。好比你已經在外面將項目啓動，忽然須要調試，不須要關掉已經啓動的項目再去vscode中從新啓動，只要以attach的模式啓動，vscode能夠鏈接到已經啓動的服務。當調試結束了，斷開鏈接就好，明顯比launch更方便一點。

（2）調試npm包script執行

"scripts": {
  "start": "NODE_ENV=production PORT=8080 babel-node ./bin/www",
  "dev": "nodemon --inspect --exec babel-node --presets env ./bin/www"
},

{
  "name": "Launch via NPM",
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "npm",
  "runtimeArgs": [
    "run-script", "dev"    //這裏的dev就對應package.json中的scripts中的dev
  ],
    "port": 9229    //這個端口是調試的端口，不是項目啓動的端口
},

--inspect-brk=是node、nodemon打開調試，後面可加端口號--inspect-brk=5858

runtimeExecutable - This is the binary or script actually launched by VSCode. In this case it’s nodemon instead of your application. If you don’t have nodemon globally installed you can reference the relative path with ${workspaceRoot}/node_modules/nodemon/bin/nodemon.js.

args - This represents the last argument passed to nodemon, so it should be the main file of your application. 

runtimeArgs - This is the glue that holds all of this together. These arguments get passed in the order you specify to nodemon before args. Order is important, and these settings won’t work if they are in args. The --require and babel-register need to be separate because arguments in this list cannot have spaces; you’ll get an error if you try to do that.

sourceMaps - VSCode needs to know about source maps. If this setting, or the one in package.json, is missing then you’ll get an error.

（3）在debug中使用nodemon啓動

{
  "type": "node",
  "request": "launch",
  "name": "nodemon",
  "runtimeExecutable": "nodemon",
  "args": ["${workspaceRoot}/bin/www"],
  "restart": true,
  "protocol": "inspector",    //至關於--inspect了
  "sourceMaps": true,
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "runtimeArgs": [    //對應nodemon --inspect以後除了啓動文件以外的其餘配置
    "--exec",
    "babel-node",
    "--presets",
    "env"
  ]
},

注意這裏的runtimeArgs，若是這些配置是寫在package.json中的話，至關於nodemon --inspect --exec babel-node --presets env ./bin/www

 

https://www.jianshu.com/p/57cd63d169e0  vue-cli源碼大致流程