Vue(五)——调试

一、console输出到控制台

如果Vue项目中,使用了eslint-loader(代码规范:空格,缩进,console等测试语句)的话,就没法使用console

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

 module.exports = {
        lintOnSave: false
    }

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

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

Vue(五)——调试_第1张图片

三、debugger

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

debugger 语法

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

测试: 

Vue(五)——调试_第2张图片 Vue(五)——调试_第3张图片

四、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下的,使用的也是这个文件,否则创建不生效

Vue(五)——调试_第4张图片Vue(五)——调试_第5张图片

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

会自动跳转到开发工具,如VScode中的断点处。

Vue(五)——调试_第6张图片

Vue(五)——调试_第7张图片

你可能感兴趣的:(Vue,前端,vue,vscode调试)