讓VSCode Debug更高效的調試技巧

一、使用斷點調試代碼

VSCode提供了非常強大的斷點功能，使得調試代碼更加高效。我們可以在需要調試的代碼行左側單擊滑鼠，在代碼行號處設置斷點。當代碼運行到該斷點時，程序會自動暫停運行，等待我們進行調試操作。

在斷點暫停時，可以使用滑鼠、鍵盤等方式對代碼進行調試。比如，可以使用F10、F11等快捷鍵單步跳過或進入函數；可以使用滑鼠選中變數或表達式，實時查看其值；還可以使用控制台輸入命令來執行相關操作。

撤銷斷點可以隨時點擊斷點處的圓點，或者在斷點面板中移除。

// 示例代碼
function add(a, b) {
  let c = a + b;
  return c;
}
let result = add(1, 2);
console.log(result);

二、使用條件斷點

有時候我們只希望在某個條件滿足的情況下才進行調試。這時候可以使用條件斷點。

在VSCode中，可以在設置斷點時，在斷點設置面板中輸入條件。比如，我們想要在result等於3時暫停運行，可以在斷點設置面板中輸入result == 3。

// 示例代碼
function add(a, b) {
  let c = a + b;
  return c;
}
let result = add(1, 2);
if (result == 3) {
  debugger; // 設置條件斷點
}
console.log(result);

三、使用調試控制台

VSCode提供了非常方便的調試控制台，可以幫助我們更好地理解程序運行過程和取得更多的調試信息。這些信息包括程序變數、表達式、堆棧等信息。

在程序暫停運行時，可以使用調試控制台查看變數、表達式的值。同時，也可以在控制台輸入命令以執行相關操作。

例如，我們可以輸入console.log(變數名)在控制台中列印出變數的值。還可以使用debugger語句在代碼中設置斷點，進行更加靈活的調試。

// 示例代碼
function add(a, b) {
  let c = a + b;
  return c;
}
let result = add(1, 2);
debugger; // 在代碼中設置斷點
console.log(result);

四、使用多個Launch配置

在VSCode中，我們可以通過配置launch.json文件，來指定不同的調試配置。這樣可以在不同的場景中切換調試模式，以提高調試效率。

例如，我們可以在launch.json中配置不同的運行環境，如Chrome、Node.js等。還可以指定不同的啟動命令和環境變數，並可以設置相關調試參數。

// launch.json 示例文件
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch index.html in Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8080/index.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch app.js in Node.js",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/app.js"
    }
  ]
}

五、在VSCode中使用調試插件

除了VSCode自帶的調試功能外，我們還可以在VSCode插件市場中找到各種調試插件，以擴展調試功能和提高調試效率。

例如，JS Debug、JavaScript Debugger、React Native Tools等插件，都為我們提供了更加全面的調試功能，可以大大減少我們調試過程中的煩惱。

六、總結

VSCode是一款非常強大的編程編輯器，其調試功能也是非常值得稱讚的。使用VSCode調試技巧，可以讓我們更加高效地進行代碼調試，在開發過程中提高效率和提高開發體驗。