Vue Devtools 是一个用于网页前端开发的vue调试工具，该软件可以帮助用户在浏览器中调试和开发vue.js的运行代码，这是一个非常有用的编程开发辅助工具。VueDevtools插件只是一个Chrome和FirefoxDevTools扩展插件，在浏览器中，可以一边检查一边检查代码，方便实用。

VueDevtools用户可以使用Vue.jsdevtools数据结构调试工具在浏览器开发人员工具下调试代码，在侧栏窗格页面的同时检查代码，帮助用户更好地开发页面结构。

Vue Devtools使用方法

 只有Vue.config.devtools===true才能使用devtools。

1、components面板。

components面板内可以看到我们定义的一系列组件，选择对应的组件后，右侧面板可以看到组件内的data、props、computed、attrs属性。

同时，data属性可以编辑，编辑后的页面也会实时变更。

选择Select后，您可以实时选择页面中的组件，并快速定位与调试面板对应的组件。

鼠标右键->InspectVuecomponent也可以快速定位组件。可根据组件名称筛选组件。

也可以筛选数据。

点击InspectDom直接定位到Elements面板内的DOM元素。

每个组件的例子都有变量，现在选择的组件是$vm0，其馀组件从上到下的顺序值($vm1、$vm2、$vm3…)，控制台可以直接印刷$vm0。

2、Vuex面板。

Vuex面板可以每次记录mutation。点击对应的mutation，在右侧可以看到mutation提交的详细信息，与此时state的状态相同。

同时，可以筛选mutation和state。

鼠标滑过mutation的记录，commit、revert、TimeTravel、commit:保存指定的mutation，mutation的记录最上面的BaseState将成为本次mutation的state，同时本次commit前的mutation将被删除。revert:恢复到指定的mutation，现在的state变成了知道mutation的state，revert后的记录被删除。TimeTravel:时间旅行，state的数据切换到指定的mutation，但所有记录都保存下来。

Vuex面板支持导出/导入state的功能导出:将state复制到剪板上。导入:支持将json数据直接导入vuex。

3、Events面板。

Events面板可以记录每次$emit触发的事件，右侧可以看到事件的详细信息，同样支持筛选。

name:事件名type:事件类型为了与Vue1.x兼容，在Vue1.x中以$dispatch触发事件时，type为$dispatchsource:触发事件的组件paload:负荷，触发事件时传达的参数。

4、Routing面板。

Routing面板有history、routeshistory每次记录路由的变化，请注意这里的history==window.history，每次路由的变化都会变成history，即使是this.$replace跳跃的路由。

右侧显示详细信息，面板中的from、to和vue-router路由钩中的from、to表示相同的意思。

routes展示所有路由，基本上是vue-router中routes的可视化展示。

用手把手使用vuedevtools。

5、Performance。

performance有助于分析页面和组件的渲染状况。有两个功能Framespersecond和Componentrender。

Framespersecond:浏览器每秒渲染多少帧，即每秒渲染多少页。蓝色柱越高，fps越高，页面越光滑。它还可以记录引起页面渲染的原因，如M、E和R。m:mutationE:eventsR:routes。

Componentrender可以记录组件的渲染时间，注意这个时间是累积的。例如，这个组件渲染了两次，那个渲染时间是这两次的总时间。同时也可以看到组件内各生命周期钩的执行时间。

6、Settings。

Normalizecompontname:Components面板组件名称显示风格，originame原始组件名称，Pascalcase大驼峰，Kebabcase中横线。

Editableprops:能否编辑props属性，默认情况下不能编辑components面板内的props属性。

NewVuexbackend:Vuex面板是否单独在后台运行，内存是否更快、更少。

Theme:主题。TimeFormat->Displaymilliseconds:时间格式显示为毫秒，但目前没有出现在哪里。AtuoloadVuexstate:是否自动加载vuexstate，目前没有效果。

Vue Devtools功能介绍

 - 上手简单

当用户已经了解HTML、CSS和JavaScript时，阅读指南后可以立即开始构建。

-多种功能

渐进式生态系统在图书馆和功能全面的框架之间扩展。

-演示优化

运行20KBmin+gzip，快速虚拟DOM，优化工作最少。

您也可以看到他们的最终更新时间，如果他们有自己的主页，也可以对他们进行分类和其他功能。

Vue Devtools安装方法

 1.下载安装文件。

下载插件，在浏览器安全提示时选择保留，在下载文件夹中找到下载的文件，后缀是.crx。

说明:如果有安全提示，请选择保留。这是浏览器的默认设置，我们的外挂不会危害你的电脑。

2.打开扩展程序安装页面。

复制chrome://extensions，贴在地址栏上，按回车键进入扩展程序安装页面，打开右上角的【开发者模式】。

3.安装插件。

将下载的.crx文件拖到扩展设置页面，等待数秒，点击设置弹仓添加即可。

Vue Devtools注意事项

 当页面使用Vue.js的生产/精简版本时，默认情况下禁用devtools检查，所以Vue窗格不会显示。

为了将它应用到通过file://协议打开的页面上，需要在Chrome的ExtensionManagement面板中为这个扩展程序选择“允许访问文件URL”。

只有在您想要从源代码构建扩展中获得尚未发布的功能时，才需要进行此操作。