nodejs各種姿勢斷點除錯的方法
nodejs開啟debug模式通過傳遞引數 --inspect 或 --inspect-brk
,除錯方法分為IDE和chrome devtools兩種,下面就具體講解這兩種方式如何除錯node程式;
part1:VS Code除錯:
一、launch.json 配置
配置詳解看另一篇:VSCode launch.json配置詳解
淺析VSCode launch.json中的各種替換變數的意思 ${workspaceFolder} ${file} ${fileBasename} ${fileDirname}等
1 nodejs除錯:
1.1 點選新增配置檔案
我們看到 .vscode/launch.json的configurations.program屬性為 "${workspaceFolder}/express-app.js"
workspaceFolder
是vscode資源管理器的根目錄
1.2 啟動除錯
點選綠色箭頭,啟動除錯
2. 除錯npm scripts
在實際專案中,命令基本上都是放到了npm scritps中 ps:
注意除錯npm scripts時引數 --inspect
必須指定埠
2.1 新增npm scripts
{ ... "scripts": { ... "debug": "node --inspect-brk=6666 index.js" },... }
6666是任意指定的除錯埠號。
2.2 修改vscode除錯配置
開啟 .vscode/launch.json
program
屬性 增加以下3個配置項, runtimeExecutable,runtimeArgs,port
。
{ ... "configurations": [ { ... "runtimeExecutable": "npm",//預設是node,這裡改成npm "runtimeArgs": [ "run-script",//別名 run "debug"//對應上npm scripts上的debug ],"port": 6666 //除錯埠 } ] }
2.3 啟動除錯
啟動除錯方法同上
3. 除錯非node命令
3.1 node_modules/.bin
npm run
node_module/.bin
到當前命令所用的PATH變數中,例如:
{ ... "scripts": { "build": "webpack" },... }
執行 npm run build
實際上是呼叫 node_modules/.bin/webpack
而執行 node_modules/.bin/webpack
實際上會根據當前shell環境呼叫對應指令碼,檢視可以發現有3個同名不同字尾名的指令碼: webpack(標註了可執行程式sh) 、 webpack.cmd 、webpack.ps1
例如在cmd命令列工具下會呼叫 webpack.cmd
指令碼,檢視程式碼可以發現內部實際上是呼叫命令:
node ./node_modules/webpack/bin/webpack.js
3.2 不能直接加 --inspect-brk
這種情況下,直接加 --inspect-brk=6666
是不行的 以下配置,會自動執行npm run debug,但不會進入斷點。
{ ... "scripts": { "debug": "webpack --inspect-brk=6666" },... }
3.3 轉換成node呼叫
修改npm scripts:
{ ... "scripts": { "debug": "node --inspect-brk=6666 ./node_modules/webpack/bin/webpack.js" },... }
啟動成功!
3.4 stopOnEntry
設定 configurations.stopOnEntry=true
,啟動除錯後,斷點可以自動停在第一行程式碼上
二、attach 附加到node.js
1. Auto Attach 自動附加無需配置,快速開始除錯
開啟使用者設定,修改 "debug.node.autoAttach": "on"
,開啟自動附加
vscode整合終端輸入 node --inspect-brk index.js
自動進入vscode的debug模式;
2. 設定“附加”配置
跟自動附加相比,可以顯式配置各種除錯配置選項,示例配置如下:
{ "name": "Attach to Process","type": "node","request": "attach","processId": "${command:PickProcess}" },
啟動步驟:
1.命令列以debug模式執行nodejs程式
node --inspect-brk index.js
2.選擇並執行附加配置
3. 選擇要附加的程序 ,開啟除錯
part2: Chrome DevTools除錯:
Chrome DevTools是nodejs天生支援的除錯方式,使用步驟:
1.命令列以debug模式執行nodejs程式
node --inspect-brk index.js
2.開啟谷歌瀏覽器,訪問 chrome://inspect/#devices
,可以看到當前瀏覽器監聽的所有 inspect
3.點選下圖紅框內的超連結,會開啟Chrome DevTools面板,就可以使用他的各種功能
vscode遠端除錯外掛:Remote Development
總結
到此這篇關於nodejs各種姿勢斷點除錯的方法的文章就介紹到這了,更多相關nodejs 斷點除錯內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!