使用vscode除錯你的node應用
都9102年了, 你的nodejs應用還在用console除錯嗎?
從一開始使用 webstorm 內建的 debug 功能, 到使用node-inspector 庫進行除錯順便脫離 webstorm 的笨重, 再後來 nodejs 內建了debugger 模組 也可以幫助除錯我們的應用.
目前個人使用 vscode 進行日常開發, 本文主要介紹 vscode 平臺的 debugger 除錯功能.
vscode 本身就內建了 nodejs 的 debug 支援, 除此之外還有有非常多 debug 的擴充套件外掛可供安裝使用.
可以點選除錯選單
->安裝除錯附加器
, 會自動去到下載外掛的頁面, 並篩選出debugger
型別的外掛, 按下載量進行排序.
不僅支援 nodejs/js 的除錯, 如 C/C++, python, go 等都有相應 debugger 外掛, 一般而言下載量更多都會比較靠譜.
而我們主要是為了除錯 nodejs 應用, 就不需要額外去下載外掛了.
快速對當前檔案進行 debug
要對當前開啟的檔案進行 debug 在 vscode 是非常簡單的事, 只需要按快捷F5
或在編輯器左側 debug 面板按下啟動的按鈕, 然後選擇 debug 型別即可.
注意: 只有下載了對應的 debug 外掛這裡才會有顯示並可供選擇, 例如只有安裝了 C++ debug 擴充套件外掛, 這裡才會出現 C++的選項.
啟動之後就可以對當前檔案進行除錯, 除錯介面有幾個模組的內容, 可以看到斷點, 呼叫堆疊, 指令碼載入情況, 除錯控制檯等.
留意下除錯控制檯, 在除錯時 vscode 執行的命令, 實際上就是使用了 nodejs 原生的debuuger 模組 .
新建 debug 配置
雖然可以很方便對當前檔案進行 debug, 但很多時候並不能滿足我們的除錯需求.
因為需要除錯的程序大多都是需要特定的命令進行啟動的, 例如構建命令, 測試命令, 或是後端應用的啟動命令.
而上面也看到除錯時執行的命令, 只是簡單用 node 運行當前檔案並帶上除錯標誌(--inspect-brk
)而已.
這個時候我們需要對特定除錯目標單獨進行配置
去到編輯器面板左側選單, 進去除錯
面板, 然後點選新建新增配置
, 選取對應的 debug 型別即可. 這裡直接選 node 即可.
之後 vscode 會在開啟專案路徑中幫我們新增.vscode/launch.json
檔案, 檔案中已經補充了最基礎的配置.
{
// 使用 IntelliSense 瞭解相關屬性。
// 懸停以檢視現有屬性的描述。
// 欲瞭解更多資訊，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${file}"
}
]
}
configurations
數組裡面的每一個物件, 都是一個單獨的除錯配置, 其中type
,request
,name
為必填引數.
- type: debug 執行型別, 如 node/go/c/c++....
- request: launch/attach, 兩者一同將在下面講解
- name: 用於在除錯面板啟動時區分開每個配置
除了這三個引數以外其餘引數均為可選引數.
剩餘可配置的引數以及其對應的可選值數量眾多, 大家可翻閱文件(debugging#launchjson-attributes) 檢視具體引數的意義.
使用^(control) + space(空格)
快捷鍵可以喚起程式碼提示, 也能看到相應說明
先來簡單看下預設的基礎配置
注意: vscode 會根據當前開啟的專案的情況給出最適合的配置, 如讀取package.json
中的scripts
欄位並進行配置, 所以預設配置不一定都相同.
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${file}"
}
其中program
引數為可執行的命令或檔案的絕對路徑, 可以理解為程式的啟動命令.
而${file}
佔位符其含義則為編輯器當前焦點所處的檔案.
所以使用上面的配置來啟動 debug 時, 效果和我們上面提到的對當前檔案進行 debug 是一樣的.
再舉個我平常使用比較頻繁的場景的例子. 就是程式的啟動命令為一個 npm 模組提供的命令.
- 啟動測試程序: Jest/Mocha/Ava
- 啟動構建程序: Webpack/Parcel
- 啟動後端程序: Sails/Meteor
以[email protected]
生成構建配置為例, 一般而言較為複雜構建配置, 需要檢查 cli 生成 webpack 配置對不對.
很多時候生成的構建配置如果不符合我們的預期, 而又沒辦法一眼看出問題所在時, 我們就可以對生成配置的過程進行除錯.
根據vue-cli 文件#審查專案的-webpack-配置
, 我們可以執行vue-cli-service inspect
來來審查我們的 webpack 配置.
而vue-cli-service
是開發依賴中@vue/cli-service
包提供的一個命令, 具體存放路徑為node_modules/.bin/vue-cli-service
. 這個時候我們可以這樣進行配置
{
"type": "node",
"request": "launch",
"name": "除錯inspect檢查webpack config生成邏輯",
"program": "${workspaceFolder}/node_modules/.bin/vue-cli-service",
"args": ["inspect"],
"env": {
"VUE_CLI_SERVICE_CONFIG_PATH": "${workspaceFolder}/build/vue.config.js"
},
"cwd": "${workspaceFolder}"
}
簡單解釋下上面的配置, 啟動命令為當前工作專案目錄(${workspaceFolder})
下的 node_modules/.bin/vue-cli-service.
啟動引數(args
)為inspect
.
env 為配置 node 環境變數(process.env), 其中指定了 VUE_CLI_SERVICE_CONFIG_PATH 為當前工作專案目錄(${workspaceFolder})
下的 build/vue.config.js.
cwd 可指定在某一資料夾下執行啟動命令.
使用上面的配置執行時. 可觀察除錯控制檯的輸出.
/usr/local/bin/node --inspect-brk=31449 node_modules/.bin/vue-cli-service inspect
接著就可以對生成配置的過程進行除錯.
request: launch / attach
因為除錯配置中可選引數實在太多了, 對其一一進行解析意義不大.
再來有很多引數我也沒有實際使用過, 解讀可能出現偏差, 所以這裡就不班門弄斧了, 有需要可以直接翻閱官方文件(debugging)
這裡主要講下必填引數 request, 有兩個可選值,launch(啟動)
和attach(附加)
.
分別代表 vscode 目前支援的兩種除錯模式, 分別對應兩種工作流.
回到我們最熟悉的 debug 工具 - chrome devtools, 如果是我們日常對網頁進行除錯這樣的工作流, 對應回 vscode 的除錯模式, 就是attach
模式.
因為當我們開啟 devtools 時, 瀏覽器已經在運行了, 而開啟 devtools 只是簡單的把除錯工具attaching
到瀏覽器而已.
而 vscode 中的attach
模式也是一樣的道理, 我們可以先以 debug 模式執行程式, 然後通過attach
把 vscode 的 debugger 連線到已經執行的程式中去.
而launch
則可以理解為, vscode 幫我們以 debug 模式來執行程式, 並自動把 vscode 的 debuggerattach
到執行的程序中.