第四十九章 一个拐杖

虽然上一章通过给块元素设置背景色，可以非常直观的看到它的位置和大小。但是不能每次写页面，对于每一个元素都这么操作啊，那页面花花绿绿的，岂不成了马赛克？

所以我们需要一个工具去观察这些元素，不过还好，并不需要去额外安装这样的工具，因为它就在你的浏览器里面。

大家可以通过如下几种方式打开它：

• 在页面中按下 F12；
• Chrome 浏览器还可以 Ctrl+Shift+I 或者 Ctrl+Sheft+J；
• 记不住？菜单——（更多）工具——开发者工具，就出来了；
• 太麻烦？直接在网页元素上^[1]右键，一般是最后一项“检查”或者叫“检查元素”或者类似的名称吧，点一下就出来了。

就是像下面的界面：

当然，它也可能是在下面。不过这样分屏显示不方便查看，我们先点右上角的菜单。弹出如下内容：

看到英文也不用紧张，首先它们都是非常简单的单词，然后我们现在也不需要在意它们。看到第一行有四个图标，这是表示我们的开发者工具显示在什么地方。后面三个应该非常好理解，反正你自己点着试试就可以了，这种东西多点两下又坏不了。其中第一个，是说将开发者工具放在独立窗口中进行显示，那么我们选择这个。

然后开发者工具就成了一个独立的窗口，我们把它最大化：

我非常粗线条的给它划分了一下区域（真丑。

左上角是两个工具按钮，是用来选择元素的，你可以先点击这个按钮，然后再点击页面中你要查看的元素。

顶部用绿框标示的区域，是工具的标签页，我们可以通过它，在多种工具中进行切换。上面所列出来的这些并不是全部……不过目前我们用不上多少。如果有兴趣可以查一下这些单词都是什么意思，这对你理解这个工具很有帮助。目前我们主要使用第一个标签页，也就是当前界面，用来观察页面的元素。

左边黄框区域，是当前页面的代码。但是需要注意的是，这些是当前用来显示的代码，但并不意味着这就是网页的源代码。它是被浏览器处理后，处于运行中的代码。不理解也没有关系，只要记得，它不是完全等于源代码就可以了，后面我们自然会接触到。

右边蓝框区域，是用来观察当前选中元素的各种细节的。那怎么才算被选中的元素呢？就是我们左侧正在被蓝色高亮的代码。

底下紫色边框的区域是控制台，显示一些运行中的输出。目前我们用不到，所以点击它右上角的叉号关掉。后面我们使用的时候可以直接看顶部的第二个标签页，功能是一样的。

现在你可以用开发者工具来观察你前面所写的代码，尽量不要去观察其他页面，因为上来就观察复杂的代码，会让你遇到许多未知的问题，我们一点点来，循序渐进。

然后你在左侧选择其中的元素，在右侧去观察元素所具有的 CSS 属性。我们讲一些细节：

首先你在左侧面板的最底部会看到如下的结构：

这是当前元素的选择器，但是一般我们不会完全照着这个去写选择器，因为它太复杂，太精确，效率也太低。不过我们可以通过它，读出当前元素的层级结构。

>注释 1: 部分特殊元素上并不支持，换在其他元素上就好了。有的页面重定义了右键菜单，这时候还是使用上面几种方式去调出吧。