_ 作者选择了开源精神疾病作为写给捐赠计划的一部分的捐赠。

介绍

当调试一个 Vue 应用程序时, 通常在您的代码上按住, 修改后重新启动服务器, 以查看它们是否在您的浏览器关闭的站点中解决了问题。但是在源代码和浏览器之间移动可能是一个耗时的过程. 为了使调试效率更高,您可以使用像 [Vue.js Devtools] (https://github.com/vuejs/devtools)这样的浏览器扩展. Vue.js (英语). Devtools是Chrome和Firefox的浏览器扩展,也是由Vue.js Core Team的纪尧姆·乔和埃文·尤所创建的独立Electronapp. 它为开发者提供了其Vue应用程序内部工作的可视化表现,以便您从浏览器中检查组件,数据,计算属性,和事件,以及Vuex动作,获取器,和突变.

除了事件,您还将能够看到您的所有组件显示在 DOM-类似的格式中,您可以分析组件属性,如 data、 computed 属性和 props。

在本教程中,您将设置一个样本Vue应用程序,在浏览器中安装Vue.js DevTools,然后在使用浏览器扩展进行测试时将新功能添加到您的应用程序中。

前提条件

**节点.js版本`14.16.0'或更多安装在您的计算机上。要在 macOS 或 Ubuntu 20.04 上安装此功能,请遵循 [如何在 macOS (https://andsky.com/tech/tutorials/how-to-install-node-js-and-create-a-local-development-environment-on-macos) 上安装节点并创建本地开发环境] 或 ** 备选 2 中的步骤—— 使用 [如何在 Ubuntu 20.04 (https://andsky.com/tech/tutorials/how-to-install-node-js-on-ubuntu-20-04 上安装节点.js] 一节中的节点。
Vue CLI 安装在您的机器上,您可以跟随 [如何用 Vue CLI 生成 Vue.js 单页 App (https://andsky.com/tech/tutorials/how-to-generate-a-vue-js-single-page-app-with-vue-create) 的 ** Sep 1 获得.
联合国您还需要JavaScript, HTML, CSS 的基本知识, 您可以在 [How To Build a website With HTML (https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html) 系列, [How To Build a website With CSS (https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-css) 系列, 以及 [How To Code in JavaScript (https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript) 中找到这些知识。
安装在您的开发机器上的Chrome或Firefox网页浏览器。 .

步骤1 - 设置示例应用程序

在此步骤中,您将组建一个样本应用程序,您可以在以后的步骤中使用它来尝试 Devtools 浏览器扩展程序。要开始,请通过 Vue CLI生成一个新的Vue应用程序。要做到这一点,请打开终端窗口并执行以下命令。

1vue create favorite-airports

当您被提示为 Vue 应用程序的设置选项时,请选择手动选择功能,然后选择选择 Vue 版本,Babel和Vuex。

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

一旦创建了最喜欢的机场项目,请打开终端窗口并将CD放入最喜欢的机场根文件夹。

1mkdir src/data

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

 1[label favorite-airports/src/data/airports.js]
 2export default [
 3  {
 4    name: 'Cincinnati/Northern Kentucky International Airport',
 5    abbreviation: 'CVG',
 6    city: 'Hebron',
 7    state: 'KY',
 8  },
 9  {
10    name: 'Seattle-Tacoma International Airport',
11    abbreviation: 'SEA',
12    city: 'Seattle',
13    state: 'WA',
14  },
15  {
16    name: 'Minneapolis-Saint Paul International Airport',
17    abbreviation: 'MSP',
18    city: 'Bloomington',
19    state: 'MN',
20  },
21  {
22    name: 'Louis Armstrong New Orleans International Airport',
23    abbreviation: 'MSY',
24    city: 'New Orleans',
25    state: 'LA',
26  },
27  {
28    name: `Chicago O'hare International Airport`,
29    abbreviation: 'ORD',
30    city: 'Chicago',
31    state: 'IL',
32  },
33  {
34    name: `Miami International Airport`,
35    abbreviation: 'MIA',
36    city: 'Miami',
37    state: 'FL',
38  }
39]

