Vue3已经出来了，Vue3Devtools正式版即将到来。我们目前使用的是测试版。下面我们就来看看Vue3Devtools的新特性吧。安装打开谷歌应用商店，搜索vuedevtools，选择beatlogo进行安装，如下图：注意，使用Vue3devtools时，关闭Vue2devtools，以免混淆。第一步完成。如果店铺打不开，可以自行百度。反正你的方法肯定比我多。开始使用安装完成后，我们打开控制台，会出现一个Vue选项卡，如下图：multi-app（多应用视图）多应用视图，也就是我们可以查看多个应用。例如，如果我将多个应用程序添加到项目AcreateApp看起来像这样：(App).mount('#app')createApp(App2).mount('#app1')createApp(App3).mount('#app2')打开控制台查看：在有多个Vue应用的浏览器页面中，您可以在它们之间快速交换，并能够在iframe中检查Vue应用程序。检查器选项卡（Inspectortab）我们可以通过检查器查看各个组件的状态，检查器是一个圆规形状的图标。组件操作图标当您选择一个组件时，您会在右上角看到一组三个不同的图标。第一只眼睛的图标代表滚动到组件。单击此图标时，浏览器将滚动到组件所在的位置。第二个<>表示显示渲染代码。当你点击这个图标时，你可以看到当前组件的渲染功能。最后，带有<的汉堡包图标表示检查DOM。单击它时，将显示组件，它也代表Dom的位置。多根组件大家可能注意到了，我们的组件旁边有一些小标签，如下图：首先大家可以看到有一个fragment标签，就是多根组件的意思，什么是多根，直接看我们的FragmentComponent.vue的内容：Fragment1
Fragment2
多根是指和Vue2一样只有一个根元素，不是多个。性能指标除了多个组件的标识外，我们还可以看到一些数字标识：当我们的组件因为渲染速度慢而表现不佳时，它会显示出来，告诉我们哪些组件比较耗时。如上图所示，将鼠标悬停在上面时，可以看到更多的信息提示。路由指示器除了多根和性能指示器之外，还有一个路由指示器：这个新功能可以方便地快速查看链接的设置。但奇怪的是，这个特性并不是Vue工具本身直接添加的，而是VueRouter添加的。新的Vuedev-tools插件的另一个重要特性是它可以与外部插件完全集成。我们可以很方便的查看到所使用的插件信息。我们案例中的项目使用了两个库：Vuex和VueRouter。点击Components的下拉可以看到这两兄弟：点击Others可以看到插件的自定义视图。例如，VueRouter面板向我们展示了当前可用路由的列表。Timeline就在inspector的旁边，我们也可以看到：ThisistheTimeline，我们先称它为Timeline。当您第一次打开它时（如果您还没有接触过您的应用程序），您会看到一个空白的中央区域，左侧有彩色项目符号。每个颜色编码的通道将实时显示应用程序触发的事件的时间线。例如，当我们点击一??条路线时，下面的点会出现在实际时间轴的右侧。乍一看，这似乎并不多，但这些小点中包含了很多信息。如果我单击其中一个紫色鼠标事件，最右侧的第三个面板将显示以下信息。不仅我的点击事件被注册了，而且我的mouseup和mousedown事件也包括了点击。我们甚至可以获得捕获鼠标事件的x和y坐标。蓝色圆圈代表路由信息，点击蓝色圆圈可以看到详细的路由信息??。如下所示：组件事件也会显示完整的负载信息。例如，像这样的简单按钮的点击事件。Clickme如果觉得面板显示的选项太多，有点头晕，我们可以点击右上角关闭一些我们不想要的：在编辑器中打开当你的一个自定义组件在检查器中被选中时，如果我们想要它的具体定义，我们也可以直接在编辑器中打开它如果你点击这个按钮，编辑器将打开该文件对应的文件！
