我们团队在 Vue 3 Dev Tools 的帮助下，调试效率有了质的飞跃！

悠悠 2022-09-07 14:47 301阅读 0赞

> 有梦想，有干货，微信搜索 **【大迁世界】** 关注这个在凌晨还在刷碗的刷碗智。
> 
> 本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

Vue3 已经出来了， Vue3 Devtools 正式版也快出来了，目前我们在用的是 beta 版本，现在我们来看看 Vue3 Devtoolls 有哪些新的功能。

#### 安装 ####

打开谷应用商店，搜索 `vue devtools`，选择 beat 的标识安装，如下所示：

![9a56ffda6fec2c7c5902e8e2ace0b899.png][]

**注意，在使用 Vue3 devtools 时，要把 Vue2 devtools 的关掉，以免造成混淆。**

第一步完成，如果商店打开不了的，自行百度，方法反正你们肯定比我多。

#### 开始使用 ####

安装完成了，我们打开控制台就有一个 Vue 的 tab，如果下所示：

![c70815c17a38155cc7fa722013bbe01e.png][]

### multi-app (多应用视图) ###

多应用视图，意思就是我们可以查看多个应用，比如我在项目中添加多个 `createApp` 如下所示：

import { createApp } from 'vue'
    import App from './App.vue'
    import App2 from './App2.vue'
    import App3 from './App3.vue'
    
    createApp(App).mount('#app')
    createApp(App2).mount('#app1')
    createApp(App3).mount('#app2')

控制台打开查看:

![be8cc81b59223bd7b37ea77c903932f5.png][]

在有多个Vue应用程序的浏览器页面中，可以在它们之间快速交换，并有能力检查在`iframe`内的Vue应用程序。

### inspector tab (检查器选项卡) ###

我们可以通过检查器查看每个组件的状态，这个检查器就是罗盘状的图标。

![01200db63b5dd5c76660772c7dc252d4.png][]

![0eefd8a1e08354b98c811343b5ea2955.gif][]

### 组件操作图标 ###

当选择一个组件时，会看到右上方有一组三个不同的图标。

![ccfb9bfb897c3b4f0e4949864fbc2cb0.png][]

第一个眼睛的图标的表示 `Scroll to component`。当点击这个图标时，浏览器将会滚动到组件所在的位置。

![19a839a335cbe7f68b46fb40cf677fd3.gif][]

第二个 `<>` 表示的是 `Show render code`。当点击这个图标时，可以看到当前组件的`Render`函数。

![57b92ffabebd341f9add8ea9d89f8b02.gif][]

最后，带有`<`的汉堡包图标表示检查DOM。点击它时，就会显示组件也表示 Dom 的位置。

![3f921e91817780afbbda3e4ed93058c1.gif][]

### 多根组件 ###

你可能已经注意到了，在我们组件旁边有些小标签，如下所示：

![3828edaf485c84c40850cd41ddb15f30.png][]

首先可以看到有 `fragment` 标记，它表示多根组件，啥是多根，直接看我们`FragmentComponent.vue` 的内容：

<template>
      <div>Fragment1</div>
      <div>Fragment2</div>
    </template>

多根就是没有像 Vue2 一样，只有一个根元素，不能多个。

### 性能指示 ###

除了多根组件的标识，我们还可以看到一些数字的标识：

![a84ef95db2edf35bd223d7d525453cf4.png][]

当我们的组件因为其渲染速度慢而表现不佳时，它就会显示出来，告诉我们哪些组件耗时比较严重。

如上图所示，当你把鼠标悬停在它上面时，可以看到有更多信息提示。

![362b96b3a3b791242b1a607cddcb4278.png][]

### 路由指示器 ###

除了多根和性能指示器外，还有一个路由指示器：

![1f09cb26f2b7ab1e963f5187e2c4cd79.png][]

这个新特性在快速查看 links 的设置很方便。但奇怪的是，这个特性并不是由 Vue tools 本身直接添加的，而是由Vue Router 添加的.

### 插件 ###

新的Vue dev-tools 还有一个很重要的功能就是它完全可以与外部插件集成。我们可以很方便的查看使用到的插件信息。

我们事例的项目，已经使用两个库：`Vuex`和 `Vue Router`，点击 `Components` 下拉，就可以看到这两兄弟：

![d406e33e618506a1ded0e50feb61f3c4.png][]

点击其它中就会看到该插件的自定义视图。例如，Vue Router面板向我们展示了当前可用的路由列表。

![38cc6c25565c64d1b1f8c26cb6adc3fe.png][]

### Timeline ###

在检查器的旁边，我们还可以看到这个：

![61d2ca5e55fbe983c20ffe1c71abc640.png][]

这个就是 Timeline，我们先叫它**时间线**吧。

当你第一次打开它的时候(如果你还没有接触过你的应用程序的话)，你会看到一个空白的中央区域，左边有彩色的项目符号。

![572073cb0012a65f26fb6489f36939bb.png][]

每个颜色编码的通道都将显示应用程序实时触发的事件的时间轴。

例如，我们点击一个路由的时候，下面的点会出现在实际时间线的右侧。

