如何在vscode中除錯程式碼?

除錯前端程式碼

1 在專案根目錄下面建立./vscode/launch.json檔案，內容如下

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      // 填寫你本地啟動專案的地址
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

2 啟動你的本地專案
示例npm start

3 按f5啟動除錯
vscode會自動開啟瀏覽器，然後跳轉至上述配置中url指向的地址。

4 新增斷點
在vscode中找到需要新增斷點的程式碼行，點選行號左側新增斷點。

5 重新整理瀏覽器，當執行到斷點處，程式碼就會停住，然後你就可以開始除錯你的程式碼了。

除錯前端程式碼（使用attch模式）

預設情況下，使用的是launch模式，也就是vscode會自動開啟一個瀏覽器視窗進行除錯，不過有時候這並不是我們想要的。我們可能已經執行了一個視窗，然後想對這個已存在的視窗進行除錯，這種情況就可以使用attach模式。

步驟：
1 在專案根目錄下面建立./vscode/launch.json檔案，內容如下

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Chrome",
      "type": "chrome",
      "request": "attach",
      // 預設用9222，也可以用其他，只要保證和--remote-debugging-port設定的埠一致就行了（後面會涉及）
      "port": 9222,
      // 填寫你本地啟動專案的地址
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

2 給chrome瀏覽器快捷方式的目標欄位新增引數
引數為--remote-debugging-port=9222（關鍵步驟）

完整的值會像這樣：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

3 啟動你的本地專案
示例npm start

4 按f5啟動除錯
vscode會關聯到已經開啟的專案地址，也就是上述配置中url指向的地址。

注意：開啟這個地址的chrome視窗，目標引數必須有remote-debugging-port=9222，否則會報如下錯誤：

5 新增斷點
在vscode中找到需要新增斷點的程式碼行，點選行號左側新增斷點。

6 重新整理瀏覽器，當執行到斷點處，程式碼就會停住，然後你就可以開始除錯你的程式碼了。

除錯node程式碼

1 新增除錯配置

// launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "debugging server.js",
      "type": "node",
      "request": "launch",
      // 指向你需要除錯的檔案，workspaceFolder為根目錄
      "program": "${workspaceFolder}/server.js",
    }
  ]
}

2 在vscode中找到需要新增斷點的程式碼行，點選行號左側新增斷點。

3 按f5啟動除錯
vscode會直接進入第2步的斷點處。

除錯webpack構建流程

直接按照package.json中scripts的命令除錯比如下面的命令，相當於npm start，也就是對npm start啟動的程式碼進行除錯。

上下文

// package.json
{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}

1 新增除錯配置

// launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "debugging webpack",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npm",
      // 對應到你想除錯package.json中的scripts指令碼，比如想除錯上面的start流程，就填start
      "runtimeArgs": ["start"],
    }
  ]
}

2 在vscode中找到需要新增斷點的程式碼行，點選行號左側新增斷點。
這裡需要進入node_modules中，找到你想要斷點的包中，新增斷點。