vscode 開發調試斷點配置 launch.json

前提

對于開發者來講，怎麼科學合理的進行程式調試是至關重要的。調試工具可以協助開發者清晰的看到程式的走向以及程式每一步執行的詳細資訊。

開發前端項目，比如 React,vue等，開發者可以直接在代碼中插入

debugger

進行調試。

Node 程式調試，我們可以借助開發工具 vscode 提供的能力進行操作。

調試配置

1. 選擇調試選項，

   create a lunch.json file

1. 選擇需要調試的環境，以 Node 程式調試

系統生成最基礎的模版資訊

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program", //調試程式名稱，友善開發者區分
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/index.js" // 調試程式入口
        }
    ]
}
           

根據

program

參數可以看出，預設是以跟路徑下

index.js

作為入口執行調試。啟動方式類似于直接控制台

node index.js

，但是有時候我們碰到使用必須使用

npm

啟動的程式，比如使用

eggjs

nest

這些架構時，入口 js 是被隐藏的，都是通過架構提供的

bin

指令啟動的。

1. npm 啟動調試

vscode 直接提供可視化操作讓我們繼續追加

configuration

配置資訊。

vscode 提供了很多

configuration

配置模版，因為此處需要調試

npm

腳本，是以選擇下圖選項。

提供的子產品大家感興趣可以都自己嘗試下，畢竟

紙上得來終覺淺

。

{
  "version": "0.2.0",
  "configurations": [
  // npm 調試配置
    {
      "command": "npm dev",
      "name": "NPM 調試",
      "request": "launch",
      "type": "node-terminal"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "JS檔案調試", //調試程式名稱，友善開發者區分
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/app.js" // 調試程式入口
    }
  ]
}

           

1. 選擇調試配置

1. 調試快捷鍵 F5
2. 同時啟動多個調試程序

// launch.json 

 "compounds": [
    {
      "name": "同時調試",
      "configurations": ["NPM 調試", "JS檔案調試"],
    }
  ]
           

調試控制

按鈕功能說明從左到右依次說明

• Continue 直接跳過目前斷點到下一個斷電或者直接結束斷點
• Step Over 單步執行時，遇到子函數時不會進行子函數内執行，而是執行完整個子函數
• Step Into 單步執行時，遇到子函數會進入内部并且繼續單步執行
• Step Out 單步執行進入子函數内部時， 可以執行完子函數餘下部分，并且傳回上一層函數調用處
• Restart 重新執行
• Stop 關閉