vscode断点调试vue怎么用(vscode断点调试详解)

vscode断点调试vue怎么用？一直没搞懂，Vue打包之后，代码被压缩，打包调试好难调试，不知道如何来调试，终于借这个周末来尝试下如何解决这个问题。

• VSCode安装Debugger for chrome插件

插件市场中有两个，一个是废弃的，需要主要一下

• 生成lauch.json文件

在左侧的面板中，点击运行和调试时，vscode会提示你生成一个lauch.json文件，按照提示生成即可

• 修改lauch.json文件

不知道为什么，按照很多教程中的提示，我的vscode并不能产生断点，进入调试状态，直到我添加了下面这两行代码

{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8009",
"webRoot": "${workspaceFolder}",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
 }
  }
 ]
}

黄色背景，红色字体，加粗的两行是添加的

• 修改vue.config.js文件

如果仅仅是上面的这些配置，代码依然是无法调试的，此时，还需要修改vue.config.js文件，在后面添加：

configureWebpack: {
  devtool: 'source-map',
},

此时，再次调试

会发现一切都很美好，代码是未打包的