目录

我和谷歌共成长前端必备插件Vue.js-devtools

我和谷歌共成长——前端必备插件Vue.js devtools

文章目录


前言

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

对于前端开发者来说,大部分都是使用vue来开发

那么有没有一款插件能让vue的开发效率变高

下面,我来介绍一下 前端必备插件Vue.js devtools

一、开发需求

在开发中,我们常常需要观察数据的变化,

特别是在vue中,一旦数据量变多,我们常常容易混淆

如果我们才有以前的老方法,在控制台中console.log(),那么我们的开发效率就会变得极低

因此我们需要使用Vue.js devtools来帮助我们监听数据的变化

https://i-blog.csdnimg.cn/blog_migrate/496cc242aa9a64c3a342b1064e21565b.png

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

https://i-blog.csdnimg.cn/blog_migrate/da03b3fdbc3d041908fed86e6ccc628c.png

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

安装

应用商店安装

那么好用的插件,我们要怎么安装呢

https://i-blog.csdnimg.cn/blog_migrate/89fb4587e9a48b7f5bb7edc7158cb06b.png

最简单的就是直接在应用商店里面直接安装

https://i-blog.csdnimg.cn/blog_migrate/ebe7e1316753b9c23728a6871fc8ae5e.png

安装完成

https://i-blog.csdnimg.cn/blog_migrate/8cee48b49c516dcb814e18ce32e7603b.png

F12打开调试工具

我们可以看到有个vue的标识

点击vue,就可以看见数据了

https://i-blog.csdnimg.cn/blog_migrate/b855b8d7536a51b5ecd48b456fab4413.png

在github下载

官网下载:

https://i-blog.csdnimg.cn/blog_migrate/4731b41481b7fa25e5bcf1a0568dcc68.png

https://i-blog.csdnimg.cn/blog_migrate/1abc9a47f118a8a5e4b92f8296b8786b.png

总结

Vue.js devtools有助于我们开发,可以极大的提升我们的开发速率

在开发过程中,我已经深深地喜欢上这个插件,为了提供了许多方便

感谢谷歌提供的插件,让我们这些开发者能在工作中提升开发效率