vscode調試npm包技巧

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

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

https://segmentfault.com/a/1190000014664764

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"
            ]
          },
    ]
}

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}\\h5\\node_modules\\@vue\\cli-service\\bin\\vue-cli-service.js",
            "args": ["serve","--mode","test"],
            "stopOnEntry": true
        }
        
    ]
}

 

當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", //runtimeExecutable表示要使用的運行時，默認為node，這里我們配置成了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源碼大體流程