vs code测试vue代码

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}/*"
   }
 }

3. 在页面新增断点，如果浏览器切换到该页面，断点显示红色。ok。