VSCode断点调试Vue

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

VSCode安装Debugger for chrome插件
插件市场中有两个，一个是废弃的，需要主要一下

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

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

{

// 使用 IntelliSense 了解相关属性。

// 悬停以查看现有属性的描述。

// 欲了解更多信息，请访问:
https://go.microsoft.com/fwlink/?linkid=830387

“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’,

},

此时，再次调试

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