手工抓取一个静态网页资源的方法--获取HAR文件以及借助Fiddler软件

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格式可能不需要以”."开始)
优化前：

优化后：