轉換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 原始碼」。這兩項工具不論對網頁開發，以至製作網絡爬蟲去收集網頁數據提供便利。

注意事項：
此系列以 Windows 7 中文版及 Python 3.7.2 於 2019年1月28日至31日期間測試，並力求有關資料於上述期間內準確，惟市面上不同電腦作業系統或會有不相同的執行結果，希望讀者理解。如有任何使用上的困難，請詳細參閱互聯網上其他相關資源，或向其他擁有此項相關專門知識的人士或機構進一步查詢。