使用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

以vue-cli@3.x生成構建配置爲例, 通常而言較爲複雜構建配置, 須要檢查 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到運行的進程中.

相關文檔/擴展閱讀

• https://code.visualstudio.com/docs/editor/debugging
• https://code.visualstudio.com/docs/nodejs/nodejs-debugging
• https://github.com/microsoft/vscode-recipes
• https://github.com/search?q=vscode+recipe