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

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

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

安装

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

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

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

开始使用

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

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')

控制台打开查看:

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

inspector tab (检查器选项卡)

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

组件操作图标

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

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

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

最后，带有