前言

        正所谓工欲善其事必先利其器，我们作为一枚优秀的前端开发工程师也一样，如果有一款插件能够帮助我们大大提高开发效率，何乐而不为呢？

什么是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。

下载方式

        vue-evtools下载地址

        按照官网指引下载即可。