如何使用Vue.jsDevtools调试组件、状态和事件

作者选择 Open Sourcing Mental Illness 作为 Write for DOnations 计划的一部分来接受捐赠。

介绍

在调试 Vue 应用程序时，通常会迭代您的代码，进行更改然后重新启动服务器以查看它们是否修复了浏览器呈现的站点中的问题。但是在源代码和浏览器之间移动可能是一个耗时的过程。为了提高调试效率，您可以使用 Vue.js Devtools 之类的浏览器扩展。 Vue.js Devtools 是 Chrome 和 Firefox 的浏览器扩展，也是由 Vue.js 核心团队的 Guillaume Chau 和 Evan You 创建的独立 Electron 应用程序。它为开发人员提供了 Vue 应用程序内部工作的可视化表示，以便您可以从浏览器检查组件、数据、计算属性和事件，以及 [ X223X]Vuex 动作、getter 和突变。

使用 Devtools，您将能够准确地看到事件执行的时间以及它具有的有效负载。除了事件之外，您还可以看到以类似 DOM 的格式显示的所有组件，您可以在其中分析组件属性，例如 data、[X182X ] 属性和 props。

在本教程中，您将设置一个示例 Vue 应用程序，在您的浏览器中安装 Vue.js DevTools，然后在您的应用程序中添加新功能，同时使用浏览器扩展对其进行测试。这将作为使用 Vue.js Devtools 调试代码的第一步。

先决条件

Node.js 版本 14.16.0 或更高版本安装在您的计算机上。要在 macOS 或 Ubuntu 20.04 上安装它，请按照如何在 macOS 上安装 Node.js 和创建本地开发环境中的步骤或 选项 2 — 使用 NodeSource 使用 Apt 安装 Node.js 如何在 Ubuntu 20.04 上安装 Node.js 的 PPA 部分。
您的机器上安装了 Vue CLI，您可以按照 How To Generate a Vue.js Single Page App With the Vue CLI 的 Step 1 获得。
您还需要 JavaScript、HTML 和 CSS 的基本知识，您可以在我们的如何使用 HTML 构建网站系列、如何使用 CSS 构建网站系列中找到这些知识, 以及如何在 JavaScript 中编码。
安装在您的开发机器上的 Chrome 或 Firefox Web 浏览器。

第 1 步 — 设置示例应用程序

在此步骤中，您将组合一个示例应用程序，您可以在以后的步骤中使用该示例应用程序来试用 Devtools 浏览器扩展。首先，通过 Vue CLI 生成一个新的 Vue 应用程序。为此，请打开终端窗口并运行以下命令。

vue create favorite-airports

当提示您的 Vue 应用程序的设置选项时，选择 Manually select features。然后选择 Choose Vue version、Babel 和 Vuex。选中后，点击【X23X】【X27X】键，继续填写提示如下：

OutputVue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Vuex
? Choose a version of Vue.js that you want to start the project with 3.x
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

创建 favorite-airports 项目后，打开终端窗口并将 cd 放入 favorite-airports 根文件夹。切换到目录后，使用 mkdir 命令创建一个新目录：

mkdir src/data

在您选择的文本编辑器中，创建并打开一个 data/airports.js 文件并添加以下内容：

最喜欢的机场/src/data/airports.js

export default [
  {
    name: 'Cincinnati/Northern Kentucky International Airport',
    abbreviation: 'CVG',
    city: 'Hebron',
    state: 'KY',
  },
  {
    name: 'Seattle-Tacoma International Airport',
    abbreviation: 'SEA',
    city: 'Seattle',
    state: 'WA',
  },
  {
    name: 'Minneapolis-Saint Paul International Airport',
    abbreviation: 'MSP',
    city: 'Bloomington',
    state: 'MN',
  },
  {
    name: 'Louis Armstrong New Orleans International Airport',
    abbreviation: 'MSY',
    city: 'New Orleans',
    state: 'LA',
  },
  {
    name: `Chicago O'hare International Airport`,
    abbreviation: 'ORD',
    city: 'Chicago',
    state: 'IL',
  },
  {
    name: `Miami International Airport`,
    abbreviation: 'MIA',
    city: 'Miami',
    state: 'FL',
  }
]

这是一个由 objects 组成的 array，由美国的几个机场组成。在此应用程序中，您将遍历此数据以生成包含 name 、abbreviation、city 和 state 属性的卡片。您将使用这些数据来探索 Vue.js Devtools 中的事件和调度。

