1.安裝Chrome Debug外掛

2.建立Debug配置檔案

修改配置檔案，內容如下

{
    // 使用 IntelliSense 瞭解相關屬性。 
    // 懸停以檢視現有屬性的描述。
    // 欲瞭解更多資訊，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*",
            }
        }, "webRoot": "${workspaceFolder}"
    ]
}
 

url中的埠是前端實際的訪問埠

3.修改vue.config.js配置

如果你使用的是 Vue CLI 2，請設定並更新 config/index.js 內的 devtool property：

devtool: 'source-map',

如果你使用的是 Vue CLI 3，請設定並更新 vue.config.js 內的 devtool property：

module.exports = {
  configureWebpack: {
    devtool: 'source-map',
  },
}

到這步應該會有問題了，配置不對，觸發斷點無變化，斷點一直呈現灰色

原因就是原始碼配置問題，大部分專案中已經有了configureWebpack

的配置，所以不知道如何新增

正確的姿勢如下

configureWebpack: config => {
    //生產環境取消 console.log
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
},
//新新增配置
configureWebpack: {
   	devtool: 'source-map',
},

4.開啟除錯

以除錯方式啟動專案

啟動除錯外掛，開始除錯

設定斷點，啟動外掛後觸發斷點就可以在Vs Code中看到已經命中斷點了