最可靠方式是右键“查看页面源代码”后在新标签页按ctrl+s保存为.html文件，因其直接获取服务器返回的原始html，未经js渲染；而elements面板复制outerhtml适用于保存动态生成后的最终dom结构。
直接右键“查看网页源代码”后按 Ctrl+S 就能保存成干净的 .html 文件——这是最可靠、最接近原始响应的方式，90% 的场景用它就够了。
为什么“查看页面源代码”里保存才是真源码
浏览器右键菜单里的“查看页面源代码”（或快捷键 Ctrl+U）打开的是服务器返回的原始 HTML 响应体，没经过 JS 渲染、没插入动态内容。而开发者工具 Elements 面板里复制的 outerHTML 是当前 DOM 快照，可能含 document.write、fetch 插入的内容，甚至被框架重写过结构。
常见错误现象：另存为 时在原网页标签页操作，结果保存的是渲染后页面（比如空白页、只有一堆 div id="__next"），不是源码。
- 必须在“查看页面源代码”新开的标签页里按
Ctrl+S - 保存类型选“所有文件”或“Web Page, HTML Only”，别选“Web Archive”或“完整网页”
- 文件名务必带
.html后缀，例如example.html
Elements 面板复制 outerHTML 适合什么场景
当你需要保存 JS 动态生成后的最终结构，比如 React/Vue 页面已加载完数据、表单已填好值、折叠菜单已展开——这时 Elements 面板的 outerHTML 才是你真正看到的 DOM。
使用步骤：
- 按
F12打开开发者工具，切到Elements标签页 - 找到最外层
标签，右键 →Copy→Copy outerHTML - 粘贴进 VS Code 或记事本，编码必须选 UTF-8，否则中文变乱码
- 另存为
rendered.html，双击打开就是当前所见效果
注意：Copy outerHTML 不包含 <script></script> 中未执行的逻辑，也不还原异步请求失败前的状态；如果页面依赖 Service Worker，离线打开可能白屏。
curl 和 wget 抓取 HTML 时资源全丢？关键参数漏了
curl -o page.html https://example.com 只存 HTML 文本本身，CSS、JS、图片一个都不会下载——这不是 bug，是默认行为。
要让本地双击打开能正常渲染，得加这些参数：
wget --page-requisites --convert-links --no-clobber --html-extension --restrict-file-names=windows https://example.com-
--page-requisites：强制下载 CSS/JS/图片等必需资源 -
--convert-links：把https://example.com/style.css改成style.css，避免file://协议下 404 - 跨域资源（如 CDN 上的字体）需额外加
--span-hosts --domains cdn.example.com
curl 没有内置递归下载能力，想一并拉资源得配 wget 或用 SingleFile 扩展。
Save Page WE 或 SingleFile 保存失败的三个硬伤
这类扩展本质是序列化当前 DOM 并打包，绕过了网络限制，但对现代前端架构很不友好：
- Shadow DOM 内部内容（如
<custom-element></custom-element>里的真实结构）大概率漏抓 - 异步加载的数据（
useEffect+fetch）如果保存动作早于请求完成，就存不到真实内容 - 部分网站用
iframe sandbox或document.write动态注入主文档，扩展无法还原加载顺序，离线打开常为空白或错位
真正难搞的不是“怎么保存”，而是“保存下来的能不能离线跑起来”——路径转相对、file:// 下的跨域限制、Service Worker 缓存干扰，这三处出问题，连最基础的样式都可能加载不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
