哈罗,大家好,我是涛哥,上市公司程序员裸辞,All in AI,探索 AI 编程更多可能,主要使用 Claude Code 等 AI 编程工具进行开发,打造一人公司,立志在 AI 时代做出世界级产品。
今天想通过一个实际案例,和大家分享如何利用 AI 工具,快速分析和“理解”一个网站的数据与核心逻辑。这个过程完美体现了 AI 如何赋能开发,极大提升我们的效率。
国庆节期间,在我的 AI 编程群里有群友找我,说想要一个职业素质测试网站的题目数据和评测分数的计算逻辑,问我有没有方法可以解析出来。因为当时比较晚了,而且第二天就要外出,要到 7 号才回来,所以就让他发我后面再看。
7 号回来,这个群友把网址发给我了,我看了下这个网站,结构不是很复杂。而且这种扒网站数据的需求在某些情况下的确有需要(比如你要仿造目标站点做一个新站,可以扒别人的数据做快速冷启动)。于是,我把整个过程记录了下来,形成了这篇实操指南。
为了避免给这个网站带来不必要的压力,网址这里就不放出来了,大家可以关注扒网站的分析流程和方法,以后有需要的话也可以按这些方法自己操作。
打开网址,查看网页的页面结构。
通过查看上面的首页内容,发现并没有需要的问题数据,只有几个按钮,通过按钮的文字可以知道,其实是可以进入到评测页面去的。
点击按钮之前,我们最好打开浏览器的控制台,只要按F1键就可以打开了。打开的控制台就是下面这个图里面右侧那块东西。控制台里面你可以直接查看这个网站的代码文件、网络请求信息、资源下载数据、性能数据、Html dom 树等等,通过它,这个网站在你面前几乎可以说是透明的。
网页中,你能看到的任何数据,都是需要发起网络请求的,要么在你打开网页时,就已经下载到你的浏览器里;要么就在点击某个按钮或者做其他动作时,才会把数据请求下来。总之,通过控制台,你都能找到蛛丝马迹。
因为我这次需要找的是评测的问题数据,我首先怀疑这些数据是在我点击按钮后,进入评测页面时,通过网络请求拉取到的,所以点开了控制台上方的Network那个标签。
然后随便选择一个评测按钮进行点击。
查看 Network 标签下面的所有请求
这个评测网页的网络请求是空的,因此网站的问题数据不可能是通过异步数据请求下载的。可以进入到下一步去排查分析。
虽然该网站的数据不是通过异步网络请求拿到的,但是你如果分析其他页面时,看到底下有网络请求记录,那么你还是要一个一个去看看的,比如我下图中打开的这个福利彩票的数据,他网页中每一期的开奖信息都在这个请求里面了。直接能拿到页面中的开奖数据。
查看 js 文件,数据可能会嵌在代码里
既然数据不是动态加载的,那很可能是直接写在页面或脚本文件里。这时候,我们就需要转向Sources标签,检查静态资源。
切换到Sources标签下,找到本站点的资源文件列表(见上图),这种数据一般都是保存在某个 js 文件里(当然也有不在 js 文件的情况),挨个去找。
如果觉得挨个查看去找太慢,也可以把所有的文件内容复制到本地代码编辑器中,利用编辑器的查找功能去搜索,搜索的关键词就是你页面中的评测问题的文本。
从上图中可以看到,这个评测网站的数据就在上面截图中那个以 688 开头的 js 文件里面。(这个文件名称有可能会变,具体还是要自己一个一个去看)
用 Claude code 把数据整理成表格
我把上面那个 688 开头的文件内容全部复制保存到本地了,然后就打开 claude code,让他帮我整理了一下。
整理的提示词:
帮我分析 @data/com_data.js 文件的代码逻辑,并编写一个python脚本帮我提取出所有的题目数据
Claude code 执行后生成了一个 csv 文件:
拿到题目只是第一步,如果想完整复现这个评测,我们还需要理解它的评分机制。虽然前端代码中没有直接给出计算逻辑,但我们可以借助 AI 进行推理分析。
分析网站的实现逻辑
AI 的一个非常强大的地方之一,就是可以根据得到的少数有效信息推断出更多的信息。
尤其是代码逻辑中携带的信息量既全面又详细,属于一种更加可靠的知识。
由于前端代码中并没有计算评测得分的实现逻辑,所以我们只能通过已有的前端代码和提交答案之后生成的报告内容,让大模型根据科学的知识(心理学、管理学等等)来反推出计算逻辑,这也是一种可行的方案。
在上面我们已经把网站中的 javascript 文件都保存下来了,下面提供一个对应的提示词就可以让它帮我们生成一个评分机制报告。
提示词:
所有相关的js代码都在 data/szjj 目录下,你需要根据代码内容和可靠的推理,
帮我分析一下这个评测结果是如何进行记分的,并对报告内容进行分析。
生成的分析报告(部分):
可以看到AI给出的分析内容还是挺全面的,从字面上看,对于我们这些非专业人士来书,至少写出来可以达到60分的成绩(我认为)。
这篇文章到这里就已经完成的差不多了,得到了网站的评测问题数据和它大致的评分逻辑,我们完全可以让 AI 帮我们开发一个类似功能的站点。
通过这个案例可以看到,即使没有后端接口和文档,我们也能通过‘前端分析+AI 辅助’的方式快速理解一个网站的数据和逻辑。这种方法特别适合独立开发者快速启动项目。有需要的可以尝试一下。
如果对你有帮助的话,欢迎三连+关注呀。
粉丝福利
我这些天把我之前开发的提示词网站的开发全过程都整理了出来,形成了一篇非常详细的手册内容,目前已经有 2 万多字的内容,涵盖了环境搭建、开发、Claudeo code 使用、所有功能的提示词、上线部署一整套工具的内容。
手册地址: egtmutdg24.feishu.cn/docx/OlzFdN…
Claude Code 优质内容
3天1个人,我用AI编程工具做了个英语口语学习网站,群友体验后直呼“惊艳”
AI编程工具将会重塑未来软件开发的协作模式,从“人脑协作”到“提示词驱动”的革命
Claude Code+浏览器控制台,用免费工具教你扒光任何网站数据,职业测评站亲测有效
Claude Code+宝塔面板:Nodejs/Next.js 网站上线部署的喂饭级教程,前端后端分分钟搞定!
Claude Code+宝塔面板:网站上线部署的喂饭级教程,前端后端分分钟搞定!
Claude 和 Cursor 的最佳拍档!宝塔面板 1 小时成功上线(前端篇)
3 个月变永久!claude code 给我写了一套脚本,帮我把网站 HTTPS 成本降为 0
Claude Code+Jenkins 急速打造网站部署的上线系统
“别再让 AI 网站丑下去了!”涛哥用 Claude code 实战 MinIO 主题移植,效果炸裂!完全去掉 AI 味!