作為一名長期從事 Web 開發的程序員，我們在日常工作中，時不時會需要查看網頁的源代碼。這么做的目的通常是為了排查前端渲染的問題、分析接口返回的數據結構，或者就是單純地想快速提取頁面中的某些信息，比如文章鏈接、圖片地址，或者嵌套在某些標簽里的 JSON 數據。

雖然大多數瀏覽器都內置了“查看頁面源代碼”的功能，但說實話，這個功能用起來并不是特別友好。首先，它只是簡單地把 HTML 代碼原樣展示出來，缺乏高亮、折疊、搜索等便捷功能；其次，它并不會對其中的數據做任何解析，比如我們經常遇到的 JSON 字符串、嵌入的鏈接等等，需要我們手動復制出來，再貼到其他工具里處理，實在有些麻煩。

基于這個痛點，我決定使用 CodeBuddy 的腳手架工具，結合 PyQt5 來動手開發一個屬于自己的“網頁源碼解析小工具”。整個開發過程相對順利，最終實現的功能也基本覆蓋了我自己在實際使用中會遇到的幾個核心需求。

起初，我給這個小工具實現了幾個最基礎的功能：

• 加載源代碼：輸入網址后，程序會自動發送請求，并展示完整的 HTML 源碼；

• 復制源碼：點擊按鈕即可將當前頁面的源碼復制到剪貼板，方便進一步處理；

• 解析 JSON 數據：對源碼中的 JSON 字符串進行提取和格式化展示；

• 解析鏈接：自動識別并提取頁面中的文章鏈接和圖片鏈接；

• 下載功能：可以將頁面源碼保存到本地，便于后續查看。

這些功能組合在一起，基本可以滿足我“查看、提取、保存”三類使用場景。

功能迭代過程

工具開發到一半，我忽然想到，其實很多頁面里嵌套的 JSON 數據結構都非常復雜，如果只是簡單地展示字符串并不能讓人一眼看清楚結構。所以我又追加了一個功能：從源碼中提取并格式化 JSON 數據，用樹狀結構展示出來，清晰明了，還支持復制和導出，非常實用。

輸入指令：使用PyQt5制作一個查看瀏覽器源代碼的解析工具。

輸入指令：追加功能，從源碼中能夠解析出格式良好的JSON數據。

緊接著，我發現很多頁面的文章內容其實是通過鏈接跳轉加載的，有些甚至是動態生成的 URL。如果能把這些鏈接提取出來，哪怕只是靜態頁面里的，也能省下不少右鍵“復制鏈接地址”的功夫。因此，我又補充了一個功能：自動提取頁面中的文章鏈接和圖片鏈接，并一并列出來，用戶可以選擇單個或批量進行下載。

輸入指令：追加功能，從源碼中能夠解析文章鏈接，和圖片鏈接，并提供下載功能。

最后，我還完善了下載功能，不只是保存圖片或者鏈接，而是提供了一個“保存頁面內容”的選項，也就是將當前加載的 HTML 源碼直接保存為 .html 文件，日后打開就是原頁面，非常方便備份和歸檔。

輸入指令：補充下載功能，下載功能為保存頁面內容。

總的來說，這款工具的開發初衷是為了解決我自己在工作中遇到的某些不便，但隨著功能不斷追加，慢慢地也成了一個小而美、實用性很強的輔助工具。如果你也經常需要查看網頁源碼、提取頁面數據，不妨試著用 CodeBuddy 動手做一個屬于自己的解析器，寫代碼的過程也是一種樂趣。

你是否也有類似的開發痛點，或者對這個工具還想增加一些什么實用的功能呢？

源碼已經放在CNB：https://cnb.cool/ztword/page_parsing_tool