如何复刻一个页面

有时会在网上看到一些效果不错的网页，如果想复制别人的页面效果，通过ctrl+s保存后，页面要么失真变形，要么无法镜像人家的目录结构。

我们以下面的这个页面为例子：

• https://chcsc.chima.org.cn/

使用浏览器自带的“另存为”功能，保存后的页面打开后是这个样子的：

除了背景图片不见了，原始目录结构也变了。保存后的页面，目录结构被破坏，变成扁平化的了：

原始目录结构在 chrome 的开发者工具中可以看到：

既然在开发者工具中可以看到所有的资源，那么只用把所有资源保存到本地不就可以一比一复刻原始页面了吗。但在开发者工具中并没有找到一键保存的按钮，只能一个一个资源地另存为。这样效率比较低，他人应该也会有相同的需求。果然，有一款 chrome 插件就是干这个活的，一键保存当前调试页面的所有资源。插件名称：Save All Resources

插件下载页面：

• https://chrome.google.com/webstore/detail/save-all-resources/abpdnfjocnmdomablahdcfnoggeeiedb/related

使用方法，打开“开发者工具”，在工具栏的最右边的Tab页就是这个插件。

点击下载按钮，最终会打包下载整个页面资源，解压缩后可以查看下载效果，在本地打开网页，可以发现几乎是重现整个页面的效果。

同样，目录结构也是一比一复刻：

全文完。

如果转发本文，文末务必注明：“转自微信公众号：生有可恋”。