最近在寫NodeJS相關的專案,執行在docker容器中,也是想研究一下斷點除錯,於是查閱相關資料,最終順利配置好了。
首先我選擇了VsCode作為ide,並用VsCode來做NodeJS視覺化debug的工作。
由於VsCode 已將除錯工具內建,所以只需要增加除錯配置。應遵循以下步驟:
第一步:單擊首選項 -> 設定,開啟設定選項卡。如下面的螢幕截圖。
第二步:在搜尋輸入中搜尋“node debug”,你會看到Debug> JavaScript:Auto Attach Filter選項,選擇“smart”作為選項的值。它將啟用nodeJs的除錯。
第三步: 單擊左側工具欄上的除錯圖示,如圖所示。然後單擊執行和除錯按鈕,並新增配置。
點選Add Configuration將跳轉到一個名為 launch.json(./vscode/launch.json) 的檔案,編寫後的完整配置如下所示。
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "attach", "name": "Debug super api in docker", "restart": true, "port": 7676, "address": "localhost", "localRoot": "${workspaceFolder}", "remoteRoot": "/super-api", "protocol": "inspector" } ] }
對上面的配置,我簡單介紹一下。由於docker中的容器是被宿主機掛載進來的,所以要單獨配置一個remoteRoot配置項,它的值就是實際專案在容器中的目錄路徑。
而port填寫的不是專案執行的埠號,而是node命令中--inspect設定的埠號,在我的專案中我在執行該容器的時候會把這個7676的埠暴露給宿主機(真實電腦)
編輯好這個配置檔案後,就可以設定一下斷點,然後點選start debug按鈕即可開始debug了。
執行的效果,如圖所示。
可以看到Variables皮膚裡面有顯示執行到斷點處的相關變數情況,而CALL STACK部分記錄呼叫堆,方便我們追蹤整個程式的呼叫層級和過程。左邊最下面顯示的是我們設定的所有斷點(breakpoint),標記紅色的是被執行到的斷點。
一句話總結:一個後端程式設計師最基本的修養是能斷點除錯程式。