其他分享
首页 > 其他分享> > Vs Code断点调试

Vs Code断点调试

作者:互联网

1.安装Chrome Debug插件

在这里插入图片描述

2.创建Debug配置文件

在这里插入图片描述

修改配置文件,内容如下

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/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 内的 devtool property:

devtool: 'source-map',

如果你使用的是 Vue CLI 3,请设置并更新 vue.config.js 内的 devtool property:

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

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

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

正确的姿势如下

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

4.开启调试

以调试方式启动项目

在这里插入图片描述

启动调试插件,开始调试

在这里插入图片描述

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

在这里插入图片描述

标签:插件,Code,断点,devtool,Vs,configureWebpack,config,调试
来源: https://www.cnblogs.com/decent/p/15974649.html