VS Code断点调试

1.安装Chrome Debug插件

2.创建Debug配置文件

修改配置文件，内容如下

{// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息，请访问: /fwlink/?linkid=830387"version": "0.2.0","configurations": [{"type": "chrome","request": "launch","name": "vuejs: chrome","url": "http://localhost:3000","webRoot": "${workspaceFolder}/src","breakOnLoad": true,"sourceMapPathOverrides": {"webpack:///src/*": "${webRoot}/*",}}, "webRoot": "${workspaceFolder}"]}

url中的端口是前端实际的访问端口

3.修改vue.config.js配置

如果你使用的是 Vue CLI 2，请设置并更新config/index.js内的devtoolproperty：

devtool: 'source-map',

如果你使用的是 Vue CLI 3，请设置并更新vue.config.js内的devtoolproperty：

module.exports = {configureWebpack: {devtool: 'source-map',},}

到这步应该会有问题了，配置不对，触发断点无变化，断点一直呈现灰色

原因就是源码配置问题，大部分项目中已经有了configureWebpack的配置，所以不知道如何添加

正确的姿势如下

configureWebpack: config => {//生产环境取消 console.logif (process.env.NODE_ENV === 'production') {config.optimization.minimizer[0].press.drop_console = true}},//新添加配置configureWebpack: {devtool: 'source-map',},

4.开启调试

以调试方式启动项目

启动调试插件，开始调试

设置断点，启动插件后触发断点就可以在VS Code中看到已经命中断点了

参考链接

本人博客园地址，和CSDN同步更新