nodejs開啟debug模式通過傳遞參數(shù) --inspect 或 --inspect-brk ,調(diào)試方法分為IDE和chrome devtools兩種，下面就具體講解這兩種方式如何調(diào)試node程序；

part1:VS Code調(diào)試：

 一、launch.json 配置

配置詳解看另一篇：VSCode launch.json配置詳解

淺析VSCode launch.json中的各種替換變量的意思 ${workspaceFolder} ${file} ${fileBasename} ${fileDirname}等

1 nodejs調(diào)試:

1.1 點(diǎn)擊添加配置文件

我們看到 .vscode/launch.json的configurations.program屬性為 "${workspaceFolder}/express-app.js" ,表示調(diào)試的入口文件，其中 workspaceFolder

是vscode資源管理器的根目錄

1.2 啟動(dòng)調(diào)試

點(diǎn)擊綠色箭頭，啟動(dòng)調(diào)試

2. 調(diào)試npm scripts

在實(shí)際項(xiàng)目中，命令基本上都是放到了npm scritps中 ps: 注意調(diào)試npm scripts時(shí)參數(shù) --inspect 必須指定端口

2.1 添加npm scripts

{
 ...
 "scripts": {
 ...
 "debug": "node --inspect-brk=6666 index.js"
 },
 ...
}

6666是任意指定的調(diào)試端口號(hào)。

2.2 修改vscode調(diào)試配置

打開 .vscode/launch.json 刪除 program 屬性 增加以下3個(gè)配置項(xiàng)， runtimeExecutable，runtimeArgs，port 。

{
 ...
 "configurations": [
 {
 ...
 "runtimeExecutable": "npm", //默認(rèn)是node,這里改成npm
 "runtimeArgs": [
 "run-script",//別名 run
 "debug"http://對(duì)應(yīng)上npm scripts上的debug
 ],
 "port": 6666 //調(diào)試端口
 }
 ]
}

2.3 啟動(dòng)調(diào)試

啟動(dòng)調(diào)試方法同上

3. 調(diào)試非node命令

 3.1 node_modules/.bin

npm run 會(huì)自動(dòng)添加 node_module/.bin 到當(dāng)前命令所用的PATH變量中，例如：

{
 ...
 "scripts": {
 "build": "webpack"
 },
 ...
}

運(yùn)行 npm run build 實(shí)際上是調(diào)用 node_modules/.bin/webpack 而運(yùn)行 node_modules/.bin/webpack 實(shí)際上會(huì)根據(jù)當(dāng)前shell環(huán)境調(diào)用對(duì)應(yīng)腳本，查看可以發(fā)現(xiàn)有3個(gè)同名不同后綴名的腳本： webpack(標(biāo)注了可執(zhí)行程序sh) 、 webpack.cmd 、webpack.ps1 例如在cmd命令行工具下會(huì)調(diào)用 webpack.cmd 腳本,查看代碼可以發(fā)現(xiàn)內(nèi)部實(shí)際上是調(diào)用命令：

node ./node_modules/webpack/bin/webpack.js

3.2 不能直接加 --inspect-brk

這種情況下，直接加 --inspect-brk=6666 是不行的 以下配置，會(huì)自動(dòng)執(zhí)行npm run debug，但不會(huì)進(jìn)入斷點(diǎn)。

{
 ...
 "scripts": {
 "debug": "webpack --inspect-brk=6666"
 },
 ...
}

3.3 轉(zhuǎn)換成node調(diào)用

修改npm scripts:

{
 ...
 "scripts": {
 "debug": "node --inspect-brk=6666 ./node_modules/webpack/bin/webpack.js"
 },
 ...
}

啟動(dòng)成功！

3.4 stopOnEntry

設(shè)置 configurations.stopOnEntry=true ，啟動(dòng)調(diào)試后，斷點(diǎn)可以自動(dòng)停在第一行代碼上

二、attach 附加到node.js

1. Auto Attach 自動(dòng)附加無需配置，快速開始調(diào)試

打開用戶設(shè)置，修改 "debug.node.autoAttach": "on" ，開啟自動(dòng)附加

vscode集成終端輸入 node --inspect-brk index.js

自動(dòng)進(jìn)入vscode的debug模式；

2. 設(shè)置“附加”配置

跟自動(dòng)附加相比，可以顯式配置各種調(diào)試配置選項(xiàng)，示例配置如下：

 {
 "name": "Attach to Process",
 "type": "node",
 "request": "attach",
 "processId": "${command:PickProcess}"
 },

啟動(dòng)步驟：

1.命令行以debug模式運(yùn)行nodejs程序

 node --inspect-brk index.js

2.選擇并運(yùn)行附加配置

3. 選擇要附加的進(jìn)程 ，開啟調(diào)試

part2: Chrome DevTools調(diào)試:

Chrome DevTools是nodejs天生支持的調(diào)試方式，使用步驟：

1.命令行以debug模式運(yùn)行nodejs程序

 node --inspect-brk index.js

2.打開谷歌瀏覽器，訪問 chrome://inspect/#devices ，可以看到當(dāng)前瀏覽器監(jiān)聽的所有 inspect 3.點(diǎn)擊下圖紅框內(nèi)的超鏈接，會(huì)打開Chrome DevTools面板，就可以使用他的各種功能

vscode遠(yuǎn)程調(diào)試插件:Remote Development

總結(jié)

到此這篇關(guān)于nodejs各種姿勢(shì)斷點(diǎn)調(diào)試的方法的文章就介紹到這了,更多相關(guān)nodejs 斷點(diǎn)調(diào)試內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論