Chrome插件屋

Vue Devtools-Vue.js调试神器,前端必备插件

对于我们开发者而言,Google插件非常便捷与易于生活,主要原因还是Google插件的多样性和全面性。

对于前端开发者来说,大部分都是使用vue来开发
那么有没有一款插件能让vue的开发效率变高
下面,我来介绍一下前端必备插件Vue.js devtools

一、开发需求

在开发中,我们常常需要观察数据的变化,
特别是在vue中,一旦数据量变多,我们常常容易混淆
如果我们才有以前的老方法,在控制台中console.log(),那么我们的开发效率就会变得极低
因此我们需要使用Vue.js devtools来帮助我们监听数据的变化

例如在这个页面中,我们那么多项数据,如果我们使用console.log()一个个输出查看,我们需要看到猴年马月,

在Vue.js devtools中,我们可以清楚的看出数据的变化

用于调试Vue.js应用程序的Chrome和Firefox DevTools扩展。Chrome devtools扩展用于调试Vue.js应用程序。

 

二、使用

运行Vue项目,在Chrome浏览器中展示项目(浏览器菜单栏中的devTools图标会亮起),按F12打开开发者工具,在开发者工具的菜单栏最后面会看到Vue,选中它就可以尽情的使用了。

当然这样一顿行云流水的操作下来,有些人会一次成功,而有些人则不会成功,浏览器菜单中的devTools图标亮滴鸭批,但是就是在开发者工具的菜单栏最后面看不到Vue。嗯~~~,怎么肥事小老弟?

请查看项目的index.html中,对vue.js的引用。你肯定使用了压缩版的vue.min.js,使用vue.min.js默认为生产环境,会导致devTools不显示,改为vue.js即可。

 

Vue Devtools下载地址

点击下载
本文标题:Vue Devtools-Vue.js调试神器,前端必备插件
转载请保留页面地址:https://chromewu.com/vue-devtools.html
退出移动版