ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Vs Code断点调试

2022-03-07 10:00:37  阅读:150  来源: 互联网

标签:插件 Code 断点 devtool Vs configureWebpack config 调试


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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有