vue调试工具之devtools

2,709 阅读1分钟

vue是基于数据驱动的一种实现框架,所以在开发过程中方便地监听数据变化对于开发效率是很有帮助的,vue的调试工具 vue-devtools即是如此,安装后需要注意:

1.vue必须引入开发版, 使用min压缩版是不能使用devtools进行调试的

2.安装后, 需要关闭浏览器, 再重新打开, 才能使用

界面功能介绍

自定义组件(Components)

显示当前点击组件的可用数据,并可以修改和添加,修改可实时反应在界面中,非常方便调试一些业务流程比较繁琐,可以任意展示其中的一步操作的界面,从这里可以查看每个自定义组件的props、data、conputed

自定义事件(Events)

点击标签,然后event让你检查是什么触发了它和其他额外的信息。

状态选项卡(vuex) 查看store里数据的变化

路由选项卡(Routing)

记录路由的变化,以及路由相关信息

性能选项卡(performance)