1. 調(diào)試node.js
我們先來(lái)看看vscode如何調(diào)試node.js舔亭。
1.1 新建項(xiàng)目
$ 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)試”菜單馏谨，然后點(diǎn)擊“添加配置”伪货。
vscode會(huì)讓我們選擇環(huán)境威鹿，這里我們選擇“Node.js”。
vscode會(huì)自動(dòng)在工程目錄下創(chuàng)建一個(gè) .vscode/launch.json 文件瞬逊。
我們看到 .vscode/launch.json的configurations.program屬性為檐迟，
{
...
"configurations": [
{
...
"program": "${workspaceFolder}/index.js"
}
]
}
其中${workspaceFolder}/index.js表示了調(diào)試的入口，
workspaceFolder是vscode資源管理器的根目錄码耐，
因此追迟，上文中我們強(qiáng)調(diào)了項(xiàng)目目錄應(yīng)當(dāng)為資源管理器的根目錄。
1.5 啟動(dòng)調(diào)試
添加完調(diào)試配置之后骚腥，直接按F5敦间，就可以啟動(dòng)調(diào)試了。
在此之前，記得去 index.js 文件中打個(gè)斷點(diǎn)廓块。
啟動(dòng)調(diào)試之后厢绝，程序就會(huì)停在斷點(diǎn)處了，
2. 調(diào)試npm scripts
在實(shí)際項(xiàng)目中带猴，好多命令放到了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)試端口號(hào)娄周。
2.2 修改vscode調(diào)試配置
打開 .vscode/launch.json，
增加以下3個(gè)配置項(xiàng)沪停，runtimeExecutable煤辨，runtimeArgs，port木张。
而program配置項(xiàng)就可以刪掉了众辨，
"program": "${workspaceFolder}/index.js"
{
...
"configurations": [
{
...
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"debug"
],
"port": 5858
}
]
}
其中，runtimeExecutable表示要使用的運(yùn)行時(shí)舷礼，默認(rèn)為node鹃彻，這里我們配置成了npm，
runtimeArgs的第二個(gè)參數(shù)且轨，就是npm scripts的命令名浮声，第一個(gè)參數(shù)run-script不要修改虚婿。
port指的是npm scripts中我們配置的--inspect-brk=5858調(diào)試端口號(hào)5858旋奢。
2.3 啟動(dòng)調(diào)試
然后按F5，就可以啟動(dòng)調(diào)試了然痊，
程序停到了 index.js 我們打的斷點(diǎn)處至朗。
3. 調(diào)試非node命令
3.1 node_modules/.bin
npm run會(huì)自動(dòng)添加node_module/.bin 到當(dāng)前命令所用的PATH變量中，
可參考npm-run-script剧浸。
例如锹引，如果我們配置了名為build的npm scripts，
{
...
"scripts": {
"build": "webpack"
},
...
}
則npm run build實(shí)際調(diào)用的是 node_modules/.bin/webpack唆香。
3.2 不能直接加 --inspect-brk
在這種情況下嫌变，直接加--inspect-brk=5858是不靈的。
{
...
"scripts": {
"debug": "webpack --inspect-brk=5858"
},
...
}
以上配置躬它，會(huì)自動(dòng)執(zhí)行npm run debug腾啥，但不會(huì)進(jìn)入斷點(diǎn)。
3.3 轉(zhuǎn)換成node調(diào)用
{
...
"scripts": {
"debug": "node --inspect-brk=5858 ./node_modules/.bin/webpack"
},
...
}
這次就啟動(dòng)成功了，這是因?yàn)?code>--inspect-brk是node的參數(shù)倘待，
我們需要將npm script中的命令改成node調(diào)用疮跑。
3.4 stopOnEntry
我們還可以設(shè)置 .vscode/launch.json 的 configurations.stopOnEntry屬性，
啟動(dòng)調(diào)試后會(huì)凸舵，會(huì)自動(dòng)將斷點(diǎn)停在代碼的第一行祖娘。
{
...
"configurations": [
{
...
"stopOnEntry": true,
}
]
}