這是一個 array的 objects由幾個在美國的機場組成. 在這個應用程序中,你將重複通過這些數據來生成卡組成的 名稱, 縮寫, 城市和 州 屬性。你將使用這些數據來探索事件和發送在Vue.js Devtools。

保存)名为AirportCard.vue。这个文件将生活在您的项目的组件目录中,并包含机场卡的所有风格和逻辑。

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

 1[label favorite-airports/src/components/AirportCard.vue]
 2<template>
 3  <div class="airport">
 4    <p>{{ airport.abbreviation }}</p>
 5    <p>{{ airport.name }}</p>
 6    <p>{{ airport.city }}, {{ airport.state }}</p>
 7  </div>
 8</template>
 9
10<script>
11export default {
12  props: {
13    airport: {
14      type: Object,
15      required: true
16    }
17  }
18}
19</script>
20
21<style scoped>
22.airport {
23  border: 3px solid;
24  border-radius: .5rem;
25  padding: 1rem;
26  margin-bottom: 1rem;
27}
28
29.airport p:first-child {
30  font-weight: bold;
31  font-size: 2.5rem;
32  margin: 1rem 0;
33}
34
35.airport p:last-child {
36  font-style: italic;
37  font-size: .8rem;
38}
39</style>

您可以注意到,本代码片断中包含一些CSS. 在 " AirportCard.vue " 部分中, " X " 二字的包装有 " Airport " 一类。这个CSS在生成的HTML中增加了一些外观,增加了边框,让每个机场都出现"卡". :一胎 ' 和:最后一胎 ' 是_pseudo_选择者,对机场 ' 类的HTML中的第一个和最后一个p'标记适用不同的样式。除此之外,您还可以注意到,此组件包含一个_prop_,在Vue.js中,它是一种将数据从父组件传递给子组件的方法.

保存和退出文件。

在包装安装之前,请用以下代码更换现有App.vue组件:

 1[label favorite-airports/src/App.vue]
 2<template>
 3  <div class="wrapper">
 4    <div v-for="airport in airports" :key="airport.abbreviation">
 5      <airport-card :airport="airport" />
 6    </div>
 7  </div>
 8</template>
 9
10<script>
11import { ref } from 'vue'
12import allAirports from '@/data/airports.js'
13import AirportCard from '@/components/AirportCard.vue'
14
15export default {
16  components: {
17    AirportCard
18  },
19  setup() {
20    const airports = ref(allAirports)
21    return { airports }
22  }
23}
24</script>
25
26<style>
27#app {
28  font-family: Avenir, Helvetica, Arial, sans-serif;
29  -webkit-font-smoothing: antialiased;
30  -moz-osx-font-smoothing: grayscale;
31  text-align: center;
32  color: #2c3e50;
33  margin-top: 60px;
34}
35
36.wrapper {
37  display: grid;
38  grid-template-columns: 1fr 1fr 1fr;
39  grid-column-gap: 1rem;
40  max-width: 960px;
41  margin: 0 auto;
42}
43
44p,
45h3 {
46  grid-column: span 3;
47}
48</style>

此代码包含一个 v-for 循环,它通过 airports.js 数据进行迭代,并将一系列 AirportCard.vue 组件与通过 prop :airport 传输的机场数据返回。

在项目设置时,使用终端中的npm run serve命令运行本地开发服务器:

1npm run serve

这将启动您的本地主机上的服务器,通常在端口8080,打开您所选择的Web浏览器,然后访问本地主机:8080,以查看以下内容:

A list of cards rendered in Vue using the v-for directive.

在本教程中,您将使用此应用程序来探索 Devtools 浏览器扩展。

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

第2步:安装Vue Devtools

在使用 Vue.js Devtools 之前,您必须先将该程序下载到您的计算机. 此步骤将专注于在基于 Chromium 的浏览器或 Firefox 中安装 Devtools。

注意:在您继续前,重要的是要注意,您在 步骤 1 中设置的示例项目正在使用 Vue.js 3. 这意味着,在发布本教程时,您需要安装Vue.js Devtools的Beta频道版本。

在 Chromium 浏览器上安装

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

要安装,请先访问 Chrome Web Store。在左上方的搜索栏中,搜索Vue Devtools。您将找到一些结果,如下图像所示:

The Chrome Web Store search results for "Vue Devtools".

