1. 程式人生 > 程式設計 >nodejs各種姿勢斷點除錯的方法

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 點選新增配置檔案

nodejs各種姿勢斷點除錯的方法

我們看到 .vscode/launch.json的configurations.program屬性為 "${workspaceFolder}/express-app.js"

,表示除錯的入口檔案,其中 workspaceFolder

是vscode資源管理器的根目錄

nodejs各種姿勢斷點除錯的方法

1.2 啟動除錯

點選綠色箭頭,啟動除錯

nodejs各種姿勢斷點除錯的方法

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" ,開啟自動附加

nodejs各種姿勢斷點除錯的方法

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.選擇並執行附加配置

nodejs各種姿勢斷點除錯的方法

3. 選擇要附加的程序 ,開啟除錯

nodejs各種姿勢斷點除錯的方法

part2: Chrome DevTools除錯:

Chrome DevTools是nodejs天生支援的除錯方式,使用步驟:

1.命令列以debug模式執行nodejs程式

 node --inspect-brk index.js

2.開啟谷歌瀏覽器,訪問 chrome://inspect/#devices ,可以看到當前瀏覽器監聽的所有 inspect 3.點選下圖紅框內的超連結,會開啟Chrome DevTools面板,就可以使用他的各種功能

nodejs各種姿勢斷點除錯的方法

vscode遠端除錯外掛:Remote Development

總結

到此這篇關於nodejs各種姿勢斷點除錯的方法的文章就介紹到這了,更多相關nodejs 斷點除錯內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!