VS Code断点调试

Posted 2022-03-07 你滴风

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中看到已经命中断点了