请确保您只安装由 Vue.js 或 )频道。

一旦您点击它,您可以查看有关该扩展的其他信息,包括屏幕截图和概述,如下图所示:

Description page in the Chrome Web Store for Vue.js Devtools, showing a screenshot of the tool and a blue "Add to Chrome" button.

当您准备好时,请点击浏览器右上角的添加到Chrome按钮,然后您的浏览器将下载并安装扩展。

在Firefox上安装

如果您正在使用Mozilla Firefox,请访问Firefox 扩展商店. 在您的浏览器的右上方,您将看到一个搜索栏。在其中,搜索Vue Devtools,如下图像所示:

Firefox Browser Add-Ons page, with "Vue Devtools" entered into the search bar.

这将显示一些搜索结果,包括由 Evan You 发布的条目:

Search results for "Vue Devtools" on the Firefox Browser Add-Ons page. The first entry has been published by Evan You.

从这里,您可以查看有关该扩展的其他信息,包括屏幕截图和概述:

Vue.js Devtools page on the Firefox Add-Ons site, with rating information, a screenshot, and a blue button labeled "Add to Firefox".

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

注意:如果您正在使用不受支持的浏览器,例如 Safari,您仍然可以通过 npm 使用 Vue.js Devtools 作为独立的电子应用程序。

您现在已经安装了 Devtools 扩展到您的浏览器中,您将看到 Vue.js 标志,在您的浏览器栏中显示您的附加扩展。默认情况下,该标志将灰色。

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

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

接下来,您将浏览 Devtools 界面,检查样本应用程序中的组件的属性。

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

The Vue tab highlighted in the inspector window.

Vue.js Devtools 最初有两个部分:列表视图和细节视图。列表视图包含 Vue 组件或 Vuex 名称空间的列表。当 Devtools 启动时,您将看到左侧的组件列表。由于您的样本应用中显示了总共六张机场卡,在列表视图中将显示六个AirportCard组件,以及App组件。

在列表视图中,选择第一个应用组件。详细视图现在将提供有关该组件的额外细节。在这种情况下,您将找到与应用.vue相关的所有数据和计算属性,在这种情况下包括设置在airports.js中代表机场的一系列对象。

现在点击第一个AirportCard直接在应用程序下方. 您将找到与AirportCard.vue组件的那个实例相关的所有数据和计算属性。在这种情况下,它是CVG卡,因此它会显示缩写:CVG和状态:KY`等属性。当您绕过这个组件时,Devtools 还会突出显示您的浏览器中的渲染组件:

Vue Devtools with the first component selected in the listing view, the component's properties displayed in the detail view, and the component highlighted in the browser display.

本节展示了Devtools界面的一些基本导航,允许您检查Vue应用程序中生成的组件的属性. 在下一步,您将通过Devtools对Vue应用程序进行一些更改。

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

使用Vue.js Devtools,您可以从浏览器中更改您的组件的属性,而无需更改您的源代码。这允许您更快地调试您的应用程序,而无需调整您的实际代码。

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

在浏览器中,随着Devtools窗口打开,点击开发工具的右上角的十字架。当点击时,您可以浮动在不同的机场地图上。Devtools将以绿色颜色突出组件,表示组件已选择。

Vue.js Devtools open, with the "ORD" AirportCard component selected.

现在你已经选择了你的组件,点击右上方的图标,它看起来像一个方块,有一个直径箭头。这个图标通常用于通知用户,某些东西将被打开在应用程序之外。点击此处将打开AirportCard.vue在你的编辑器中。打开你的组件文件,继续添加以下突出的代码:

1[label favorite-airports/src/components/AirportCard.vue]
2<template>
3  <div class="airport">
4    <p>{{ airport.abbreviation }}</p>
5    <p>{{ airport.name }}</p>
6    <p>{{ airport.city }}, {{ airport.state }}, Under Construction? {{ airport.construction }}</p>
7  </div>
8</template>
9...

这将使数据在机场对象的建设属性内进行转换,然后将数据添加到src/data/airports.js文件中,以显示机场是否正在建造:

 1[label favorite-airports/src/data/airports.js]
 2export default [
 3  {
 4    name: 'Cincinnati/Northern Kentucky International Airport',
 5    ...
 6    construction: false
 7  },
 8  {
 9    name: 'Seattle-Tacoma International Airport',
10    ...
11    construction: false
12  },
13  {
14    name: 'Minneapolis-Saint Paul International Airport',
15    ...
16    construction: false
17  },
18  {
19    name: 'Louis Armstrong New Orleans International Airport',
20    ...
21    construction: false
22  },
23  {
24    name: `Chicago O'hare International Airport`,
25    ...
26    construction: false
27  },
28  {
29    name: `Miami International Airport`,
30    ...
31    construction: false
32  }
33]

保存并关闭此数据文件。

随着您的数据添加到您的应用程序中,您现在将写一些CSS来添加一个类,如果构建属性是真。

 1[label favorite-airports/src/components/AirportCard.vue]
 2<template>
 3  <div class="airport" :class="{ 'is-under-construction': airport.construction }">
 4    <p>{{ airport.abbreviation }}</p>
 5    <p>{{ airport.name }}</p>
 6    <p>{{ airport.city }}, {{ airport.state }}, Under Construction? {{ airport.construction }}</p>
 7  </div>
 8</template>
 9
10<style scoped>
11...
12.airport.is-under-construction {
13  border-color: red;
14  color: red;
15}
16</style>

在div类上,您将对象绑定到class属性上,该对象的关键是将应用的类,该属性是应用类之前必须满足的条件。

现在打开浏览器并打开Vue.js Devtools。在左窗格中,突出显示<App>组件。在右列,将显示设置方法及其属性。您将发现一系列机场。扩展该组件,然后扩展其中一个对象。打开第一个用缩写CVG的对象。要测试这个代码是否有效,请点击构建数据属性的铅笔图标并将其更改为真实。

Vue Devtools opened to modify the CVG card to have a true value for construction. The corresponding card in the browser window is red.

一旦你按下ENTER或点击保存图标,该数据将在前端更新. 卡片将立即变成红色. 如果你要检查元素并检查DOM,你会发现正在建造类已经应用到第一张机场卡。

现在你已经尝试在Devtools中更改属性来测试你的应用程序逻辑,接下来你会看到如何从浏览器中测试发出的事件。

步骤5 — 使用 Devtools 测试事件发行

除了调试组件的数据和属性外,您还可以使用 Devtools 调试内置和自定义事件。

要尝试测试一个事件,您首先将一个事件添加到您的)到您点击的机场数据的母组件(App.vue)中。

打开文本编辑器,并在AirportCard.vue组件中添加以下点击事件,在最外部<div>上添加$emit:

1[label favorite-airports/src/components/AirportCard.vue]
2<template>
3  <div class="airport" :class="{ 'is-under-construction': airport.construction }" @click="$emit('favorite-airport', airport)">
4    <p>{{ airport.abbreviation }}</p>
5    <p>{{ airport.name }}</p>
6    <p>{{ airport.city }}, {{ airport.state }}, Under Construction? {{ airport.construction }}</p>
7  </div>
8</template>
9...

在最外部的 <div> 中,您正在召唤一个 JavaScript click 事件。在这个 click 事件中,您正在发射一个名为 favorite-airport 的自定义事件。该事件的有效负载是从 v-for 循环中与 airport 变量相关的数据。

将更改保存到您的AirportCard组件中。

接下来,在浏览器中打开 Vue.js Devtools. 在指针图标(检查器)右上方的顶部栏目是时间线检查器. 点击图标打开 Devtools 时间线:

Animation showing a mouse cursor clicking the event timeline view in Vue.js Devtools.

这个时间线检查器允许您检查任何事件,键盘冲击,突变,以及在一段时间内发生的更多事情. 随着工具打开,点击浏览器视图端的机场卡之一。

Vue Devtools event timeline view showing a series of purple and green dots in lines parallel to each other.

这些点代表了幕后发生的各种事件,包括在您的点击时执行的鼠标下载和鼠标上调事件。鼠标事件将始终以紫色突出。绿色点是您在点击事件中设置的自定义事件。

Two extra panes of the Vue.js Devtools timeline view that show a log of component events and information about the event, including its name, component, and parameters.

