Vue前端开发调试方法

记录一下Vue项目进行debug的几种常用方法，以备后用。


console
一般进行前端开发，在控制台进行日志输出，查看变量或者其他状态是最基本的。主要可以使用console.log，console.info和console.error。info和log使用起来没什么区别，而error则会用红色明显提示这是错误信息。


alert
有时候也可以用alert函数进行调试，把想要查看的调试信息打印到弹出框中，不过alert函数是阻塞式的，运行到此处，后面的语句都不会执行，一般还是慎用为好。


debugger
当然，打断点进行调试还是最靠谱的方法。打断点的方法可以有两种，一种是进入F12进入开发者工具，在Sources中的page列表中找到想调试的语句，然后左边打断点进行调试。其实这样可能不太方便，在这里，可以在想要调试的语句（比如click函数体内）之前加入debugger，这样点击事件触发后就能进行中断调试了。


onClick:function () {
      debugger // 直接使用debugger打断点
      this.msg = 'change'
      console.log('this is console.log',this.msg)
      console.info('this is console.info',this.msg)
      console.error('this is console.error',this.msg)
    }


中断之后可以在界面查看变量值，可以直接在Console选项卡直接输入this查看变量值。然后如果有其他一个函数叫做onClick1()，在Console中输入this.onClick1()来绕过另一个点击事件，来直接运行这个方法。


window.vue
有时候不想打断点，但要测试一些函数的功能是否正常，可以用window.vue来绑定当前组件，具体而言是在mounted钩子之下，写如下语句


// 需要等待dom加载后才能绑定
mounted(){
    window.vue = this
  },


然后运行项目，就可以在浏览器Console中输入window.vue.onClick()来提前运行一次该函数


Vue.js devtools
最后，也不能忘了Vue官方出的调试插件，这个插件主要用来查看各种变量的实时值以及vuex的一些状态等，使用起来基本没有难度。


可能有的小伙伴Chrome不能连接商店，这里推荐一种方便靠谱的安装方法，不用开发者模式。首先下载http://crxhelp.bj.bcebos.com/crxhelp.zipChrome插件伴侣，使用这个工具可以直接安装crx格式的插件。
然后crx文件去哪里下载呢，经过试验，这个网站目前比较靠谱：
下载地址：Vue.js devtools v4.1.5_beta Chrome插件下载


然后就可以尽情享受Chrome带来的便利了