如何原样保存网页如官方文档到本地

AffettoIris 2023-11-30 2,501 11/30

 

申明

  1. 本文仅用于交流学习使用,请勿用于非法用途,否则后果作者概不负责。

  2. 本文所授方法为原创作者 - 冷墨寒自主研发,转载请标明原创作者及原网页来源!

    我之前在网上搜了很久,有说网页转chm的,有说截图,但还没有找到能做到离线地原样保存、查看官方文档的方法。思路来之不易,需要同时懂点网站开发(建站)和网络安全(抓包)才能想到完整的扒网站方法。

需求

 

简而言之就是扒取限时展示的网页到本地,用于离线查看,且100%还原原样。

例如我最近在学AirScript框架(一种手机自动化技术),很好用很喜欢,但是怕官方文档网站http://doc.airscript.cn/airapi/某天倒了,导致我再也查不到函数的用法、技巧,那我不就得换框架重新学手机自动化了么!!!

又或者网上答题、做练习,只有1小时的查看试卷时间,而你又想保存题目课后复现...

Clone 官网

AirScript官方文档的网页是静态网页也就是.html文件,不涉及服务器(后端),所以理论上我们只要把前端html、css、js、img等文件都扒到本地就能在本地实现无网也能查看官方文档,当然实际工作量还远不止这些。

如何一键扒网页源码(html、css、js、img等文件)

学过网安的人都会Charles抓包(浏览器要配置Charles的https证书,在此不细讲)。

  1. 我们打开Charles并开启抓包:

    如何原样保存网页如官方文档到本地

  2. 然后访问官方文档官网,以网页http://doc.airscript.cn/airapi/model.html为例,其他网页同理。

    如何原样保存网页如官方文档到本地

  3. 由于我已经访问过了,本地已有网站代码文件的缓存,所以浏览器不会再向服务器请求这些代码文件,所以得按ctrl加F5键强制刷新浏览器缓存。

    等待浏览器的小圆圈转完,不然有些图片大文件还没下载下来:

    如何原样保存网页如官方文档到本地

  4. 此时Charles已经抓到网站的html、css、js、img等文件了

    如何原样保存网页如官方文档到本地

  5. 我们对整个目录右键并选择【Save All】并保存到桌面上,我的保存路径是C:\Users\iris\Desktop\doc.airscript.cn

    如何原样保存网页如官方文档到本地

    提示有些文件重复了(同一个文件被浏览器请求了两次,也被charles抓了两次),我们选择保存最后一个:

    如何原样保存网页如官方文档到本地

    得到了网站的源码等文件:

    如何原样保存网页如官方文档到本地

离线复刻网页

  1. 我们目标是即使官网倒了也能在本地访问原网页,所以现在把电脑的网络关了,模拟官网倒了。

    此时直接访问这个model.html文件,会显示不出来css、js样式,很丑:

    如何原样保存网页如官方文档到本地

  2. 编辑"C:\Windows\System32\drivers\etc\hosts"文件,在最后一行加入127.0.0.1 doc.airscript.cn并保存更改。(代码意思是让电脑以为doc.airscript.cn的服务器就是它自己。)

    如何原样保存网页如官方文档到本地

  3. 电脑上安装phpstudy软件(用于建站)。

  4. 启动phpstudy软件

    如何原样保存网页如官方文档到本地

  5. 创建网站,域名doc.airscript.cn,根目录C:\Users\iris\Desktop\doc.airscript.cn,然后点确定:

    如何原样保存网页如官方文档到本地

  6. 此时(已断网)在浏览器访问http://doc.airscript.cn/airapi/model.html,发现网页被原样clone下来了

    如何原样保存网页如官方文档到本地

很好,我已经不用担心官网倒了嘿嘿~

- THE END -

AffettoIris

12月01日15:55

最后修改:2023年12月1日
2

共有 0 条评论