vue的调试工具 vue-devtools 的安装和使用

安装

1.到github下载：

git clone https://github.com/vuejs/vue-devtools

 

2.安装依赖

cd vue-devtools && npm install

3.打包

npm run build

4.扩展Chrome插件

Chrome浏览器 >  更多程序 > 拓展程序 

点击“加载已解压的拓展程序”按钮, 选择 vue-devtools > shells > chrome 放入,

安装成功如下图

 

使用

1.组件（DOM）

Components选项展示页面的组件信息与DOM结构

2.vuex

Vuex已经是老功能了，但它有一个惊人的新功能; 您现在可以从devtools更新应用程序状态！

3.Event（事件）

事件记录与操作信息

4.Routing（路由）

History:当前路由信息；

Routers：所有注册的路由信息

5.Performance（性能）

 

此选项卡由两部分组成，“每秒帧数”和“组件渲染”。 第一个选项卡“每秒帧数”显示一个实时源图表，其中包含应用程序的当前fps。这可用于查找减慢应用程序速度的某些操作或组件。 在下图中，您可以看到图表中的第一个红色凹陷在其顶部有“M”，“E”和“R”图标。“M”表示发生Mutation，“E”表示事件被触发，“R”表示路径发生变化。我们可以预判应用程序的fps会暂时降低路径变化，但如果这是意外下降，那我们更加容易查出哪些组件消耗了比较多的资源。

 

“Component Render”选项卡的第二张图片显示了组件生命周期方法的详细运行时间统计信息。左窗格显示组件的总渲染时间，而右窗格按生命周期方法提供细分。任何极慢的组件都会在这个左侧标签中脱颖而出，这再次为调查性能问题提供了一个良好的起点。

6.Settings（设置）

7.Refresh（刷新）