Elements面板修改不保存，需右键<html>→Copy outerHTML→粘贴至编辑器→另存为UTF-8编码的.html文件，并修正href/src路径；或用SingleFile扩展生成自包含快照。
修改完 HTML 后怎么真正保存到本地文件
浏览器开发者工具里改的 Elements 内容，刷新就丢——它只作用于当前 DOM 树，不触碰原始源码。要让改动落盘，必须手动导出为真实 HTML 文件。
最可靠的做法是：右键点击 <html> 标签 → 选 Copy outerHTML → 粘贴进文本编辑器（如 VS Code、Notepad++）→ 另存为，文件名带 .html 后缀，编码选 UTF-8。
- 别用“另存为”菜单直接保存页面，那会抓服务器返回的原始 HTML，不是你改过的版本
- 如果页面用了大量内联脚本或动态插入内容，
outerHTML复制的是当前渲染态，已包含 JS 修改结果，适合存档快照 - 复制前先在
Elements面板确认所有改动都已生效（比如 class 被添加、文本被替换），否则可能漏改
保存时路径和资源引用容易出错的地方
你改完 HTML 后保存为新文件，但打开发现样式没了、图片不显示、按钮没响应——大概率是路径断了。原始网页的 href 和 src 指向的是线上地址或相对路径，本地运行时浏览器找不到对应资源。
检查并修正这些引用：
立即学习“前端免费学习笔记（深入）”；
- 把
href="/css/main.css"改成href="css/main.css"（去掉开头的/，避免强制从根目录找） - 把
src="https://cdn.example.com/js/app.js"下载到本地js/目录后，改成src="js/app.js" - 图片路径同理：远程 URL 需下载并替换为本地相对路径；Base64 图片可保留，无需额外处理
- 若用到了
<iframe src="...">，注意它仍会尝试联网加载，离线时无法显示，可考虑替换成静态内容或注释掉
SingleFile 是什么情况下该用的替代方案
当你改完 HTML，还想顺手把所有依赖（CSS、JS、图片、字体）一并打包进一个文件，且不希望手动整理路径，SingleFile 浏览器扩展就是为此设计的。
它不是“保存源码”，而是“生成自包含快照”：
- 安装插件后，点图标 →
Save，它会自动提取当前页面全部资源，转成 base64 或内联代码，塞进一个 HTML 文件里 - 保存后的文件双击就能开，断网、换电脑、发给同事都正常显示
- 它不保留你手工修改的 HTML 结构逻辑（比如你删掉某个
<div>），除非你在保存前已在Elements里改好并触发重渲染 - 如果你只是重构页面结构、调整语义标签、清理冗余 class，仍建议走
Copy outerHTML+ 手动保存路线，更可控
重构后验证是否真能离线运行
保存完 HTML 文件，别急着归档。双击打开，再按 F12 打开开发者工具，切到 Console 和 Network 面板看实际加载情况。
-
Network面板里如果有任何请求状态是404或failed，说明还有路径没修对 -
Console报Uncaught ReferenceError或Failed to load resource，基本是 JS/CSS 加载失败或执行报错 - 关掉网络再试一次：拔网线或开启飞行模式，刷新页面——这才是检验“真正离线可用”的硬标准
- 特别注意
fetch、XMLHttpRequest、第三方统计脚本等运行时才触发的网络请求，它们不会出现在初始 HTML 里，但会在控制台暴露
