• 本站所有插件都是站长本人费时费力的人工筛选推荐,而非采集,亲测好用!如有插件失效,请留言,我会及时更新

Vue.js devtools:前端必备插件

开发者插件 ChromeWu 2年前 (2022-04-23) 2005次浏览 0个评论

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

对于前端开发者来说,大部分都是使用vue来开发
那么有没有一款插件能让vue的开发效率变高.

Vue.js devtools:前端必备插件

chrome浏览器的一款调试vue.js应用的开发者浏览器扩展。做前端开发的IT工程师应该比较熟悉这款工具,可以边侧边栏窗格中的页面,边检查代码,用于调试 Vue.js 应用

是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码。做前端开发的IT工程师应该比较熟悉这款工具,可以边侧边栏窗格中的页面,边检查代码。由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么。但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试。本文重点介绍Vue.js devtools使用方法,提供chrome插件直接安装和源代码安装两种方法,你还可以在其中找到常见问题即安装之后“vue.js not detected“的解决办法。

一、开发需求

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

Vue.js devtools:前端必备插件

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

Vue.js devtools:前端必备插件

安装完成之后,

Vue.js devtools:前端必备插件

F12打开调试工具
我们可以看到有个vue的标识
点击vue,就可以看见数据了(如下图)

Vue.js devtools:前端必备插件

总结

Vue.js devtools有助于我们开发,可以极大的提升我们的开发速率
在开发过程中,我已经深深地喜欢上这个插件,为了提供了许多方便
感谢谷歌提供的插件,让我们这些开发者能在工作中提升开发效率

 

下载地址:

点击下载
本文标题:Vue.js devtools:前端必备插件
转载请保留页面地址:https://chromewu.com/vue-js-devtools.html
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址