轉換PDF實戰side notes 07：瀏覽器的檢查元素工具（二）

本篇會逐步說明瀏覽器的更深入使用方法。上網，這在廿一世紀是很普通的行為。時刻都提著智能手提電話更是近乎永不斷線。當中背後支撐著全世界整個互聯網的技術，除了是光纖、銅線、數據機，還有軟件應用在不同電腦之間溝通的技術。當中佔了很大比重的是「 HTTP 請求」（HTTP Requests）。

要進一步了解網頁怎樣顯示文字、圖片和影片，同樣可以透過瀏覽器的「開發人員工具」簡略地查看到從哪個伺服器、甚麼類型的檔案、下載的次序等資訊。這些資訊有助製作網絡爬蟲，因為網絡爬蟲的精髓在於找到所需資訊所在的連結。

首先按 F12 打開「開發人員工具」（詳見這篇），然後在新出現的版面找「Network」的標籤頁，並且點擊至該頁。

版面會有提示語句，表示需要「重新整理」才能紀錄網絡的活動（Network activity），此處所說的網絡活動，就是文首所指的「 HTTP 請求」 的活動。讀者可點擊瀏覽器的重新整理，讓網頁重新載入，並留意「開發人員工具」的變化。

每個網頁大部分是由多個連結的檔案組成，因此會看到數個至數十行不等的紀錄，瞬間閃跳地增長（視乎讀者連接網絡的速度和質素而異）。

讀者可以捲動版面，以查看每項「HTTP 請求」的細明。此處例如要找到開放數據年度計劃的資料，可以以肉眼找出帶有「annual-open-data-plans-bd-list.json」字眼的「HTTP 請求」，如此畫面。

在 「annual-open-data-plans-bd-list.json」一行上，點擊滑鼠右鍵，顯示出選單。然後在選單中點擊「以新分頁開啟」（Open in new tab），以查看這個項目的實際內容。

在新的分頁裡，就是「annual-open-data-plans-bd-list.json」的內容，它是一個 JSON 檔案，一種符合互聯網標準國際通用的資料交換格式（詳見影片： /社會新聞/77855/ ）。

在這個 JSON 檔案中，同樣找到建築署開放數據年度計劃網頁的連結，簡單明確。

如果讀者有看過這篇，應該會有印象「檢視網頁原始碼」，竟找不到「建築署」的字眼。原來，那些資料是刊載於這個單一的 JSON 檔案，並以即時加載的方式在網頁中顯示。本身的「HTML 原始碼」則沒有這些資料。

這種做法在互聯網十分常見。好處是在更新資料的時候，網頁維護專員只需要集中精神專注資料的部分，若要更新，修改單一個 JSON 檔案便可，省卻在眼花瞭亂像米粉般的「HTML 原始碼」中處理。

其次，這種做法對開放數據很有幫助，對開發應用程式十分重要。只要載有純粹資料部分的連結是固定，應用程式開發員就可以安心地使用這一條連結，送出「HTTP 請求」便可以獲得所需資料，不再需要下載其他與資料無關重要的檔案或文字，加快載入速度，最終方便讀者。

不過，好景不常，當大家以為可以歡天喜地得到一個 JSON 檔案，便可以準時交付早日下班之際，就會突然發現有些紀錄是跟前數十個的結構有些許不一樣，導致應用程式會出錯。這些例外的情況，時有發生。

例如「財經事務及庫務局」，這個決策局下有多個分支，各有其自身的開放數據年度計劃，因而在 JSON 檔案裡，記載著財經事務及庫務局的一段有一個其他部門沒有的「鍵字」（Key-name）：「branch_array」。

遇到這個情況，應用程式在讀取時，必須要做額外處理，方能確定資料沒有遺漏。雖然這其實是合符 JSON 格式的標準，JSON 格式是容許多層的結構（JSON 格式解釋），然而「有沒有需要在此處強調『財經事務科』與『庫務科』的開放數據政策分拆成兩個網頁但又同屬『財經事務及庫務局』」，則待讀者判斷。

若然把名稱變成「財經事務及庫務局-財經事務科」與「財經事務及庫務局-庫務科」，並把資料攤開擺放，就像變成兩個政府部門的 JSON 資料結構，會不會帶來政府架構沉重的管治問題，相信一般市民未必會顯然易見，但應用程式開發員肯定會為此微細的調整所帶來的便利而感到高興。

行文到此，讀者已經可掌握使用瀏覽器中「開發人員工具」查看「HTTP 請求」，並找出有用的檔案連結。

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