保存 airports.js 文件，然后创建一个名为 AirportCard.vue 的单文件组件 (SFC)。该文件将位于项目的 components 目录中，并将包含机场卡的所有样式和逻辑。

在文本编辑器中创建并打开 components/AirportCard.vue 并添加以下内容：

最喜欢的机场/src/components/AirportCard.vue

<template>
  <div class="airport">
    <p>{{ airport.abbreviation }}</p>
    <p>{{ airport.name }}</p>
    <p>{{ airport.city }}, {{ airport.state }}</p>
  </div>
</template>

<script>
export default {
  props: {
    airport: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.airport {
  border: 3px solid;
  border-radius: .5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.airport p:first-child {
  font-weight: bold;
  font-size: 2.5rem;
  margin: 1rem 0;
}

.airport p:last-child {
  font-style: italic;
  font-size: .8rem;
}
</style>

您可能会注意到此代码片段中包含一些 CSS。在 AirportCard.vue 组件中，包装器 <div> 包含 airport 类。这个 CSS 通过添加边框为生成的 HTML 添加一些样式，使每个机场看起来像一张“卡片”。 :first-child 和 :last-child 是伪选择器，它们对 div 内 HTML 中的第一个和最后一个 p 标记应用不同的样式具有 airport 的类。除此之外，您可能还注意到该组件包含一个 prop，它在 Vue.js 中是一种将数据从父组件向下传递到子组件的方法。

保存并退出文件。

在结束设置之前，将现有的 App.vue 组件替换为以下代码：

最喜欢的机场/src/App.vue

<template>
  <div class="wrapper">
    <div v-for="airport in airports" :key="airport.abbreviation">
      <airport-card :airport="airport" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import allAirports from '@/data/airports.js'
import AirportCard from '@/components/AirportCard.vue'

export default {
  components: {
    AirportCard
  },
  setup() {
    const airports = ref(allAirports)
    return { airports }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
}

p,
h3 {
  grid-column: span 3;
}
</style>

此代码包含一个 v-for 循环，它遍历 airports.js 数据并渲染一系列 AirportCard.vue 组件，其中机场数据通过 prop [X172X ]。保存此代码并返回命令行。

设置好项目后，在终端中使用 npm run serve 命令运行本地开发服务器：

npm run serve

这将在您的 localhost 上启动一个服务器，通常在端口 8080 上。打开您选择的网络浏览器并访问 localhost:8080 以查看以下内容：

您的示例应用程序现在已成功设置。在本教程中，您将使用此应用程序来探索 Devtools 浏览器扩展。

在下一步中，您将在 Chromium 和 Firefox 浏览器上安装 Vue.js Devtools。

第 2 步 — 安装 Vue Devtools

在使用 Vue.js 开发工具之前，您首先必须将程序下载到您的计算机上。此步骤将侧重于在基于 Chromium 的浏览器或 Firefox 中安装 Devtools。

注意： 在继续之前，请务必注意，您在 Step 1 中设置的示例项目使用的是 Vue.js 3。这意味着，为了让您在发布本教程时将 Vue.js Devtools 与最新版本的 Vue 一起使用，您需要安装 Vue.js Devtools 的 Beta 通道版本。

在 Chromium 浏览器上安装

如果您使用的是 Chromium 浏览器，则可以将 Devtools 作为 Chrome 扩展程序下载。更常见的 Chromium 浏览器是 Google Chrome、Microsoft Edge 和 Opera。如果您使用的是其他浏览器，例如 Brave 或 Vivaldi，此步骤也可以使用。

要安装，请先访问 Chrome 网上应用店。在左上角的搜索栏中，搜索“Vue Devtools”。您会发现许多结果，如下图所示：

确保只安装 Vue.js 或“vuejs-dev”提供的 Devtools，因为这些是由官方团队维护的，是最值得信赖的解决方案。由于您的应用程序使用的是 Vue 3，因此您必须下载“vuejs-dev”提供的 Beta 频道。

单击该按钮后，您可以查看有关此扩展程序的其他信息，包括屏幕截图和概述，如下图所示：

准备好后，单击浏览器右上角的 添加到 Chrome 按钮。然后，您的浏览器将下载并安装扩展程序。

在火狐上安装

如果您使用的是 Mozilla Firefox，请访问 Firefox Extension Store。在浏览器的右上角，您将看到一个搜索栏。在其中搜索“Vue Devtools”，如下图所示：

这将显示一些搜索结果，包括 Evan You 发布的条目：

单击来自“Evan You”的扩展名。从这里，您可以查看有关扩展程序的其他信息，包括屏幕截图和概述：

单击 添加到 Firefox 按钮下载扩展并将其安装到您的浏览器中。

注意： 如果您使用的是不受支持的浏览器，例如 Safari，您仍然可以通过 npm 将 Vue.js Devtools 作为独立的 Electron 应用程序使用。 Vue 的 DevTool 文档有一个关于将 Devtools 安装为独立应用程序以在本地或远程调试应用程序的页面。

您现在已将 Devtools 扩展安装到您的浏览器中。您将看到 Vue.js 徽标，您的固定扩展显示在浏览器栏中。默认情况下，此徽标将显示为灰色。但是，如果您访问使用 Vue 的应用程序或网站，该徽标将使用 Vue 徽标颜色进行着色。

在本节中，您已在 Chromium 或 Firefox 浏览器上成功安装了 Devtools。在下一节中，您将深入了解应用程序的用户界面，以从浏览器中查看 AirportCard 组件的属性。

第 3 步 — 使用 Devtools 界面查看组件属性

接下来，您将浏览 Devtools 界面以检查示例应用程序中组件的属性。

在 Step 1 中，您在 localhost:8080 的本地开发服务器上启动了项目。在浏览器中导航到该 URL，然后右键单击或使用 Mac 上的 CMD+ALT+I 或 Windows 中的 CTRL+ALT+I 打开浏览器检查工具。在检查器窗口的顶部栏中，将有一个名为 Vue 的新选项卡。单击该选项卡，Devtools 将初始化：

Vue.js Devtools 最初有两个部分：列表视图和详细视图。列表视图包含 Vue 组件或 Vuex 命名空间的列表。当 Devtools 启动时，您将在左侧看到一个组件列表。由于示例应用程序中总共显示了六个机场卡，因此列表视图中将显示六个 AirportCard 组件以及 App 组件。

在列表视图中，选择第一个 App 组件。详细视图现在将提供有关该组件的额外详细信息。在这种情况下，您会发现与 App.vue 关联的所有 data 和 computed 属性，在这种情况下，包括 setup 和一组对象表示airports.js 中的机场。

现在点击App正下方的第一个AirportCard。您将找到与 AirportCard.vue 组件的该实例关联的所有 data 和 computed 属性。在这种情况下，它是 CVG 卡，因此它将显示 abbreviation: "CVG" 和 state: KY 等属性。将鼠标悬停在该组件上时，Devtools 还将在浏览器中突出显示渲染的组件：

本节展示了 Devtools 界面的一些基本导航，允许您检查 Vue 应用程序中生成的组件的属性。在下一步中，您将通过 Devtools 对 Vue 应用程序进行一些更改。通过这些小的编辑，您将了解如何使用 Devtools 来测试对组件的更改。

第 4 步 — 使用 Devtools 测试对组件的更改

使用 Vue.js Devtools，您可以从浏览器更改组件的属性，而无需更改源代码。这使您可以更快地调试您的应用程序，而无需调整您的实际代码。在此步骤中，您将通过向 AirportCard 组件添加一些条件样式并在浏览器中对其进行测试来尝试此功能。

目前在您的应用程序中，有六个不同的机场。如果机场正在建设中，您将添加一些代码来更改卡片的颜色。为此，您需要导航到 AirportCard.vue 组件。你可以手动导航到它，或者你可以利用 Vue.js Devtools 在你选择的文本编辑器中打开这个文件。

在浏览器中，打开 Devtools 窗口，单击开发工具右上角的十字线。单击该按钮后，您可以将鼠标悬停在各种机场卡上。 Devtools 将以绿色突出显示该组件，表示该组件已被选中。突出显示时，单击卡片：

现在您已经选择了组件，请单击右上角的图标，该图标看起来像带有对角箭头的正方形。此图标通常用于通知用户将在应用程序之外打开某些内容。单击此按钮将在您的编辑器中打开 AirportCard.vue。打开组件文件后，继续添加以下突出显示的代码：

最喜欢的机场/src/components/AirportCard.vue

<template>
  <div class="airport">
    <p>{{ airport.abbreviation }}</p>
    <p>{{ airport.name }}</p>
    <p>{{ airport.city }}, {{ airport.state }}, Under Construction? {{ airport.construction }}</p>
  </div>
</template>
...

这将呈现机场对象的 construction 属性中的数据。完成后，将数据添加到 src/data/airports.js 文件以显示机场是否正在建设中：

最喜欢的机场/src/data/airports.js

export default [
  {
    name: 'Cincinnati/Northern Kentucky International Airport',
    ...
    construction: false
  },
  {
    name: 'Seattle-Tacoma International Airport',
    ...
    construction: false
  },
  {
    name: 'Minneapolis-Saint Paul International Airport',
    ...
    construction: false
  },
  {
    name: 'Louis Armstrong New Orleans International Airport',
    ...
    construction: false
  },
  {
    name: `Chicago O'hare International Airport`,
    ...
    construction: false
  },
  {
    name: `Miami International Airport`,
    ...
    construction: false
  }
]

保存并关闭此数据文件。

将数据添加到应用程序后，如果 construction 属性为 true，您现在将编写一些 CSS 来添加类。打开 AirportCards.vue 组件添加以下内容：

最喜欢的机场/src/components/AirportCard.vue

<template>
  <div class="airport" :class="{ 'is-under-construction': airport.construction }">
    <p>{{ airport.abbreviation }}</p>
    <p>{{ airport.name }}</p>
    <p>{{ airport.city }}, {{ airport.state }}, Under Construction? {{ airport.construction }}</p>
  </div>
</template>

<style scoped>
...
.airport.is-under-construction {
  border-color: red;
  color: red;
}
</style>

在具有 airport 类的 <div> 上，您将对象绑定到 class 属性。这个对象的key是要应用的类，属性是应用类之前需要满足的条件。如果将 is-under-construction 类应用于卡片，则 <style> 标签中的 CSS 会将卡片的边框和文本颜色更改为红色。

现在打开浏览器并打开 Vue.js 开发工具。在左侧窗格中，突出显示 <App> 组件。在右栏中，将显示 setup 方法及其属性。您将找到一个 airports 数组。展开该数组，然后展开其中的一个对象。打开缩写为 CVG 的第一个对象。要测试此代码是否有效，请单击 construction 数据属性的铅笔图标并将其更改为 true。

一旦您按下 ENTER 或单击保存图标，该数据将在前端更新。该卡将立即变为红色。如果您要检查元素并查看 DOM，您会发现 is-under-construction 类已应用于第一张机场卡。

现在您已经尝试在 Devtools 中更改属性以测试您的应用程序逻辑，接下来您将了解如何测试从浏览器发出的事件。

第 5 步 — 使用 Devtools 测试事件发射

除了调试组件的数据和属性之外，您还可以使用 Devtools 来调试内置和自定义事件。 Vue.js Devtools 提供了可视化事件及其有效负载的工具。

要尝试测试一个事件，您首先将一个事件添加到您的 AirportCard 组件中。当您点击机场卡片时，应用程序将向父组件（App.vue）发送一个事件，其中包含您点击的机场数据。

打开文本编辑器，在 AirportCard.vue 组件中，添加以下 click 事件，在最外面的 <div> 上添加 $emit：

最喜欢的机场/src/components/AirportCard.vue

<template>
  <div class="airport" :class="{ 'is-under-construction': airport.construction }" @click="$emit('favorite-airport', airport)">
    <p>{{ airport.abbreviation }}</p>
    <p>{{ airport.name }}</p>
    <p>{{ airport.city }}, {{ airport.state }}, Under Construction? {{ airport.construction }}</p>
  </div>
</template>
...

在最外面的 <div> 上，您正在调用 JavaScript 点击事件。在那个 click 事件中，您正在触发一个名为 favorite-airport 的自定义事件。该事件的有效负载是与 v-for 循环中的 airport 变量关联的数据。

保存对 AirportCard 组件的更改。

接下来，在浏览器中打开 Vue.js Devtools。在罗盘图标（检查器）右侧的顶部栏中是时间线检查器。点击图标打开 Devtools 时间线：

此时间线检查器可让您检查一段时间内发生的任何事件、键盘敲击、突变等。打开工具后，单击浏览器视口中的一张机场卡片。完成此操作后，您将在时间轴上看到一系列点：

这些点代表幕后发生的各种事件，包括单击时执行的 mousedown 和 mouseup 事件。鼠标事件将始终以紫色突出显示。绿点是您设置为在 click 事件上触发的自定义事件。单击绿点以查找有关该事件的更多信息，如下图所示：

在此窗格中，您可以查看事件的执行时间，以及传递给父级的数据。在这种情况下，事件的有效载荷是芝加哥机场，代码为 ORD。这表明您的事件正确触发，允许您继续使用此事件开发附加功能。在下一步中，您将使用此事件将有效负载数据存储在 Vuex 存储中，以跟踪用户最喜欢的机场。

第 6 步 — 使用 Devtools 查看 Vuex 操作、突变和状态

在 Vue.js Devtools 中，有一个专门的窗格用于监视 Vuex 操作、突变和存储状态。通过使用此视图，您可以检查您的状态是否存在问题，而无需遍历源代码更改。在本节中，您将实现 Vuex 来制作一个用户可以通过单击机场卡片添加到最喜欢的机场的列表。然后，您将使用 Vue.js Devtools 监控这些功能。

创建并执行您的自定义事件后，您现在将获取该数据并使用它调用 Vuex 操作和突变。如果您对 Vuex 不熟悉，建议您在我们的 Vuex 教程中阅读更多有关它的内容。

在您的文本编辑器中，打开 src/store/index.js 文件并添加以下代码：

最喜欢的机场/src/store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    favorites: [],
  },
  mutations: {
    UPDATE_FAVORITES(state, payload) {
      state.favorites = payload
    }
  },
  actions: {
    addToFavorites({ state, commit }, payload) {
      const airports = state.favorites
      airports.push(payload)
      commit('UPDATE_FAVORITES', airports)
    }
  }
})

在此代码段中，您将添加到在 Step 1 中生成的 index.js 文件中。具体来说，您要添加一个 favorites 状态属性（airports.js 对象的数组）、一个名为 UPDATE_FAVORITES 的 mutation 和一个 action称为 addToFavorites。目的是让用户点击一张卡片，这将触发动作，这将触发突变，然后更新商店。

在 App.vue 组件中，添加以下代码以在执行自定义 favorite-airport 事件时调度 action：

最喜欢的机场/src/App.vue

<template>
  <div class="wrapper">
    <div v-for="airport in airports" :key="airport.abbreviation">
      <airport-card :airport="airport" @favorite-airport="$store.dispatch('addToFavorites', $event)"/>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import allAirports from '@/data/airports.js'
import AirportCard from '@/components/AirportCard.vue'

export default {
  components: {
    AirportCard
  },
  setup() {
    const airports = ref(allAirports)
    return { airports }
  }
}
</script>
...

添加 Vuex 属性后，打开浏览器并打开 Devtools。在窗格顶部的 Components 下拉菜单中，您现在将找到 Vuex 选项。单击以切换到 Vuex 视图。

与 Components 部分类似，左侧面板是状态树的可视化，包含命名空间模块和您可能拥有的任何根状态。右侧是该模块或 Vuex 状态部分中的完整数据列表。

在右侧面板中，您将找到 favorites 的空数组。现在单击几张卡片，然后查看每个机场对象被推入该数组：

现在您知道状态正在运行，您可以通过在 App.vue 文件中添加一个附加部分来对此进行扩展：

最喜欢的机场/src/App.vue

<div class="wrapper">
    <div v-for="airport in airports" :key="airport.abbreviation">
      <airport-card :airport="airport" @favorite-airport="$store.dispatch('addToFavorites', $event)"/>
    </div>

  <div v-if="$store.state.favorites.length">
    <h1>Favorites <template v-if="$store.state.favorites.length">({{ $store.state.favorites.length }})</template></h1>
    <div v-for="airport in $store.state.favorites" :key="airport.abbreviation">
      <airport-card :airport="airport" />
    </div>
  </div>
</div>
...

保存文件，然后在浏览器中单击一张卡片。将显示一个新部分，其中包含已添加的机场卡片。

结论

Vue.js Devtools 是一个免费的浏览器扩展，您可以将其添加到任何 Chromium 或 Firefox 浏览器。您也可以下载它并作为可以绑定到您的应用程序的独立应用程序。在本教程中，您从一个数据集构建了一个应用程序，该数据集呈现了许多卡片组件，每个组件都有自己的数据。然后，您使用 Devtools 检查组件的属性，更改属性以测试条件样式更改，测试事件是否正确触发，并确保正确设置 Vuex 状态管理。

想了解更多关于 Vue.js Devtools 的内容，可以访问【X55X】Vue DevTools 官方文档【X94X】。有关 Vue 的更多教程，请查看如何使用 Vue.js 开发网站系列页面。