有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智者。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。Vue3已经出来了，Vue3Devtools正式版也快出来了。我们目前使用的是测试版。下面我们就来看看Vue3Devtools的新特性吧。安装打开谷歌应用商店，搜索vuedevtools，选择beatlogo进行安装，如下图：注意，使用Vue3devtools时，关闭Vue2devtools，以免混淆。第一步完成。如果店铺打不开，可以自行百度。反正你的方法肯定比我多。开始使用安装完成后，我们打开控制台，会出现一个Vue选项卡，如下图：multi-app（多应用视图）多应用视图，也就是我们可以查看多个应用。例如，如果我向项目添加多个应用程序AcreateApp看起来像这样：import{createApp}from'vue'/App3.vue'createApp(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坐标。蓝色圆圈代表路由信息，点击蓝色圆圈可以看到详细的路由信息??。如下所示：组件事件也会显示完整的负载信息。例如，像这样的简单按钮的点击事件。点我如果觉得面板显示的选项太多，有点头晕，我们可以点击右上角关闭它我们不想要的东西：在编辑器中打开当你的自定义组件之一在检查器中被选中时，如果我们想要它的具体定义，它也可以直接在编辑器中打开如果你点击这个按钮，编辑器会打开这个文件对应的文件！至此，Vuedev-tools的介绍就结束了。我是传智，有什么想看的，请留言告诉我，我可以避免。参考：https://www.youtube.com/watch...代码部署后可能出现的bug无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便在这里给大家推荐一款好用的BUG监控工具Fundebug。交流文章每周更新。可以微信搜索“大千世界”阅读即时更新（比博文早一两篇）。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi。我的文档发表了很多，欢迎Star和完善，可以参考考试中心面试复习，关注公众号，后台会回复福利，福利可以看到，你知道。
