关于vue.js:Vue-DevTools-使用指南-如何安装和使用-Vue-DevTools-调试-Vue-组件

本文首发：《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 小时搞定，谁用谁晓得，用上早上班，详见本文文末。

咱们开始吧。

咱们首先用 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 后盾框架管理系统测评》

下载地址：阿里网盘「Vue Devtools」https://www.aliyundrive.com/s… 提取码: 2yi4

下载解压后，点击 chrome 右上角三个点，进入「扩大程序」页面

而后把刚下载好的 Vue Devtools 文件拖入浏览器进行装置。

装置实现后，能够在界面和浏览器右上角，看到 Vue devtools 的信息，阐明装置胜利。

本文次要介绍如何在 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 富文本编辑器横向测评与推动》

首先关上咱们在第一步里配置的「单词卡片」的 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/》

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 怎么样，如何应用》

咱们除了能够应用 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 性价比最佳

关于vue.js:Vue-DevTools-使用指南-如何安装和使用-Vue-DevTools-调试-Vue-组件

第 1 步：创立一个测试实例 APP

第 2 步：装置 Vue Devtools

本地装置（无需迷信上网）

在 Chrome 商店间接装置（须要迷信上网）

第 3 步：如何应用 Vue Devtools 查看组件属性

第 4 步：应用 Devtools 测试对组件的更改

第 5 步：如何应用 Vue Devtools 测试触发事件

总结

Just My Socks（注册教程内含优惠码）

关于vue.js:Vue-DevTools-使用指南-如何安装和使用-Vue-DevTools-调试-Vue-组件

第 1 步：创立一个测试实例 APP

第 2 步：装置 Vue Devtools

本地装置（无需迷信上网）

在 Chrome 商店间接装置（须要迷信上网）

第 3 步：如何应用 Vue Devtools 查看组件属性

第 4 步：应用 Devtools 测试对组件的更改

第 5 步：如何应用 Vue Devtools 测试触发事件

总结

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）