轉換PDF實戰side notes 07:瀏覽器的檢查元素工具(二)

撰文:簡浩德
出版:更新:

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

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

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

「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 檔案中,同樣找到建築署開放數據年度計劃網頁的連結,簡單明確。

「建築署」超連結。

如果讀者有看過這篇,應該會有印象「檢視網頁原始碼」,竟找不到「建築署」的字眼。原來,那些資料是刊載於這個單一的 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日期間測試,並力求有關資料於上述期間內準確,惟市面上不同電腦作業系統或會有不相同的執行結果,希望讀者理解。如有任何使用上的困難,請詳細參閱互聯網上其他相關資源,或向其他擁有此項相關專門知識的人士或機構進一步查詢。