0 前言
最近做作业时看到一个比较合适的网页设计,可惜该网页设计是一个商业模板,它的资源笔者不能很轻松地下载到手。
怎么办呢,本文就此给出笔者的解决方案。
本文用到的软件有:Fiddler
本文使用的浏览器为:Edge
本文所述的目标为:静态网页资源(未涉及关于抓取网页动态内容)
1 问题的提出
例如,笔者需要一个名为"响应式自适应通用货架书架展示类织梦模板"的网页设计资源,其对应的URL为:
“http://www.html5code.net/dedecms/jingpin/8687.html”
如图所示,假如花钱购买整套资源,需要100元人民币
不过,笔者只想要该网页设计的"首页",而并不是需要全部资源,
花100元买一个"首页",笔者感觉很难出手啊
2 转机
不过,该网站十分有良心,它提供了一个"查看演示"按钮,点击这个按钮,就可以跳转到演示网页了
该网页的链接为:“http://demo.umoban.cn/2011”,记为URL1
这里可能读者有疑问,因为读者点击按钮跳转出的URL按理应该是:
“http://www.html5code.net/plus/show.php?aid=8687”,记为URL2
笔者说明一下原因:
假如笔者演示URL1,那么笔者会得到一个HTML文件和一堆资源文件;
但假如笔者演示URL2,那么笔者会得到一个PHP文件和一堆资源文件,
所以这里是考虑到大多数读者不能方便地运行PHP文件,所以本文不用URL2演示
再说一下URL1怎么快速找到,
在一个闲置的网页空白处右击,选择"检查",功能栏选择"元素"
最后在这个打开了"检查"的网页中打开URL2,效果如下图所示
没错,URL1就在图中的代码里
<iframe id="iframe" src="http://demo.umoban.cn/2011" frameborder="0" width="100%"></iframe>
最后说明:
读者在处理其它网页的时候,需要具体问题具体分析
实际上,大部分静态网页都不需要这么麻烦
3 抓取网页与保存HAR文件
在打开了URL1的网页空白处右击,选择"检查",功能栏选择"网络"
停止记录网络日志,清除网络日志
重新开始记录网络日志,在浏览器的URL输入栏回车来重新加载链接
之后缩小网页,并且滚动网页到最底端,这样才能保证该页面的资源全部加载
笔者看到,资源文件有近80个,有点多,假如逐个保存,有点麻烦
接着,找到功能栏的右上侧的朝下箭头,
如图所示,它的"title"是"导出HAR"(这个"title"能截下来,是因为使用了延迟截图的方法)
点击该箭头保存为har文件(保存的文件夹路径自己要记住,稍后将使用该har文件)
4 怎么将har文件还原为html、js等文件格式
(1)打开Fiddler软件,首先停止记录网络日志以及清空窗口,步骤:菜单栏点击File→取消勾选Capture Traffic,菜单栏点击Remove all
(2)导入har文件
菜单栏点击File→Import Sessions→选择HTTPArchive→Next
导入刚才保存在本地的har文件,到软件中
(3)导出html、js格式的文件:
菜单栏点击File→Export Sessions→All Sessions→选择Raw Files→Next
输入导出的路径→Export→导出完成(会自动打开导出路径文件夹)
参考链接:https://blog.csdn.net/yeyiqun/article/details/99310869 Chrome保存的HAR文件怎么打开?
5 html文件在哪?以及其它问题
针对本案例,它在路径"\demo.umoban.cn\2011"下,将"1_.txt"文件重命名为html后缀即可
问:仍然没有找到html相关格式的文件
答:在第3步抓取网页的地方,抓取这种document类型的网络包,右击它,选择"另存为"(另一个方法:选择"响应",复制全部,把复制内容保存到本地)
问:打开html后,css、js等文件似乎没起作用
答:在html文档中手动优化一下css、js等文件引用格式,同时调整它们的文件路径(如有需要)
例如,我优化的html文档前后对比如下(特别注意:相对引用路径中的本文件夹是否以".“开始,一般来说html格式可能以”.“开始,而js格式可能不需要以”."开始)
优化前:
优化后: