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源码大体流程