前言
正所谓工欲善其事必先利其器,我们作为一枚优秀的前端开发工程师也一样,如果有一款插件能够帮助我们大大提高开发效率,何乐而不为呢?
什么是vue-devtools?
根据vue-devtools官网的说法是用于调试Vue.is应用程序的浏览器开发工具扩展。
而通俗易懂的来说,就是一款基于浏览器的插件,用于调试vue应用,协助开发人员,提升开发效率。
目前vue-devtools已支持大多数主流浏览器,在他们的官网上也有说明(如下)
使用vue-devtools
components: 显示当前点击组件的可用数据,并可以修改和添加,修改可实时反应在界面中,非常方便调试一些业务流程比较繁琐,可以任意展示其中的一步操作的界面。
vuex: 使用vuex时,这里可以方便查看state,mutaitons, action等信息。
timeline: 记录事件,比如点击事件,当你点击之后,这里会显示出来点击事件来源于哪一个组件,以及事件名等信息。
routes: 记录路由的变化,以及路由相关信息。下拉routes 可以列出当前应用所有的路由。
总结
vue-devtools可以说是前端开发人员必备神器,当然该插件只作用在本地项目上生效,只有在本地项目上打开检阅才会有vue-devtools的icon。
下载方式
按照官网指引下载即可。