![5127f3eec758922ae3da42a871a720c2.png][]

这乍一看好像没啥软用，但这些小点里装着很多信息。

如果我点击其中一个紫色的 `Mouse` 事件，在最右边的第三个面板显示以下信息。

![215f7e5c789b15be888a3012b2a705c3.png][]

不仅我的点击事件被注册，而且我的 `mouseup` 和 `mousedown` 事件也包含了点击。 我们甚至可以获得鼠标事件捕获的 `x` 和 `y` 坐标。

蓝色的圈表示路由的信息，点击蓝色的圈就可以看到路由的详细信息。如下所示：

![28dcf2002e8749f43419804a557e4591.png][]

组件事件也会显示完整的有效载荷信息。例如，像这样一个简单按钮的点击事件。

<button @click="$emit('customEvent', { some: 'data' })">Click me</button>

![758a77e82e136f14d3fd80c8395a210d.png][]

如果你觉得面板展示太多选项，有点晕，我们可以点击右上角的来关掉一些我们不想的：

![8604d81d6910ec9b7a5eaed6069e1d56.png][]

### 在编辑器中打开 ###

当在检查器中选择你的一个自定义组件时，如果我们想它具体的定义，还可以直接在编辑器中打开

![d64eb6811077310f4c1f1fdae139ad51.png][]

如果单击此按钮，编辑器将打开该文件对应的文件!

到此，Vue dev-tools 就介绍完了。我是刷碗智，你们想看什么，请留言告诉，我好避开。

参考：https://www.youtube.com/watch?v=ZBkZ7apIA\_Y&feature=emb\_imp\_woyt

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

## 交流 ##

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复**福利**，即可看到福利，你懂的。

[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi
[9a56ffda6fec2c7c5902e8e2ace0b899.png]: /images/20220829/7081c8a49adb4163b4cf7f455279cfe0.png
[c70815c17a38155cc7fa722013bbe01e.png]: /images/20220829/e82d397d66aa4fa89d2523521b914a2f.png
[be8cc81b59223bd7b37ea77c903932f5.png]: /images/20220829/4ba79810ab194f14be986e6e31aef015.png
[01200db63b5dd5c76660772c7dc252d4.png]: /images/20220829/1a240fc9c7754989b0e2567c7c7d0127.png
[0eefd8a1e08354b98c811343b5ea2955.gif]: /images/20220829/f600c487e0004362ae1a3f28a6724b36.png
[ccfb9bfb897c3b4f0e4949864fbc2cb0.png]: /images/20220829/77e7ecd8dcf44a7d962b5c96576a3a9e.png
[19a839a335cbe7f68b46fb40cf677fd3.gif]: /images/20220829/65e3fbfa20914948bbe2b7c49b00dea3.png
[57b92ffabebd341f9add8ea9d89f8b02.gif]: /images/20220829/7ee22a7eb6954856973e63256d22b64d.png
[3f921e91817780afbbda3e4ed93058c1.gif]: /images/20220829/1e8e3ab095a04c0ba49861f75c602d03.png
[3828edaf485c84c40850cd41ddb15f30.png]: /images/20220829/a342e5f4d46b47f0abdb5addbd157f47.png
[a84ef95db2edf35bd223d7d525453cf4.png]: /images/20220829/e948ce5d50ad4b73814edefc3c755c73.png
[362b96b3a3b791242b1a607cddcb4278.png]: /images/20220829/c2e7549d66a14cb98f29c31187d9779c.png
[1f09cb26f2b7ab1e963f5187e2c4cd79.png]: /images/20220829/711e9af183b84a50b885e3c271e17bcc.png
[d406e33e618506a1ded0e50feb61f3c4.png]: /images/20220829/61f36222e79b4494900cf0b135537e5a.png
[38cc6c25565c64d1b1f8c26cb6adc3fe.png]: /images/20220829/088c277790f844289d2cf019f05ff7c4.png
[61d2ca5e55fbe983c20ffe1c71abc640.png]: /images/20220829/79d6a04bb1f84a9fb605c71e07eca29d.png
[572073cb0012a65f26fb6489f36939bb.png]: /images/20220829/c4bade34c6614b4dafda4637f32d86eb.png
[5127f3eec758922ae3da42a871a720c2.png]: /images/20220829/b7736674faa7436299ebab8a2a7da493.png
[215f7e5c789b15be888a3012b2a705c3.png]: /images/20220829/f2d1e8e4bf6d44d0aacd72fe3a5e2075.png
[28dcf2002e8749f43419804a557e4591.png]: /images/20220829/d3ad3fca02c74fa997e32a032846113e.png
[758a77e82e136f14d3fd80c8395a210d.png]: /images/20220829/ab91866229d441fbaa9ee71db9a1b888.png
[8604d81d6910ec9b7a5eaed6069e1d56.png]: /images/20220829/f16775e14ab24877bf17057e6f56dcb1.png
[d64eb6811077310f4c1f1fdae139ad51.png]: /images/20220829/3110cd5b12134b268b7fdfd35b831fdb.png
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi