告别手动解析！借助 CodeBuddy 快速开发网页源码提取工具

作为一名长期从事 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