在此窗格中,您可以看到该事件的执行时间以及传递给家长的数据。在这种情况下,该事件的有效载荷是芝加哥机场,代码为ORD。这表明您的事件运行正确,允许您继续使用该事件来开发额外的功能。

步骤 6 — 使用 Devtools 查看 Vuex 行动、突变和状态

在Vue.js Devtools中,有一个特定的面板设置,用于监控Vuex的操作,突变和存储状态。使用此视图,您可以检查您的状态以检测问题,而无需通过源代码更改进行迭代。

如果您不熟悉Vuex,建议您阅读更多关于它在我们的Vuex教程。

在文本编辑器中,打开src/store/index.js文件并添加以下代码:

 1[label favorite-airports/src/store/index.js]
 2import { createStore } from 'vuex'
 3
 4export default createStore({
 5  state: {
 6    favorites: [],
 7  },
 8  mutations: {
 9    UPDATE_FAVORITES(state, payload) {
10      state.favorites = payload
11    }
12  },
13  actions: {
14    addToFavorites({ state, commit }, payload) {
15      const airports = state.favorites
16      airports.push(payload)
17      commit('UPDATE_FAVORITES', airports)
18    }
19  }
20})

在本片中,您正在添加到在 步骤 1 中生成的),一个名为UPDATE_FAVORITES的突变,以及一个名为addToFavorites的动作。

在App.vue组件中,添加以下代码,在执行自定义喜爱的机场事件时发送操作:

 1[label favorite-airports/src/App.vue]
 2<template>
 3  <div class="wrapper">
 4    <div v-for="airport in airports" :key="airport.abbreviation">
 5      <airport-card :airport="airport" @favorite-airport="$store.dispatch('addToFavorites', $event)"/>
 6    </div>
 7  </div>
 8</template>
 9
10<script>
11import { ref } from 'vue'
12import allAirports from '@/data/airports.js'
13import AirportCard from '@/components/AirportCard.vue'
14
15export default {
16  components: {
17    AirportCard
18  },
19  setup() {
20    const airports = ref(allAirports)
21    return { airports }
22  }
23}
24</script>
25...

随着 Vuex 属性添加,打开浏览器并打开 Devtools. 在窗格顶部的 Components 下载中,您现在将找到一个** Vuex** 选项。

The Vuex dropdown in the Vue Devtools

类似于组件部分,左面面面板是您的状态树的可视化,包括命名空间的模块和您可能拥有的任何根状态。

在右面面板中,你会发现一个空的喜爱数组. 现在点击几张卡片,看到每个机场对象被推入该数组:

Animation showing airports being added to a favorites list in the Vuex store.

现在你知道状态正在运作,你可以通过在App.vue文件中添加一个额外的部分来扩展:

 1[label favorite-airports/src/App.vue]
 2<div class="wrapper">
 3    <div v-for="airport in airports" :key="airport.abbreviation">
 4      <airport-card :airport="airport" @favorite-airport="$store.dispatch('addToFavorites', $event)"/>
 5    </div>
 6
 7  <div v-if="$store.state.favorites.length">
 8    <h1>Favorites <template v-if="$store.state.favorites.length">({{ $store.state.favorites.length }})</template></h1>
 9    <div v-for="airport in $store.state.favorites" :key="airport.abbreviation">
10      <airport-card :airport="airport" />
11    </div>
12  </div>
13</div>
14...

保存文件,然后点击您的浏览器中的卡片. 将显示一个新的部分与已添加的机场的卡片。

The Vue application rendered in a browser, with a list of favorite airports beneath the airport cards.

结论

Vue.js Devtools是任意Chromium或Firefox broswer中可以添加的自由浏览器扩展. 也可以下载,并作为独立应用程序,可以绑定在您的应用程序上. 在这个教程中,您从一个数据集中构建了一个应用程序,该数据集提供了一些卡片组件,每个组件都有自己的数据. 然后您使用 Devtools 来检查组件的属性, 更改属性来测试条件样式的更改, 测试事件是否适当发射, 并确保 Vuex 状态管理设置正确 .

要了解更多关于 Vue.js Devtools 的信息,您可以访问官方 Vue DevTools 文档. 有关 Vue 的更多教程,请参阅如何使用 Vue.js 系列开发网站页面。

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

介绍