如何使用 Vue.js devtools chrome 扩展？

Question

我已经安装了 VueJS chrome 扩展：

VueJS chrome extension

但我发现它毫无用处，除非我遗漏了什么。所以我在这里发布了这个问题，如果有人可以提供我所缺少的。

我设置了这个 vuejs 项目：

Kazoo on github

这个项目有几个 vue 组件，但是这些组件中的大多数都没有出现在 vuejs chrome 扩展中。这是屏幕截图：

Answer 1

Vue 开发工具会以您现在查看的方式显示应用程序（就像 DOM 查看器向您显示页面上当前的 DOM 元素一样）。单击组件将显示该组件的内部状态，例如道具和数据。当您看到应用程序中出现错误时，这允许您推断问题可能源自何处。它还允许您确定是否正在加载正确的组件。它不会向您显示当前不在文档中的组件，因为它没有用处。

vuex 选项卡将允许您检查整个商店，以及自 vue 开发工具初始化以来已完成的所有变更以及使用什么有效负载。它将向您展示 getter 计算的内容。

“事件”选项卡将显示已触发的事件。如果您有一个使用它们的框架，或者您自己使用全局事件，这可能会特别好。