安裝插件 Debugger for Chrome

Debugger for Chrome

在項目根目錄 config/index.js 中修改

將devtool: 'cheap-module-eval-source-map' 修改為 devtool: 'source-map'
將 cacheBusting: true 修改為 cacheBusting: false
修改這兩項是為了vscode中的斷點能夠正確定位到行

新增調(diào)試

在調(diào)試界面增加配置如下

lanuch.json

貼上代碼

{
  // 使用 IntelliSense 了解相關(guān)屬性。 
  // 懸停以查看現(xiàn)有屬性的描述。
  // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome 調(diào)試",
      "url": "http://localhost:8080/login#/login?station=103",
      "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": false,
        "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/*"
        }
    }
  ]
}

調(diào)試

此時在代碼中無論是debugger, 還是小紅點, 都能夠直接進行調(diào)試了

調(diào)試