共计 7071 个字符，预计需要花费 18 分钟才能阅读完成。
本文首发：《Vue DevTools 使用指南 – 如何装置和应用 Vue DevTools 调试 Vue 组件》
Vue Devtools 是 Vue 官网公布的调试浏览器插件，能够装置在 Chrome 和 Firefox 等浏览器上，间接内嵌在开发者工具中，应用体验晦涩。Vue Devtools 由 Vue.js 外围团队成员 Guillaume Chau 和 Evan You 开发。
在本教程中，咱们首先来一起搭建一个测试实例，而后在浏览器上装置 Vue DevTools，而后大家可依据教程一步一步调试本人搭建的 APP，从而相熟应用 Vue Devtools。
另外，这个世界曾经悄悄发生变化，当初基本无需写任何前端代码，间接应用卡拉云 —— 新一代低代码开发工具帮你搭建后盾工具，卡拉云可一键接入常见数据库及 API，无需懂前端，内置欠缺的各类前端组件，无需调试，拖拽即用。原来三天的工作量，当初 1 小时搞定，谁用谁晓得，用上早上班，详见本文文末。
咱们开始吧。
第 1 步：创立一个测试实例 APP
咱们首先用 Vue 搭建一个简略的测试 APP，本教程将用这个 APP 给大家示范如何应用 Vue Devtools 工具调试 Vue APP。
搭建过程也非常简单，倡议大家跟着本教程本人也入手操作一遍，一下子就学会了。
咱们来做一套学英语的学习卡片 Ap，在接下来的章节中，咱们应用 Vue Devtools 来监测这个简略的 App
首先，咱们通过 Vue CLI 生成一个新 Vue APP，请关上你的终端，运行：
vue create flashcard-kalacloud而后依据装置界面提醒抉择 Manually select features，而后抉择 ◉ Bable 和 ◉ Vuex 而后回车并持续依据提醒抉择：
创立我的项目后，关上 favorite-airports 终端窗口并 cd 进入 favorite-airports 根文件夹。更改目录后，应用以下 mkdir 命令创立一个新目录：
创立我的项目实现后，CD 到我的项目根目录，而后咱们先来创立一个用于存放数据到 js 文件
首先咱们先建一个放数据的目录
mkdir src/data接着，咱们来创立一个单词列表的 js 文件放在 data 目录下：
文件地位：/src/data/wordlists.js
export default [
{
"word":"apple",
"pronunciation":"[ˈæp(ə)l]",
"paraphrase":"n. 苹果",
"exampleeg":"Sling me an apple, will you?",
"examplecn":"扔个苹果给我，好吗？",
},
{
"word": "banana",
"pronunciation": "[bəˈnɑːnə]",
"paraphrase": "n. 香蕉；喜剧演员",
"exampleeg": "He slipped on a banana skin.",
"examplecn":"他踩在香蕉皮上滑倒了。"
},
{
"word": "happy",
"pronunciation": "[ˈhæpi]",
"paraphrase": "adj. 高兴的；幸福的，使人快乐的；",
"exampleeg": "a happy smile/face",
"examplecn":"快活的微笑╱面容",
},
{
"word": "desk",
"pronunciation": "[desk]",
"paraphrase": "n. 书桌，办公桌；服务台，问询台；",
"exampleeg": "The desk looked undisturbed.",
"examplecn":"那张书桌子看上去没有被动过。",
},
{
"word": "phone",
"pronunciation": "[fəʊn]",
"paraphrase": "n. 电话，电话零碎；受话器，听筒；",
"exampleeg": "I have to make a phone call .",
"examplecn":"我得打个电话。",
},
{
"word": "watch",
"pronunciation": "[wɒtʃ]",
"paraphrase": "v. 看；观看；n. 表；察看，监督；",
"exampleeg": "Watch what I do, then you try.",
"examplecn":"你留神看我的动作，而后试着做。",
}
]这是几组单词数据，咱们接下来会在 APP 用调用这些数据来生成单词卡片，咱们能够借着这个实例来用 Vue Devtools 对其进行测试。
接着咱们在 components 目录下创立一个英语卡的组件，FlashCard.vue，这个组件中蕴含所有「英语卡」的逻辑和款式。
文件地位：/src/components/FlashCard.vue
<template>
<div class="WordCard">
<p>{{WordCard.word}}</p>
<p>{{WordCard.pronunciation}}</p>
<p>{{WordCard.paraphrase}}</p>
<p>{{WordCard.exampleeg}}</p>
<p>{{WordCard.examplecn}}</p>
</div>
</template>
<script>
export default {
props: {
WordCard: {
type: Object,
required: true
}
}
}
</script>
<style scoped>
.WordCard {
border: 1px solid;
border-radius: .7rem;
padding: 1rem;
margin-bottom: 1rem;
}
.WordCard p:first-child {
font-weight: bold;
font-size: 2.5rem;
margin: 1rem 0;
}
.WordCard p:last-child {
font-style: italic;
font-size: 0.5rem;
}
</style>咱们在 <div> 中设置了 WordCard，在<style> 里配置它的款式，生成一个圆角边框，让单词卡看起来像个卡片的样子。
最初咱们把英语卡片组件 FlashCard.vue 和它的数据 wordlists.js，汇总到 App.vue 中，咱们在这里把所有代码执行逻辑串起来。
文件地位：/ src / App.vue
<template>
<div class="wrapper">
<div v-for="WordCard in WordCards" :key="WordCard.word">
<FlashCard :WordCard="WordCard" />
</div>
</div>
</template>
<script>
import {ref} from 'vue'
import allWordCards from './data/wordlists.js'
import FlashCard from './components/FlashCard.vue'
export default {
name:'App',
components: {FlashCard},
setup() {const WordCards = ref(allWordCards)
return {WordCards}
}
}
</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>在 App.vue 中，咱们应用 v-for 循环来遍历 wordlists.js 数据，并把数据导入到 FlashCard.vue 中，最初返回数据。
保留退出，而后咱们运行起来，看看成果：
npm run serve
到这里，咱们曾经把测试实例跑起来了，接下来咱们在浏览器里装置 Vue Devtools 对这个实例进行测试。
扩大浏览：《vue3 admin 后盾框架管理系统测评》
第 2 步：装置 Vue Devtools
本地装置（无需迷信上网）
下载地址：阿里网盘「Vue Devtools」https://www.aliyundrive.com/s… 提取码: 2yi4
下载解压后，点击 chrome 右上角三个点，进入「扩大程序」页面
而后把刚下载好的 Vue Devtools 文件拖入浏览器进行装置。
装置实现后，能够在界面和浏览器右上角，看到 Vue devtools 的信息，阐明装置胜利。
在 Chrome 商店间接装置（须要迷信上网）
本文次要介绍如何在 Chrome 上装置 Vue Devtools，如果你应用的是 Firefox，步骤大同小异。
Vue Devtools 分为多个版本，本教程应用的演示 APP 由 Vue 3 搭建，将来的趋势也是 Vue 3，那么咱们优先解说 Vue Devtools Vue 3 的版本，即 Vue.js Devtools bate 版。
首先拜访 Chrome 利用商店，而后在搜寻框搜寻「Vue Devtools」，找到 Vue Devtools bate 版。
点击「Add to Chrome」在浏览器上装置 Vue Devtools 插件。
如果应用的是 Firefox 能够在 Firefox 利用商店里找到，和 Chrome 装置步骤统一。
扩大浏览：《Vue 富文本编辑器横向测评与推动》
第 3 步：如何应用 Vue Devtools 查看组件属性
首先关上咱们在第一步里配置的「单词卡片」的 Vue app 页面。在这个 Vue 页面里，关上「开发者工具」。能够看到「开发者工具」外面曾经多了一个新的选项卡 —— Vue。点一下这个选项卡，进入 Vue Devtools 工具。
Vue Devtools 初始化后蕴含两个功能区，左侧为 Vue 组件或是 Vuex 列表。默认启动是 Vue 组件列表，所有当你追随本教程步骤关上 Vue Devtools 时，能够看到咱们刚刚写的 App 及 6 个卡片的列表。
如上图，入选中一个 FlashCard 时，能够看到右侧显示它的详细信息。
当咱们用鼠标滑过左侧列表选项时，绝对应的代码区域会凸显为绿色，不便咱们定位正在编辑的组件区域。
Vue Devtools 整个界面和基本操作非常简单，与 Chrome 的开发这工具操作逻辑基本一致，下一节，咱们来学习如何应用 Vue Devtools 对组件进行测试和批改。
扩大浏览：《https://kalacloud.com/blog/best-vue-ui-component-libraries/》
第 4 步：应用 Devtools 测试对组件的更改
Vue Devtools 不便之处能够疾速定位组件地位，疾速调出对应的源码，疾速批改测试。在本小结里咱们向第 1 步中写的组件中增加一段代码，扭转一下卡片的性能和款式，整个批改过程中，你能学到如何应用 Vue Devtools 进行测试。
在咱们第 1 步写的 Vue app 中，有六张单词卡片，如果有单词你没有记熟，咱们须要一个色彩辨认性能，让单词卡片揭示你再次背诵。咱们来通过 Vue Devtools 来给组件减少这个性能。
咱们来批改「happy」这张单词卡片，首先在左侧定位到它，而后点击右上角到小箭头，关上编辑器。
文件地位：/ src / components / FlashCard.vue
<template>
<div class="WordCard">
<p>{{WordCard.word}}</p>
<p>{{WordCard.pronunciation}}</p>
<p>{{WordCard.paraphrase}}</p>
<p>{{WordCard.exampleeg}}</p>
<p>{{WordCard.examplecn}}</p>
<p> 记忆确认：{{WordCard.remember}}</p>
</div>
</template>
...咱们间接在弹出的编辑器里增加一行代码<p> 记忆确认：{{WordCard.remember}}</p> 让卡面里新增一个「是否记住」的性能，如果记住了，卡片会变成绿色。
而后咱们在 CSS 里增加一个类，给记住的卡片换一个绿色。
文件地位：/ src / components / FlashCard.vue
<template>
<div class="WordCard" :class="{'remember': WordCard.remember}"> // 增加一个类
<p>{{WordCard.word}}</p>
<p>{{WordCard.pronunciation}}</p>
<p>{{WordCard.paraphrase}}</p>
<p>{{WordCard.exampleeg}}</p>
<p>{{WordCard.examplecn}}</p>
<p> 记忆确认：{{WordCard.remember}}</p>
</div>
</template>
<style scoped>
...
.WordCard.remember { // 增加一组绿色
border-color: green;
color: green;
}
</style>接着咱们在 wordlists.js 里减少一行数据，表明单词是否记住 "remember": false
文件地位：/ src / data / wordlists.js
export default [
{
"word":"apple",
...
"remember": false},
{
"word": "banana",
...
"remember": false},
{
"word": "happy",
...
"remember": false},
{
"word": "desk",
...
"remember": false},
{
"word": "phone",
...
"remember": false},
{
"word": "watch",
...
"remember": false}
]保留退出。
好，至此咱们曾经把整个测试环境布局实现，接着咱们关上 Vue Devtools
抉择 App，而后找到须要批改的 Object，点击小铅笔，咱们把 false 批改为 true，保留后能够看到 happy 的卡片曾经变成绿色。
当初，咱们曾经在 Vue Devtools 中胜利批改了属性，下一节咱们来实际如何在浏览器测试触发事件。
扩大浏览：《低代码开发工具 appsmith 怎么样，如何应用》
第 5 步：如何应用 Vue Devtools 测试触发事件
咱们除了能够应用 Vue Devtools 调试解决数据和组件属性之外，还能够通过它来调试事件。
如果咱们要测试一个事件，首先要先批改代码，把须要测试的事件放进去。本教程用 click 事件来举例。
咱们关上 FlashCard.vue 组件，在其中增加 click 事件。
文件地位：/src/components/FlashCard.vue
<template>
<div class="WordCard" :class="{'remember': WordCard.remember}" @click="$emit('remember-word', WordCard)"> // 在这里增加 @click 事件
<p>{{WordCard.word}}</p>
<p>{{WordCard.pronunciation}}</p>
<p>{{WordCard.paraphrase}}</p>
<p>{{WordCard.exampleeg}}</p>
<p>{{WordCard.examplecn}}</p>
<p> 记忆确认：{{WordCard.remember}}</p>
</div>
</template>当用户在页面触发 click 操作时，Vue Devtools 就会记录下来，并显示在工夫线上。
点击 Vue Devtools 导航栏的 TimeLine 按钮，这时能够看到，用户在页面上进行的 click 操作都被记录在工夫线上。
这个性能，能够让你查看运行期间产生的任何事件，比方鼠标点击、键盘输入等。
Vue Devtools 不仅记录了事件产生的工夫，也记录了工夫产生的属性及地位。
扩大浏览：《Vue 轮播图组件测评与举荐》
总结
Vue 对于前端开发有跨时代的意义，但对于不想解决前端问题的开发者来说，还是有些繁琐。如果不想调试繁琐的前端，举荐你应用卡拉云，卡拉云内置各类组件，无需懂任何前端，仅需拖拽即可疾速生成。
下图为应用卡拉云搭建的外部广告投放监测零碎，仅需拖拽，1 小时搞定。
卡拉云是新一代低代码开发工具，免装置部署，可一键接入包含 MySQL 在内的常见数据库及 API。可依据本人的工作流，定制开发。无需繁琐的前端开发，只须要简略拖拽，即可疾速搭建企业外部工具。原来三天的开发工作量，应用卡拉云后可缩减至 1 小时，欢送收费试用卡拉云。
扩大浏览：
- 7 种最棒的 Vue Loading 加载动画组件测评与举荐
- 最棒的 7 个 Laravel admin 后盾管理系统举荐
- 12 款最棒 Vue 开源 UI 库测评 – 特地针对国内应用场景举荐
- Video.js 应用教程 – 手把手教你基于 Vue 搭建 HTML 5 视频播放器
- 最棒的天气 API 获取测评，和风天气 api 性价比最佳