1. 調(diào)試node.js
我們先來看看vscode如何調(diào)試node.js。
1.1 新建項目
$ mkdir vscode-debug
$ cd vscode-debug
$ npm init -f
1.2 新建index.js
console.log('hello');
1.3 打開vscode
用vscode打開vscode-debug文件夾，作為vscode資源管理的根目錄。
1.4 添加vscode配置
打開工具欄的“調(diào)試”菜單，然后點擊“添加配置”。
vscode會讓我們選擇環(huán)境，這里我們選擇“Node.js”。
vscode會自動在工程目錄下創(chuàng)建一個 .vscode/launch.json 文件。
我們看到 .vscode/launch.json的configurations.program屬性為，
{
...
"configurations": [
{
...
"program": "${workspaceFolder}/index.js"
}
]
}
其中${workspaceFolder}/index.js表示了調(diào)試的入口，
workspaceFolder是vscode資源管理器的根目錄，
因此，上文中我們強調(diào)了項目目錄應(yīng)當為資源管理器的根目錄。
1.5 啟動調(diào)試
添加完調(diào)試配置之后，直接按F5，就可以啟動調(diào)試了。
在此之前，記得去 index.js 文件中打個斷點。
啟動調(diào)試之后，程序就會停在斷點處了，
2. 調(diào)試npm scripts
在實際項目中，好多命令放到了npm scritps中，
下面我們介紹調(diào)試npm scripts的辦法。
2.1 添加npm scripts
{
...
"scripts": {
...
"debug": "node --inspect-brk=5858 index.js"
},
...
}
其中，debug是npm scripts的名字，可以任取，
后面--inspect-brk=5858是必須的，其中5858是任意指定的調(diào)試端口號。
2.2 修改vscode調(diào)試配置
打開 .vscode/launch.json，
增加以下3個配置項，runtimeExecutable，runtimeArgs，port。
而program配置項就可以刪掉了，
"program": "${workspaceFolder}/index.js"
{
...
"configurations": [
{
...
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"debug"
],
"port": 5858
}
]
}
其中，runtimeExecutable表示要使用的運行時，默認為node，這里我們配置成了npm，
runtimeArgs的第二個參數(shù)，就是npm scripts的命令名，第一個參數(shù)run-script不要修改。
port指的是npm scripts中我們配置的--inspect-brk=5858調(diào)試端口號5858。
2.3 啟動調(diào)試
然后按F5，就可以啟動調(diào)試了，
程序停到了 index.js 我們打的斷點處。
3. 調(diào)試非node命令
3.1 node_modules/.bin
npm run會自動添加node_module/.bin 到當前命令所用的PATH變量中，
可參考npm-run-script。
例如，如果我們配置了名為build的npm scripts，
{
...
"scripts": {
"build": "webpack"
},
...
}
則npm run build實際調(diào)用的是 node_modules/.bin/webpack。
3.2 不能直接加 --inspect-brk
在這種情況下，直接加--inspect-brk=5858是不靈的。
{
...
"scripts": {
"debug": "webpack --inspect-brk=5858"
},
...
}
以上配置，會自動執(zhí)行npm run debug，但不會進入斷點。
3.3 轉(zhuǎn)換成node調(diào)用
{
...
"scripts": {
"debug": "node --inspect-brk=5858 ./node_modules/.bin/webpack"
},
...
}
這次就啟動成功了，這是因為--inspect-brk是node的參數(shù)，
我們需要將npm script中的命令改成node調(diào)用。
3.4 stopOnEntry
我們還可以設(shè)置 .vscode/launch.json 的 configurations.stopOnEntry屬性，
啟動調(diào)試后會，會自動將斷點停在代碼的第一行。
{
...
"configurations": [
{
...
"stopOnEntry": true,
}
]
}
