【学习笔记】《玩转Vue3全家桶》调试：提高开发效率必备的Vue Devtools

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

一、Chrome调试工具

    首先，我们来了解一下 Chrome 的调试工具，也就是 Chrome 的开发者工具 Chrome DevTools。点击F12 。

    在调试窗口中可以看到：

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

window.onerror = function(e){
    console.log(['https://stackoverflow.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。

    当直接修改调试窗口里面的数据，这样，正在调试的前端页面也会同步数据的显示效果。有了 Vue 的调试页面，当我们碰到页面中的数据和标签不同步的情况时，就可以很轻松地定位出是哪里出现了问题。
    在 Component 的下拉框那里，我们还可以选择 Vuex 和 Router 页面，分别用来调试 Vuex 和 vue-router。
    先来点击 Vuex 页面试一下，这个页面里的操作可以帮助我们把 Vuex 的执行过程从黑盒变成一个白盒。简单来说，我们可以在调试窗口的右侧看到 Vuex 内部所有的数据变化，包括 state、getters 等。

    点击 Vuex 下拉框里的 Routes 页面，这个页面里显示了整个应用路由的配置、匹配状态、参数等。相信有了 Vue Devtools 后，你能够更快地调试 Vue 项目的内部运行状态，从而极大地提高开发效率。
    如下图所示，在用红框标记的四个工具中，最右边的那个工具可以让你直接在编辑器里打开这个代码。

三、断点调试

    使用断点调试的功能，Chrome 的调试窗口会识别代码中的 debugger 关键字，并中断代码的执行。debugger 也是高级程序员必备的断点调试法，一定要掌握。

四、性能相关的调试

    来了解一下页面的性能调试方法。比如，在你遇到页面交互略有卡顿的时候，你可以在调试窗口中点击 Performance 页面中的录制按钮，然后重复你卡顿的操作后，点击结束，就可以清晰看到你在和页面进行交互操作时，浏览器中性能的变化。
    以某官网页面作为具体的例子，我们在调试窗口中点击 Performance 页面中的录制按钮，然后进行刷新页面的操作，并点击首页轮播图，之后我们可以看到如下的效果：

    滑动鼠标，这样就能很清晰地看到极客时间页面加载的过程。然后，我们重点看下首屏加载中的性能指标，通过下方的饼图，你可以看到整个刷新过程中耗时的比例，其中 JS 代码 391ms，整体 624ms。

    在 Performace 页面中，我们还可以详细地看到每个函数的执行时间。

    如果你觉得上面手动录制页面的性能报告的方法过于繁琐，还可以直接使用 lighthouse 插件。我们进入到 lighthouse 页面，选择 desktop 桌面版后，点击生成报告。lighthouse 在浏览器上模拟刷新的操作后，给出一个网页评分。这里我们可以看到，网站首页的评分是 72 分，在合格的标准线上。

    我们先看下性能指标，下图中详细地给出了 FCP、TTI、LCP 等常见性能指标，并且还很贴心地给出了建议，包括字体、图标宽高、DOM 操作等等，其实我们按照这些建议依次修改，就可以实现对网页的性能优化了。并且网页优化后，性能分数的提升还可以很好地量化优化的结果。

总结：
    Vue Devtools 理解为是对 Chrome 调试工具的一个扩展。在Vue Devtools中，我们可以很方便地调试 Vue 的应用，比如查看 Vue 的组件嵌套、查看 Vue 组件内部的 data 等属性。
    此外，当我们遇见页面中的数据和渲染结果不一致的 bug 时，我们可以很方便地使用 Vue Devtools 精确地定位问题，从而极大地提高了开发效率。并且 Vue Devtools 还支持了 Vue 和 vue-router 的调试页面，这让整个页面的 Vuex 数据和路由都清晰可见。
参考博客： 《玩转Vue3全家桶》
    【在 VS Code 中调试】 https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html