使用 Vue.js 进行开发时，您还应该使用 vue-devtools。

我是开发团队的草壁。
我想介绍一下vue-devtools，这是一个在使用Vue进行开发时非常有用的工具。

简单来说，vue-devtools 是一款可以让你无需每次都输出到控制台就能查看数据内容的工具！
它以 Google Chrome 扩展程序的形式提供，安装非常方便。

安装完成后，您只需打开一个包含 Vue 应用程序的页面，vue-devtools 就会检测到 Vue 应用程序。

检测到 Vue 时，Chrome 窗口右上角的 Vue 图标会亮起。

现在，如果您打开 Chrome 的开发者工具（F12），您会在最右侧看到添加了一个 Vue 选项卡。

在本文中，我将为您简要概述 vue-devtools 的功能。

---

笔记

您想使用本地 HTML 文件进行此操作，则需要转到 Chrome 设置 -> 扩展程序，然后选中 vue-devtools 的“允许访问文件 URL”复选框。

 

此外，无法响应 iframe 中的 Vue 应用似乎
（我原本想提供一个可以使用 JSFiddle 进行交互和检查的功能，但由于这个问题，我不得不放弃这个计划。）

---

主题

vue-devtools 有三大显示类别：

让我们逐一来看。

 

成分

此选项卡允许您查看每个组件的父子关系及其包含的数据。
组件的显示名称使用父组件 components 属性中设置的子组件名称的大写驼峰式版本。

如果您使用的是单文件组件，文件名将采用大驼峰式命名。
您可以通过修改组件的 name 属性来更改其在开发者工具中的显示方式。

 

Vuex

使用 Vuex 时，您可以通过选择 [Vuex] 选项卡来检查 store 的状态。

具体来说，它会显示存储中每个状态的当前状态以及从 getter 方法获取的值。
此外，还会按时间顺序显示变更提交的历史记录。

点击每个提交历史记录条目，即可查看当时传递给 mutation 的值（有效载荷）、提交后的状态以及 getter 的值。
选择一个提交并点击【时间旅行】（时钟图标），即可将状态重写为所选提交发生后的状态。（屏幕上的值也会相应改变。）

“已检查的提交
“活动”标签指示您在时间线中的当前位置。（也就是说，当您使用[时间旅行]功能穿越时间线时，目标位置会变为活动状态。）

 

活动

在此标签页中，您可以查看事件触发的历史记录。

这里发生的事件是这样的。

无论是否使用 $on 监听事件，都会显示 $emit 历史记录。

您可以从历史记录中查看传递给事件的值（有效载荷）。

在上面的示例图片中，我们将字符串“counter is now: 3”传递给一个事件，该事件只是简单地显示传递的字符串。