7.2 开发者工具 DevTools
对于前端开发者来说，了解了浏览器的组成结构和渲染引擎的工作原理，可以让我们更清楚自己编写的代码是如何被浏览器渲染成页面的。但光了解这些还不够，我们不可能一次性编写出符合要求的理想代码。在实际的开发过程中，往往是一边写代码一边在浏览器中预览效果，因此调试和定位异常的功能必不可少。
Chrome 是现代浏览器的代表，同时也是绝大多数前端开发者使用的浏览器。Chrome 提供了开发者工具（DevTools）用于帮助前端开发者调试和控制浏览器各个组成部分的功能。最常用的，我们可以查看网页的 DOM 结构和对应的样式信息（渲染树），也可以在控制台中运行 JavaScript 代码（JS 引擎），或者查看网络请求（网络模块）。
7.2.1 打开 DevTools
打开 DevTools 的方式有很多种。可以用鼠标点击打开，也可以用键盘快捷键打开。
- 鼠标打开
直接右击打开页面菜单，点击“检查”按钮即可打开开发者工具，如图 8-5 所示。
有时候用户可能会禁用右击菜单，此时我们用另一种方式，在浏览器中按照图 8-6 所示位置找到开发者工具按钮，点击打开。
- 快捷键打开
快捷键打开当然更便捷。不同的系统使用不同的快捷键，具体如下：
- Windows：Control+Shift+C
- Mac：Command+Option+C
打开 DevTools 后，可以在页面底部看到 DevTools 的 UI，如图 8-7 所示。
7.2.2 认识 DevTools 结构
DevTools 可以按照功能划分为 4 个区域，分别是左右操作栏区域、中间选项卡区域和选项卡内容区域。在下图 8-8 中各个区域都用方框圈了出来并标记了序号。
如图中所示，点击 2 号区域不同的选项卡时，4 号区域会切换到不同的选项卡内容。每个选项卡的具体功能我们在后边介绍，但不管切换到哪个选项卡，1 号区域和 2 号区域的操作按钮是一直存在的，我们看这些操作按钮的作用是什么。
- 检查元素
左边操作栏（1 号区域）的第一个按钮用于检查页面元素。点击开启后将鼠标移动到页面中，就可以看到页面中鼠标位置的元素信息，移动鼠标自动切换元素，点击后会定位到该元素，如图 8-9 所示。
该功能在实际开发调试中非常有用，方便快速找到页面中某个部分对应的元素，查看或调试该元素代码。
- 设备模式
DevTools 支持在浏览器中模拟移动端设备，这对开发移动端网页非常友好。左边操作栏（1 号区域）的第二个按钮，点击即可切换设备模式，如图 8-10 所示。
移动端模式下还可以切换不同的机型，从而切换不同的页面尺寸。当然也支持自定义设备的宽高，可以帮助我们调试响应式页面。
注意：移动设备的某些特性是 DevTools 无法模拟的。例如，移动 CPU 的架构与笔记本电脑的 CPU 架构不同。最终的真实效果，请以移动设备上实际运行的结果为准。
- DevTools 设置
右边操作栏（2 号区域）的小齿轮按钮，点击后会打开 DevTools 设置页面。该页面的设置选项非常丰富，包括整个开发者工具的主题、颜色、语言，各个选项卡的自定义配置、命令快捷键等，你几乎可以自定义自己的 DevTools 内容，如图 8-11 所示。
对于初学者来说，一般不需要修改很多设置，学会开发者工具中的众多选项卡功能就足够了。但如果你的 DevTools 语言是英文，建议先在设置中将语言项改成中文，方便我们后面的学习。
- DevTools 位置
默认情况下 DevTools 会出现浏览器页面的底部，这样会挤压页面的高度。有时候我们希望它可以出现在页面的左边或右边，这些都是可以的。右边操作栏（2 号区域）有一个“三个点”的按钮，点击后可以看到如图 8-12 所示的修改 DevTools 位置的按钮，点击即可切换。
