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 點擊添加配置文件

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

是vscode資源管理器的根目錄

1.2 啟動調(diào)試

點擊綠色箭頭，啟動調(diào)試

2. 調(diào)試npm scripts

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

2.1 添加npm scripts

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

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

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

打開 .vscode/launch.json 刪除 program 屬性 增加以下3個配置項， runtimeExecutable，runtimeArgs，port 。

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

2.3 啟動調(diào)試

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

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

 3.1 node_modules/.bin

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

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

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

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

3.2 不能直接加 --inspect-brk

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

{
 ...
 "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"
 },
 ...
}

啟動成功！

3.4 stopOnEntry

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

二、attach 附加到node.js

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

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

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

自動進入vscode的debug模式；

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

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

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

啟動步驟：

1.命令行以debug模式運行nodejs程序

 node --inspect-brk index.js

2.選擇并運行附加配置

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

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

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

1.命令行以debug模式運行nodejs程序

 node --inspect-brk index.js

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

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

總結(jié)

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

最新評論