转换PDF实战side notes 06：浏览器的检查元素工具（一）

撰文： 简浩德
出版：更新：

本篇会逐步说明浏览器的深入使用方法。以网上爬虫为例，通常需要一部桌面电脑（使用流动装置的方法⋯⋯市面上比较少做法，如果读者你有其心得，欢迎分享！），主流的浏览器除了 Google Chrome，还有 Mozilla FireFox，Microsoft Edge，Internet Explorer（已于2016年1月12日终止IE11以下的版本），Safari，Brave，“360安全浏览器”，“百度浏览器”，“QQ浏览器”，“UC浏览器”，“傲游浏览器”，“红芯”等，不胜枚举。总之能够上网看网站就是。

打开浏览器，前往政府“资料一线通”网站 → 社区 → 年度开放数据计划（或者直接按此连结：https://data.gov.hk/tc/annual-open-data-plans ）

政府“资料一线通”列出各部门公布数据时间表。（网站截图）

在键盘上按“F12”（键盘上按下“Ctrl + Alt + i”功能键亦可），便会看到浏览器会分割出一个新的部分。这个新显露出来的版面是“开发人员工具”，很多网页开发的从业员在日常工作上都喜欢使用的工具。

打开“开发人员工具”

在新的版面左上角，有一个小图示，上面有个方格带著一个滑鼠指标形状。使用滑鼠点击一下，然后把滑鼠移到网页内“建筑署”字眼上，再点击一下。“开发人员工具”便会有相应的变化，会发现跳到并加亮了“<a target="_blank" rel="noopener noreferrer" href="https://www.archsd.gov.hk/tc/about-us/annual-open-data-plans.aspx">建筑署</a>”的字句。这就是网页上超连结，在 HTML 格式的表达方式。

当中“https://www.archsd.gov.hk/tc/about-us/annual-open-data-plans.aspx”就是建筑署的年度开放数据计划的网页。

检查 HTML 元素。

“开发人员工具”亦有另一个开启方法。就是在网页内容里，使用滑鼠右键。例如，在“建筑署”超连结上点击右键，打开选单。然后再点击“检查”，同样可以打开该版面。

另一方法检查元素。

“开发人员工具”在打开的同时，亦会直接跳到“建筑署”超连结这个网页元素所对应的 HTML ，同时将其加亮标示。

“建筑署”元素有加亮标示。

===== 我是分隔线 =====

同场加映，还有一种版面可以查看网页底下的 “HTML 原始码”。首先在网页内容空白的位置，点击滑鼠右键，打开选单。然后点击“检视网页原始码”。

右键选单。

此时浏览器会打开新一个分页：左方会显示行号（正如“纯文字编辑程式 ”般），中间则会有 HTML 等格式的文字以各款颜色显示。例如会有“<html>”、“<body>”、“<script>”、“<a>”、“ <p>”、“ <div>”等标记。

HTML 原始码真面目。

“HTML 原始码”与网页显示内容息息相关。以“https://data.gov.hk/tc/annual-open-data-plans ”为例，有一句句子“以下为政府各局及部门的年度开放数据计划的连结”。

这里有。

同样地，在“HTML 原始码”的分页里，同样可以找到同一句句子。

这里也有。

不过，并不是所有内容都能找到。例如“建筑署”三个字，在“HTML 原始码”里，是找不到的。

没有“建筑署”

由此可见，“HTML 原始码”与“开发人员工具”版面内的 HTML 内容是有分别的。“开发人员工具”版面内的，是经过各式的即席额外加载内容作网页显示，例如浏览器会根据 HTML 内的 JavaScript 程式，变更本来的 HTML 结构及内容，以供使用者更丰富的浏览体验。而“HTML 原始码”则是原本未经修改的 HTML 内容。

行文到此，读者已经可掌握使用浏览器中“隐藏”功能：“开发人员工具”及检视“HTML 原始码”。这两项工具不论对网页开发，以至制作网络爬虫去收集网页数据提供便利。

一时忘了甚么是“命令列”？请参阅这篇（https://docs.google.com/document/d/17ika2rnzcNK6F_fPxbE23QDw6nA7sWrF2HwYIvsLf_c/edit ）。如未安装 Python 程式，请参阅这篇（https://docs.google.com/document/d/1qa36DCu-FbyY21djHH97usa1e9f8gfPZKJanoQ-gpgU/edit ）。如何安装“Visual Studio Code”来撰写 Python 程式，请参阅这篇（https://docs.google.com/document/d/130XLxYKY0kBMwUzlF1RtsFy57cKYozPDpSZVS2QRLXQ/edit ）。

注意事项：此系列以 Windows 7 中文版 及 Python 3.7.2 于 2019年1月28日至31日期间测试，并力求有关资料于上述期间内准确，惟市面上不同电脑作业系统或会有不相同的执行结果，希望读者理解。如有任何使用上的困难，请详细参阅互联网上其他相关资源，或向其他拥有此项相关专门知识的人士或机构进一步查询。