使用 vscode 除錯前端程式碼

使用 vscode 除錯前端程式碼

    今天我們以webpack專案為基礎講解配置
複製程式碼

1. 安裝外掛 Debugger for Chrome

2. 修改 config/index.js

將devtool: 'cheap-module-eval-source-map' 修改為 devtool: 'source-map'
將 cacheBusting: true 修改為 cacheBusting: false
複製程式碼

3. 點選除錯上面的小齒輪，選擇Chrome，自動生成配置檔案。修改配置檔案為：

{
  // 使用 IntelliSense 瞭解相關屬性。 
  // 懸停以檢視現有屬性的描述。
  // 欲瞭解更多資訊，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome 除錯",
      "url": "http://localhost:8080",  // 根據自己情況配置
      "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": false,
        "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/*"
        }
    }
  ]
}
複製程式碼

4. 設定斷點，點選DUGEG開始除錯。