你好，我是大圣。

跟随我的脚步，通过对前面数讲内容的学习，相信你现在对 Vue+Vuex+vue-router 都已经比较熟悉了。在开启课程后续的复杂项目之前，学会如何调试项目也是我们必须要掌握的一个技能。

在项目开发中，我们会碰到各种各样的问题，有样式错误、有不符合预期的代码报错、有前后端联调失败等问题。也因此，一个能全盘帮我们监控项目的方方面面，甚至在监控时，能精确到源码每一行的运行状态的调试工具，就显得非常有必要了。

而 Chrome 的开发者工具 Devtools，就是 Vue 的调试工具中最好的选择。由于 Chrome 也公开了 Devtools 开发的规范，因而各大框架比如 Vue 和 React，都会在 Chrome Devtools 的基础之上，开发自己框架的调试插件，这样就可以更方便地调试框架内部的代码。Vue Devtools 就是 Vue 官方开发的一个基于 Chrome 浏览器的插件，作为调试工具，它可以帮助我们更好地调试 Vuejs 代码。

这节课，我会先为你讲解如何借助 Chrome 和 VS Code 搭建高效的开发环境，然后再教你使用 Vue 的官方调试插件 Vue Devtools 来进行项目调试工作。

Chrome 调试工具

首先，我们来了解一下 Chrome 的调试工具，也就是 Chrome 的开发者工具 Chrome DevTools。在 Chrome 浏览器中，我们打开任意一个页面，点击鼠标右键，再点击审查元素（检查），或者直接点击 F12 就可以看到调试窗口了。

我们看下截图中的调试窗口，里面有几个页面是我们经常用到的：Elements 页面可以帮助我们调试页面的 HTML 和 CSS；Console 页面是我们用得最多的页面，它可以帮助我们调试 JavaScript；Source 页面可以帮助我们调试开发中的源码；Application 页面可以帮助我们调试本地存储和一些浏览器服务，比如 Cookie、Localstorage、通知等等。

Network 页面在我们开发前后端交互接口的时候，可以让我们看到每个网络请求的状态和参数；Performance 页面则用来调试网页性能。Lighthouse 是 Google 官方开发的插件，用来获取网页性能报告，今天我也会教你用 lighthouse 评测一下极客时间官网首页的性能。

以上说的这些调试窗口中的页面，都是 Chrome 的开发者工具中自带的选项，而调试窗口最后面的 Vue 页面就是需要额外安装的 Vue Devtools，也就是调试 Vue 必备的工具。

上图所示的是项目开发中用到最多的页面，而在调试窗口右侧的工具栏中，你还可以选中 More tools 来开启更多自带的插件。如下图所示，More tools 中的 Animations 用于调试动画，Security 用于调试安全特性等等。

下面，我们重点介绍一下调试窗口中的 Elements 页面和 Console 页面。这两个页面用来调试页面中的 HTML+CSS+JavaScript，是使用频率最高的两个页面。

在 Elements 页面中，首先映入眼帘的是开发的 Vue 项目在浏览器里的状态。调试窗口的左侧是正在调试的前端页面的 HTML 结构，当我们把鼠标放到 HTML 代码的任何元素上时，在调试的前端页面上，对应元素在前端页面中所在的位置都会高亮起来。

当我们点击一个元素之后，调试窗口右侧就会显示出当前元素所有的 CSS 样式，这对于我们开发的页面布局和样式调整非常有帮助。并且，我们还可以在 Elements 页面左侧的代码中，任意修改页面的 HTML 和 CSS 代码。

比如，以我在这里给出的调试页面为例，我们可以选中调试页面（清单应用）的 div 标签，再点击调试页面右侧的 element.style，这样就可以直接新增 background 和 padding 属性，也即会得到下图的效果。此外，有一些页面布局上的 bug 可以用这种方式，在网页里实时调整后，再去更新代码。