vscode Debugger詳解

一、Debugger簡介

Debugger，即調試器，是一種能夠讓開發者在程序運行時暫停程序的運行，並且可以檢查程序狀態的工具。在程序開發的過程中，調試器可以在程序出現問題時，幫助我們快速定位並修復問題。

二、vscode Debugger概述

vscode Debugger是Visual Studio Code集成式開發環境中的調試器。它能夠針對多種編程語言，提供全面的調試功能。

vscode Debugger的特點：

• 內置於Visual Studio Code中，可以快速啟動
• 支持多種編程語言
• 支持調試控制台、表達式求值、變量查看等功能
• 可以自定義調試器配置，滿足不同項目的需求

三、簡單使用實例

下面以Python為例，演示如何在vscode中使用Debugger。

首先，我們需要安裝Python插件，並在vscode中創建一個Python文件。

# example.py
def add(a, b):
  c = a + b
  return c

result = add(1, 2)
print(result)

在代碼中，我們定義了一個add函數，實現兩數相加，並在最後打印結果。

接下來，我們需要在代碼中添加斷點，以便在運行程序時暫停程序的執行，進行調試。將光標移到第三行代碼上（c = a + b），然後點擊該行代碼左側的空白區域，即可添加斷點。

接着，我們需要在vscode的調試界面配置Python環境和調試配置。點擊vscode左側的調試圖標，選擇“添加配置”，然後選擇Python。

vscode會在.vscode文件夾中創建一個“launch.json”文件，並預設一個Python配置：

// launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal"
    }
  ]
}

現在，我們需要修改該配置，指定Python解釋器的路徑，並將“stopOnEntry”設置為false，為了能夠讓程序運行到我們設置的斷點處暫停。

// launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "stopOnEntry": false,
      "pythonPath": "/usr/bin/python3"  // 修改為你的Python解釋器路徑
    }
  ]
}

修改完成後，我們就可以開始調試我們的Python程序了！點擊vscode左側的調試按鈕，然後點擊“啟動調試”按鈕，程序就開始運行了。

程序運行時，會在第三行代碼處停下來，等待我們的操作。此時，我們可以通過左側的調試面板查看程序狀態，並在面板中的“表達式求值”中輸入表達式進行查看。我們也可以在代碼中通過“懸停”和“變量查看”等功能查看變量值。

在調試面板中，我們還可以選擇單步執行、跳過當前語句、進入函數等操作，幫助我們快速定位問題。

調試完成後，我們可以選擇繼續執行程序或者停止程序的運行。

四、自定義調試器配置

vscode Debugger支持自定義調試器配置，以滿足不同項目的需求。

以前端開發為例，我們可以通過自定義調試器配置，使用Chrome DevTools對前端代碼進行調試。首先，需要安裝“Debugger for Chrome”插件。

然後，我們需要在.vscode文件夾中創建一個“launch.json”文件，並設置調試器配置。下面是一個配置示例：

// launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    }
  ]
}

配置說明：

• “name”: 調試器名稱
• “type”: 調試器類型
• “request”: 啟動方式
• “url”: 調試Web應用的URL
• “webRoot”: Web應用的WebRoot路徑
• “sourceMapPathOverrides”: 源碼路徑映射

完成配置後，我們可以通過調試按鈕啟動調試器，然後打開Chrome DevTools進行調試。

五、總結

本文對vscode Debugger進行了詳細的介紹，包括簡介、概述、使用實例和自定義配置等內容。通過本文的學習，相信大家對vscode Debugger已經有了更深入的了解。