一、Auto Attach自动附加调试
1.1 开启自动附加
使用Ctrl+Shift+P打开快界面，输入Toggle Auto Attach，点击后出现三种模式和禁止该自动附加的调试，自行选择一个。
1.2 调试之前
通过1.1选择一个模式后，右下角终端会出现一个⚠的标志，点击关闭该终端重新开一个才有作用！之后就可以使用node启用想要调试的脚本
二、Attaching to Node.js
2.1 调试内部Node.js
在node命令后面添加 --inspect 或者 --inspect-brk即可
2.2 调试vue-cli构建
- 如果是要调试Vue-loader可以通过vue-cli-serve inspect查看webpack配置里使用的vue-loader路径，然后找到文件打断点。因为在调试的时候一直再vue-loader这个文件里打的断点一直没起作用，打开配置文件才发现是要在node_modules/vue-loader-v16/dist/index.js下打断点
- Auto Attach选 始终（always）模式 或者 仅带标志模式（onlyWithFlag）
- 执行node --inspect-brk ./node_modules/@vue/cli-service/bin/vue-clic-service serve --inline --progress
- 谷歌浏览器输入 chrome://inspect/#devices
三、使用配置文件
3.1 Launch via npm
添加Launch via npm后，要在package.json文件中配置debug命令，配置之后点击绿色启动按钮会自动执行package.json文件的debug脚本，之后会自动定位到打了断点的位置
- 添加Launch via npm
{
"name": "Launch via npm",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "debug"]
}
- package.json文件中配置debug命令
- 启动调试
3.2 通过Launch via npm调试vue-cli的构建过程中的loader
- 以调试vue-lodaer为准，首先使用vue-cli-serve inspect命令查看vue使用的最终的loader，我这里看到引用的loader路径是node_modules\vue-loader-v16\dist\index.js，所以要在这个文件里打断点才能调试到这里
