1.vue官網(wǎng)侣监，找導航找到cookbook月褥，在vs code 中調試
在vue.config.js文件中：
這段代碼的含義是在vue編譯之后，在控制臺依然使用源文件去查看代碼流部。
如果單純使用Debugger for Chrome 插件谆刨，選擇啟動調試塘娶，打斷點的位置空心，點擊提示是無法找到斷點路徑痊夭，是否修改"sourceMapPathOverrides"刁岸，就是因為工具找不到斷點路徑。加入以下代碼可以解決上述問題她我。
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
2.Debugger for Chrome 插件
默認啟動或者在Debug URL中輸入自己正在運行的項目的url虹曙，就可以啟動了迫横。
可以生成默認launch.json文件。也可以去vue官網(wǎng)查找給的建議配置酝碳。
建議配置在在 VS Code 中調試 — Vue.js (vuejs.org)
路徑：vue官網(wǎng)-cookbook-在vs code中調試矾踱，從vs code 啟動應用
{
"type": "pwa-chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
- 在頁面新增斷點，如果瀏覽器切換到該頁面疏哗，斷點顯示紅色呛讲。ok。
