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

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

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

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

就是像下面的界面:

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

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

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

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

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

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

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

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

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

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

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

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

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

【本章助记卡片:卡片 for 第四十九章

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