最稳方式是区分原始源码与渲染后DOM：右键“查看页面源代码”（或Ctrl+U）保存的是服务器返回的原始HTML；F12→Elements→Copy outerHTML保存的是JS执行后的最终DOM状态。
直接用浏览器自带功能保存HTML源码，最稳的方式是分清「原始源码」和「渲染后DOM」——前者来自服务器响应，后者是JS执行后的结果。选错路径，存下来的可能根本不是你想要的那版代码。
右键“查看页面源代码”后另存为，才是原始HTML
这是获取服务器返回原始HTML的唯一可靠方式，不经过JS解析，也不受前端框架干扰。
- 在网页空白处右键 → 选「查看页面源代码」（Chrome/Edge）或「查看源代码」（Firefox）；
Ctrl+U是通用快捷键 - 新打开的标签页里，
Ctrl+A全选 →Ctrl+C复制 → 粘贴进记事本或 VS Code - 保存时务必选「所有文件」类型，扩展名手动写成
.html；如果选「文本文档(.txt)」，系统会偷偷加.txt后缀，导致双击打不开 - 编码必须设为
UTF-8（VS Code 默认就是，记事本需在「另存为」对话框底部手动选）
别在原网页标签页按 Ctrl+S —— 那存的是渲染后DOM
很多人习惯在当前页面按 Ctrl+S，但这时浏览器默认保存的是 Elements 面板里看到的结构，也就是 JS 已经执行、Vue/React 已经挂载、动态内容已插入的版本。
- 这种保存方式适合备份「此刻看到的页面效果」，但不适合分析服务端逻辑或调试 SSR
- Chrome 的「另存为」菜单里若选「网页，仅 HTML」，其实也属于这一类：它会把内联 JS/CSS 塞进 HTML，还可能自动补全缺失标签，源码已失真
- 如果你要对比前后端差异、查 SSR 是否生效、或做静态分析，必须用
Ctrl+U路径
开发者工具里复制 outerHTML，适合保存局部结构或动态内容
当页面大量依赖 AJAX 或客户端渲染（比如单页应用），原始源码里可能只有 <div id="app"></div>，真正内容是 JS 加载的——这时就得靠 Elements 面板。
立即学习“前端免费学习笔记（深入）”；
- 按
F12打开开发者工具 → 切到「Elements」→ 找到最外层<html>标签 - 右键该标签 → 「Copy」→ 「Copy outerHTML」；注意不是「Copy innerHTML」，否则丢掉
<html>和<head> - 粘贴后保存为
.html文件，能反映用户最终看到的 DOM 状态，但和服务器发来的原始字节流不同 - 某些网站会检测
document.documentElement.outerHTML是否被读取，频繁操作可能触发风控
最容易被忽略的一点：同一个页面，Ctrl+U 和 F12 → Copy outerHTML 得到的 HTML 可能完全不同——前者是 HTTP 响应体，后者是内存里的 DOM 快照。存之前先想清楚，你要备份的是「服务端吐出什么」，还是「浏览器最终画出什么」。
