1.4　Chrome的开发者工具

网页是在浏览器上呈现的。作为网页的载体，目前较受欢迎的浏览器有Chrome、Mozilla Firefox、Microsoft Edge、Opera、Safari等。本书选择Chrome浏览器进行讲解。Chrome的界面简洁，渲染速度快，并且已经有了很完善的开发者工具，是开发者常用的浏览器。在Chrome官方下载地址可以免费下载Chrome的安装程序，如图1-2所示。

图1-2　下载Chrome浏览器

作为开发者，必须掌握如何从开发者的角度来使用浏览器。开发者工具可以帮助开发者查看网页代码、快速进行调试和查找错误。HTML和CSS出现错误的时候，并不会报错，开发者工具是代码调试最好的方法，开发者应该了解和掌握这个强大的功能。

在想要查看的页面上单击鼠标右键，选择【检查】(或直接按快捷键F12)，会弹出一个窗口，开发者可以在这里查看页面元素，如图1-3所示。

图1-3　查看页面元素

有两种查看页面元素的方法：一种是通过源代码查看，另一种是选择页面中某一位置查看。

1．通过源代码查看元素的CSS样式以及元素在浏览器中的位置

在弹出窗口的左侧选择【Elements】即可查看页面的源代码，单击想要查看的元素，右侧【Styles】界面就会显示该元素使用的CSS样式，如图1-4所示。

图1-4　【Styles】界面

在【Styles】界面中可以查看该元素的CSS样式，还可以查到该元素的某个CSS样式来自哪个CSS文件，使编码调试时修改代码变得非常方便。

提示

这里提到的CSS样式的概念，将在后续的章节中详细讲解。

【Styles】界面旁边是【Computed】界面，如图1-5所示。【Computed】展示该元素的盒模型以及经过计算之后浏览器使用的CSS样式。CSS样式的计算由浏览器根据规则自动进行，这是浏览器渲染页面时必不可少的过程。

图1-5　【Computed】界面

2．选择页面的某一部分查看对应的元素

打开开发者工具，如图1-6所示，单击左上角的箭头图标（或按快捷键Ctrl+Shift+C）进入选择元素模式，在页面中单击需要查看的位置，此时【Elements】界面中对应的元素就会被标识出来。

图1-6　【Elements】界面