标签：Vue console debugger vscode js vue 调试

一、console输出到控制台

如果Vue项目中，使用了eslint-loader（代码规范：空格，缩进，console等测试语句）的话，就没法使用console

一定需要使用console可以尝试关闭eslint-loader，在vue.config.js中添加以下配置，然后重启项目：

 module.exports = {
        lintOnSave: false
    }

二、网页network中直接js打断点

一般js可以使用，但是如果是vue项目，webpack会将vue文件解析成以下，无法清晰定位自己的代码并断点

三、debugger

vue的模板文件，在网页中不好直接调试，使用debugger可以自动帮我们定位到断点位置

debugger 语法

function fn() {
  debugger;
  // to do sth...
}

测试： 

 

 

四、vscode

4.1 vscode中安装 Debugger for Chrome 插件

4.2 vue.config.js配置

vue项目根目录下

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

4.3 babel.config.js 配置

vue项目根目录下

module.exports = {
  "env":{
    "development":{
      "sourceMaps":true,
      "retainLines":true, 
    }
  },
  presets: [
    '@vue/app'
  ]
}

4.4 launch.json配置

vue项目根目录下建立 .vscode文件夹，再创建这个文件

• url:指项目url
• webroot：src目录
• sourceMap：会定位到指定路径

配置完成后，打开需要调试的文件，点击debug图标，打断点后，刷新页面，即可进行调试（在网页上和vscode中都可进行调试），调试时可进行自动定位，变量、数据查看等。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        },
    ]
}

测试：

注意：只有当前workspace为当前项目路径时才能将.vscode创建在当前项目根路径下。

也就是说每次通过debug里面配置创建的launch.json文件，都是创建在当前workspace下的，使用的也是这个文件，否则创建不生效

注意要点击这里以后自动打开的浏览器才能进行debug

标签：Vue,console,debugger,vscode,js,vue,调试
来源： https://blog.csdn.net/qq_34569497/article/details/113255070

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