1.4 使用谷歌浏览器调试开发网页

在网页开发中，一个好的调试工具是不可缺少的。在众多的浏览器中，推荐初学者使用谷歌浏览器进行调试开发。

一、谷歌浏览器调试功能介绍

打开谷歌浏览器，按下快捷键＜F12＞就可以弹出调试窗体，如图1-5所示。在下面打开的调试模式中，我们可以看见有许多工具栏和工作面板，使用这些工具可调试 HTML，也可调试 CSS，还可调试JavaScript。除此之外，它还能调试与服务器的交互信息。我们将会着重介绍调试HTML与CSS的工具与面板。总之，谷歌浏览器是一个既简单又实用的工具。

图1-5 谷歌调试窗体布局介绍

单击菜单中的图标，将会弹出3个菜单选项栏。从左到右，第1个图标会将调试窗体变成一个独立窗体，第2个图标会将窗体与HTML页面变成上下结构，第3个图标就如读者看见的是左右模式。

为了调试方便，在以后的课程中将使用上下结构模式，这样工具面板的使用面积更大，也更方便开发与调试。

二、HTML相关的调试工具与面板

如图1-6所示，单击元素选择工具，图标会变成蓝色选中状态，这个时候点击google图片，Elements面板会立即定位到对应图片元素的HTML代码位置。而右边有个Style面板会显示出该HTML元素对应的CSS样式属性。在开发中经常会用这个方法来查找和定位问题。

图1-6 谷歌调试窗体功能介绍01

如图1-7所示，调试器不仅可以定位代码，还能修改代码与CSS属性值。而且修改之后立即会在页面中呈现出来，这就是开发者常说的“所见即所得”。在要修改代码的地方双击则可变成修改状态，右边CSS属性则是鼠标指针移动上去会出现选择框。当然也可以双击修改属性的样式。

图1-7 谷歌调试窗体功能介绍02

使用谷歌浏览器进行调试有很多明显的优势，在这里仅仅演示了一点。随着后面课程的推进，会逐渐介绍这个工具更多的新功能。