关于vue.js:我们团队在-Vue-3-Dev-Tools-的帮助下调试效率有了质的飞跃

33次阅读

共计 2283 个字符,预计需要花费 6 分钟才能阅读完成。

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

本文 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 函数。

最初,带有 < 的汉堡包图标示意查看 DOM。点击它时,就会显示组件也示意 Dom 的地位。

多根组件

你可能曾经留神到了,在咱们组件旁边有些小标签,如下所示:

首先能够看到有 fragment 标记,它示意多根组件,啥是多根,间接看咱们FragmentComponent.vue 的内容:

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

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

性能批示

除了多根组件的标识,咱们还能够看到一些数字的标识:

当咱们的组件因为其渲染速度慢而体现不佳时,它就会显示进去,通知咱们哪些组件耗时比较严重。

如上图所示,当你把鼠标悬停在它下面时,能够看到有更多信息提醒。

路由指示器

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

这个新个性在疾速查看 links 的设置很不便。但奇怪的是,这个个性并不是由 Vue tools 自身间接增加的,而是由 Vue Router 增加的.

插件

新的 Vue dev-tools 还有一个很重要的性能就是它齐全能够与内部插件集成。咱们能够很不便的查看应用到的插件信息。

咱们事例的我的项目,曾经应用两个库:VuexVue Router,点击 Components 下拉,就能够看到这两兄弟:

点击其它中就会看到该插件的自定义视图。例如,Vue Router 面板向咱们展现了以后可用的路由列表。

Timeline

在查看器的旁边,咱们还能够看到这个:

这个就是 Timeline,咱们先叫它 工夫线 吧。

当你第一次关上它的时候(如果你还没有接触过你的应用程序的话),你会看到一个空白的地方区域,右边有黑白的我的项目符号。

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

例如,咱们点击一个路由的时候,上面的点会呈现在理论工夫线的右侧。

这乍一看如同没啥软用,但这些小点里装着很多信息。

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

不仅我的点击事件被注册,而且我的 mouseupmousedown 事件也蕴含了点击。咱们甚至能够取得鼠标事件捕捉的 xy 坐标。

蓝色的圈示意路由的信息,点击蓝色的圈就能够看到路由的详细信息。如下所示:

组件事件也会显示残缺的有效载荷信息。例如,像这样一个简略按钮的点击事件。

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

如果你感觉面板展现太多选项,有点晕,咱们能够点击右上角的来关掉一些咱们不想的:

在编辑器中关上

当在查看器中抉择你的一个自定义组件时,如果咱们想它具体的定义,还能够间接在编辑器中关上

如果单击此按钮,编辑器将关上该文件对应的文件!

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

参考:https://www.youtube.com/watch…

代码部署后可能存在的 BUG 没法实时晓得,预先为了解决这些 BUG,花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

交换

文章每周继续更新,能够微信搜寻「大迁世界」第一工夫浏览和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录,整顿了很多我的文档,欢送 Star 和欠缺,大家面试能够参照考点温习,另外关注公众号,后盾回复 福利,即可看到福利,你懂的。

正文完
 0