Vue Devtools 调试的奇技淫巧（译）

大家好，这里是大家的林语冰。

免责声明

本文属于是语冰的直男翻译了属于是，仅供粉丝参考，英文原味版请临幸 Debugging Magic with Vue Devtools。

随着 Vue App 的体积和复杂性熵增，错误可能变得更复杂且难以诊断。这就是 Vue Devtools 的用武之地 ------ 一个给力的调试工具，可以辅助您更高效地诊断代码。

在本文中，我们很高兴与您共享 Vue Devtools 的超能力，这是一个调试功能的宝藏，它将把您从一个单纯的 Vue 爱好员变成一个无所畏惧的 bug 支配者！

安装 Vue DevTools

根据 Vue Devtools 的最新文档。在工作区上设置 Vue Devtools 有 2 种技术。

安装作为浏览器扩展
- 在 Google Chrome 上

在Mozilla Firefox 上

在 Microsoft Edge 上

作为独立的 Electron App 安装

将 Vue Devtools 安装作为单独的 App

如果您使用的是不受支持的浏览器，或者您有其他特定需求（比如您的 App 在 Electron 中），您可以使用单独的 App。

全局安装软件包：

bash 复制代码

npm install -g @vue/devtools

或在本地作为项目依赖：

bash 复制代码

npm install --save-dev @vue/devtools

全局安装包后，运行：

bash 复制代码

vue-devtools

然后将下列代码添加到 App HTML 文件中：

html 复制代码

<script src="<http://localhost:8098>"></script>

或者，如果要远程调试设备：

html 复制代码

<script>
  window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
  window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="http://<your-local-ip>:8098"></script>

注意：在部署到生产环境之前，不要忘记将其删除！

一般看起来类似这样：192.168.x.x。

然后，像以前一样启动开发服务器，而不终止 vue-devtools 命令（举个栗子，打开一个新终端）。因此，您将同时运行这两个 App。

bash 复制代码

yarn dev
#or
yarn serve

在浏览器中启动 Devtools

在我们的教程中，我们将在浏览器中运行 Vue Devtools。让我们来探讨一下怎么搞：

第 1 步：在您的 Vue App 的本地设置中。右键单击并导航到检查选项。也可以使用 F12 键作为快捷方式。

第 2 步：选择更多选项以展开选项卡并选择 Vue 选项。

现在我们已经设置了 Vue Devtools 并与我们的项目一起运行。现在我们可以开始探索它的用法了。

调试组件

Vue Devtools 提供了各种有用的工具来辅助您理解您的组件。最重要的功能之一是组件树视图。

要访问它，只需单击"组件"选项卡。

在这里，您可以看到当前在您的 App 或页面中处于活动状态的所有 Vue 组件的分层列表。每个组件都由一个树节点表示，可以展开或折叠以显示其子节点。这将辅助您确定是否正在渲染组件。

举个栗子，该 App 组件是根组件，并且具有一个名为 HelloWorld 的子组件。如果展开节点 HelloWorld ，则可以看到其他详细信息，比如其道具、数据和计算属性。

此外，"组件树"视图允许您与组件进行实时交互。举个栗子，可以单击组件节点将其选中，然后在 DevTools 面板中查看和修改其属性和数据。

调试状态、事件、道具等

我们的 Vue App 通常由我们的组件和状态以及我们如何在组件之间共享状态组成。我们通常使用道具或事件来协助组件之间的通信。有时可能会出现 bug，或者事情可能无法如期奏效。

这很正常，但使用 Vue Devtools，我们可以更快、更轻松地完成这些阶段。

首先，在组件树中，我们可以监控我们的状态。对数据的任何更改都会反映在 Vue Devtools 的组件属性中，这样我们就可以跟踪组件数据并对其进行实时更改。

其次，我们有时间线检查器。时间轴检查器允许您浏览状态或事件的先前版本。

想象一下，能够倒回到特定实例以获取该属性在该实例中的状态。棒棒哒。

使用时间轴检查器，您可以诊断组件事件是否如期触发。

路由监控

创建 Vue SPA（单页应用程序）时，您可以使用 Vue DevTools 轻松跟踪和调试您的路由和导航流程。"路由"选项卡记录转换期间的路由数据和历史记录，还显示所有 App 路由及其选项。

调试 Pinia Store

随着我们的 App 变得越来越大、越来越复杂，在组件中管理数据可能很困难。但别担心，我们有解决方案！我们可以引入一个中央 store 作为中心点，所有组件都可以访问我们的数据。

您可能听说过或使用过某些状态管理工具，比如 Vuex 和 Pinia。Pinia 最近似乎越来越受欢迎，所以在本文档中，我们将看看 Vue Devtools 如何帮助为 Pinia 提供更好的调试体验。

最好的部分是 Pinia 与 Vue 开发工具挂钩，为您提供 Vue 2 和 Vue 3 的增强开发体验。

Vue Devtools 为您的 Pinia store 提供了一个专用的选项卡。在此选项卡中，您可以方便地查看和监控您的 store，从而轻松跟踪其数据和状态。此功能增强了开发体验，使在 Vue App 中管理和排除存储故障变得更加简单。

让我们举个栗子，将 Vue Devtools 与带有 Pinia 的 Vue App 一起使用。

我们创建了一个具有简单创建和删除功能的待办事项 App。借助 Vue 开发工具，我们能够跟踪状态的任何突变，并直接在浏览器中更新我们的 store。

时间旅行功能也适用于您的 Pinia store，因此您可以直接在时间轴视图中预览 store 的先前版本。

完结撒花

作为 Vue 爱好者，拥有 Vue Devtools 对于有效调试至关重要。但是，值得一提的是，JS 生态系统提供了各种其他调试工具。有经验的开发者经常建议将 Vue.js Devtools 与其他调试工具结合使用，以增强整体调试过程并获得更好的结果。

您现在收看的是前端翻译计划，学废了的小伙伴可以订阅此专栏合集，我们每天佛系投稿，欢迎持续关注前端生态。谢谢大家的点赞，掰掰~