猎豹浏览器HTML5备份方法及替代方案

猎豹浏览器本身并不具备HTML5应用的专用备份功能，所谓“备份HTML5”实质是借助开发者工具手动抓取资源、用HTTrack批量镜像站点，或通过WebSite-Downloader等脚本工具自动下载并修复路径，最终构建一个本地可双击运行（或通过本地服务器启动）的完整HTML5项目；文章直击常见误区——如误信浏览器“另存为”、忽略hash路由与动态加载资源、忽视localStorage在file://协议下的失效问题，并强调版本管理与真实执行环境的重要性，为开发者提供一套兼顾轻量单页与复杂前端框架的务实、可落地的离线保存方案。

猎豹浏览器本身不提供 HTML5 应用的专用备份功能，它只是一个基于 Chromium 内核的前端渲染工具；真正需要备份的是 HTML5 页面的源文件结构与运行依赖——而不是“在猎豹里点几下就能导出一个可离线运行的包”。

所以，所谓“猎豹浏览器备份 HTML5”，本质是：用猎豹打开目标页 → 借助通用技术手段保存整套 HTML5 资源 → 确保本地双击能跑起来。下面分场景给出实操路径。

用开发者工具手动抓取单页 HTML5 结构

适用于演示页、Canvas 小游戏、WebGL 可视化等单 HTML 文件 + 内联或同目录资源的轻量项目。

• 在猎豹中打开目标页（确保已启用开发者工具：按 F12）
• 切换到 Network 面板 → 刷新页面 → 筛选类型为 HTML、JS、CSS、IMG、MP4、WEBM
• 逐个右键 → Open in new tab → 新标签页中右键另存为，注意保持原始文件名和扩展名
• 主 index.html 必须和所有资源放在同一文件夹下；若引用了 js/main.js，就得有 js/ 子目录
• ⚠️ 常见坑：fetch() 加载的 JSON 或动态插入的 iframe 地址不会出现在 Network 列表里，得手动检查控制台（Console）或 Elements 面板找真实请求路径

用 HTTrack 批量镜像整个 HTML5 站点

适合含多页面、路由跳转（如 Vue Router / React Router 的 history 模式）、静态资源分散部署的项目。

• 下载安装 HTTrack Website Copier（Windows/macOS/Linux 全支持）
• 新建项目时 URL 填完整地址，例如 https://example.com/demo/，不要漏末尾斜杠
• 关键设置：Follow links into subdirectories ✅，Save HTML files with original extension (.html) ✅
• 进 Options → Scan Rules，添加允许规则：+*.html +*.js +*.css +*.png +*.jpg +*.webm +*.mp4 +*.json，排除 CDN 域名（如 -*.cloudflare.com）
• ⚠️ 常见坑：HTTrack 默认不抓取 # 后的 hash 路由（如 /demo/#/game），需额外配置 Scan URLs matching pattern 加上 .* 并勾选 Scan URLs with # (hash)

用 WebSite-Downloader 抓取并自动修复路径

当目标页大量使用绝对路径（如 src="/js/app.js"）或跨子域加载资源时，HTTrack 可能失效，这时 Python 工具更鲁棒。

• 需先装 Python 3.6+，然后执行：

  git clone https://gitcode.com/gh_mirrors/web/WebSite-Downloader
  cd WebSite-Downloader
  pip install urllib3

• 编辑 WebSite-Downloader.py，改最后一行为：

  manager = Manager('https://target-site.com/html5-app/')  # 注意协议+域名+路径
  manager.start()

• 运行 python WebSite-Downloader.py，完成后会生成 target-site-com-html5-app-site/ 文件夹
• 该工具会自动把 https://target-site.com/js/app.js 改成 js/app.js，并下载对应文件，双击 index.html 即可离线运行
• ⚠️ 常见坑：若页面 JS 通过 document.write 动态注入 script 标签，或用 eval() 加载远程代码，这类逻辑无法被静态爬虫捕获，必须人工补全

本地修改后如何保存与回滚

你在猎豹里调试时改了 HTML/CSS/JS，但关闭标签就丢了？这不是浏览器的问题，是你没做版本管理。

• 每次实质性修改后，立刻执行：

  git add index.html js/ css/
  git commit -m "fix canvas resize bug on mobile"

• 别依赖猎豹的“另存为网页”功能——它只存渲染后 DOM，丢掉注释、原始结构、外部脚本链接，且无法还原 JS 逻辑
• 如果只是临时试改，用 VS Code 开启 files.autoSave + 安装 Local History 插件，每 30 秒自动生成快照，误删也能秒恢复
• ⚠️ 最容易被忽略的一点：HTML5 的 localStorage 和 indexedDB 数据是绑定域名的，本地双击 file:// 打开时这些 API 会被禁用（跨域限制），必须用 http-server 或 Python 的 python -m http.server 8000 启服务才能测试真实存储行为

真正卡住人的从来不是“怎么点”，而是没想清楚：你要备份的是「能运行的代码」，不是「当时看到的画面」。路径、协议、执行上下文，缺一不可。

今天关于《猎豹浏览器HTML5备份方法及替代方案》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！