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

我是开发团队的日下部。
我们想介绍一下 vue-devtools，它在使用 Vue 开发时非常有用。

粗略来说，你可以看到数据的内容，而不需要每次都输出到控制台！
vue-devtools 作为 Google Chrome 扩展提供，可以轻松安装。

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

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

如果在这种状态下打开 Chrome 的开发者工具（F12），则会在右边缘添加一个 Vue 选项卡。

在本文中，我们将概述您可以使用 vue-devtools 做什么。

---

请注意

如果你想使用本地 html 文件来尝试，你需要在 Chrome 设置 -> 扩展中勾选 vue-devtools 的“允许访问文件 URL”。

 

此外， devtools 似乎没有响应 iframes 内的 Vue 应用程序。
（实际上，我想提供一些我可以使用 JSFiddle 等进行触摸和检查的东西，但我放弃了。）

---

主要议题

vue-devtools 有三个主要的显示类别。

让我们依次看看它们。

 

成分

在此选项卡中，您可以查看各个组件的父子关系以及各个组件所保存的数据。
在父组件的 Components 属性中设置的子组件名称的大驼峰式命名用于组件的显示名称。

如果您使用单个文件组件，这将是文件名的大驼峰式大小写。
您可以通过更改组件的 name 属性来更改 devtools 上的显示。

 

维埃克斯

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

具体是显示store中各个state的状态以及getter获取到的值。
此外，发生突变的历史也按时间顺序显示。

通过单击每个提交历史记录，您可以检查当时传递给突变的值（有效负载）、提交后的状态以及 getter 值。
通过按选择提交时出现的[时间旅行]（时钟图标），您可以将状态写回到所选提交后立即的状态。 （屏幕上的值实际上会改变）

带有
已检查活动标签代表您在时间轴中的位置。 （换句话说，当您使用[时间旅行]移动时间时，目的地就会变为活动状态）

 

活动

此选项卡允许您查看已触发事件的历史记录。

这就是我们所说的事件。

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

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

在上图中的示例中，我们将字符串“counter is now: 3”传递给一个仅显示传递的字符串的事件。