1.vue官网，找导航找到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官网查找给的建议配置。
建议配置在在 VS Code 中调试 — Vue.js (vuejs.org)
路径：vue官网-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。
