【玩转Vue3全家桶】调试:提高开发效率必备的Vue Devtools

前言: Chrome 的开发者工具 Devtools,就是 Vue 的调试工具中最好的选择。由于 Chrome 也公开了 Devtools 开发的规范,Vue Devtools 就是 Vue 官方开发的一个基于 Chrome 浏览器的插件,作为调试工具,它可以帮助我们更好地调试 Vuejs 代码。

一、Chrome调试工具

    首先,我们来了解一下 Chrome 的调试工具,也就是 Chrome 的开发者工具 Chrome DevTools。点击F12 。
【玩转Vue3全家桶】调试:提高开发效率必备的Vue Devtools
    在调试窗口中可以看到:

  • Elements 页面可以帮助我们调试页面的 HTML 和 CSS;
  • Console 页面是我们用得最多的页面,它可以帮助我们调试 JavaScript;
  • Source 页面可以帮助我们调试开发中的源码;
  • Application 页面可以帮助我们调试本地存储和一些浏览器服务,比如 Cookie、Localstorage、通知等等;
  • Network 页面在我们开发前后端交互接口的时候,可以让我们看到每个网络请求的状态和参数;
  • Performance 页面则用来调试网页性能;
  • Lighthouse 是 Google 官方开发的插件,用来获取网页性能报告;
  • Animations 用于调试动画;
  • Security 用于调试安全特性。
        而调试窗口最后面的 Vue 页面就是需要额外安装的 Vue Devtools,也就是调试 Vue 必备的工具。
        然后,我们再来看一下在调试中用得最多的 Console 页面。
        国外有些程序员还直接在报错信息里加上 * 搜索地址,也算是把 Console 玩出花样了。
    【玩转Vue3全家桶】调试:提高开发效率必备的Vue Devtools
        参考上面的例子,我们可以在src/main.js里加入下面的代码,这样就可以在日志信息中直接复制报错内容中的链接,去Stack Overflow中寻求答案。
window.onerror = function(e){
    console.log(['https://*.com/search?q=[js]+'+e])
}

    关于console,分享一个网上贺老的面试题,如何在console页面输入代码,统计一个官网共有多少中HTML的标签。打开console页面输入如下代码:

new Set([...document.querySelectorAll('*')].map(n=>n.nodeName)).size

二、Vue Devtools

    首先,安装一下 Vue Devtools。安装教程:https://devtools.vuejs.org/。安装完毕后,如果调试的前端页面中有 Vue 相关的代码,就会激活这个 tab。
【玩转Vue3全家桶】调试:提高开发效率必备的Vue Devtools
    当直接修改调试窗口里面的数据,这样,正在调试的前端页面也会同步数据的显示效果。有了 Vue 的调试页面,当我们碰到页面中的数据和标签不同步的情况时,就可以很轻松地定位出是哪里出现了问题。
    在 Component 的下拉框那里,我们还可以选择 Vuex 和 Router 页面,分别用来调试 Vuex 和 vue-router。
    先来点击 Vuex 页面试一下,这个页面里的操作可以帮助我们把 Vuex 的执行过程从黑盒变成一个白盒。简单来说,我们可以在调试窗口的右侧看到 Vuex 内部所有的数据变化,包括 state、getters 等。
【玩转Vue3全家桶】调试:提高开发效率必备的Vue Devtools
    点击 Vuex 下拉框里的 Routes 页面,这个页面里显示了整个应用路由的配置、匹配状态、参数等。相信有了 Vue Devtools 后,你能够更快地调试 Vue 项目的内部运行状态,从而极大地提高开发效率。
    如下图所示,在用红框标记的四个工具中,最右边的那个工具可以让你直接在编辑器里打开这个代码。
【玩转Vue3全家桶】调试:提高开发效率必备的Vue Devtools

三、断点调试

    使用断点调试的功能,Chrome 的调试窗口会识别代码中的 debugger 关键字,并中断代码的执行。debugger 也是高级程序员必备的断点调试法,一定要掌握。
【玩转Vue3全家桶】调试:提高开发效率必备的Vue Devtools

四、性能相关的调试

    来了解一下页面的性能调试方法。比如,在你遇到页面交互略有卡顿的时候,你可以在调试窗口中点击 Performance 页面中的录制按钮,然后重复你卡顿的操作后,点击结束,就可以清晰看到你在和页面进行交互操作时,浏览器中性能的变化。
    以某官网页面作为具体的例子,我们在调试窗口中点击 Performance 页面中的录制按钮,然后进行刷新页面的操作,并点击首页轮播图,之后我们可以看到如下的效果:
【玩转Vue3全家桶】调试:提高开发效率必备的Vue Devtools
    滑动鼠标,这样就能很清晰地看到极客时间页面加载的过程。然后,我们重点看下首屏加载中的性能指标,通过下方的饼图,你可以看到整个刷新过程中耗时的比例,其中 JS 代码 391ms,整体 624ms。
【玩转Vue3全家桶】调试:提高开发效率必备的Vue Devtools
    在 Performace 页面中,我们还可以详细地看到每个函数的执行时间。
【玩转Vue3全家桶】调试:提高开发效率必备的Vue Devtools
    如果你觉得上面手动录制页面的性能报告的方法过于繁琐,还可以直接使用 lighthouse 插件。我们进入到 lighthouse 页面,选择 desktop 桌面版后,点击生成报告。lighthouse 在浏览器上模拟刷新的操作后,给出一个网页评分。这里我们可以看到,网站首页的评分是 72 分,在合格的标准线上。
【玩转Vue3全家桶】调试:提高开发效率必备的Vue Devtools
    我们先看下性能指标,下图中详细地给出了 FCP、TTI、LCP 等常见性能指标,并且还很贴心地给出了建议,包括字体、图标宽高、DOM 操作等等,其实我们按照这些建议依次修改,就可以实现对网页的性能优化了。并且网页优化后,性能分数的提升还可以很好地量化优化的结果。
【玩转Vue3全家桶】调试:提高开发效率必备的Vue Devtools
总结:
    Vue Devtools 理解为是对 Chrome 调试工具的一个扩展。在Vue Devtools中,我们可以很方便地调试 Vue 的应用,比如查看 Vue 的组件嵌套、查看 Vue 组件内部的 data 等属性。
    此外,当我们遇见页面中的数据和渲染结果不一致的 bug 时,我们可以很方便地使用 Vue Devtools 精确地定位问题,从而极大地提高了开发效率。并且 Vue Devtools 还支持了 Vue 和 vue-router 的调试页面,这让整个页面的 Vuex 数据和路由都清晰可见。
参考博客: 《玩转Vue3全家桶》

上一篇:15个你不得不知道的Chrome dev tools的小技巧


下一篇:Springboot实现Tomcat热部署