最可靠方式是network面板中save response as…获取原始html源码；elements面板copy outerhtml得渲染后dom快照；控制台执行copy(document.documentelement.outerhtml)或blob下载仅限同源且为动态内容。
直接在浏览器控制台里无法保存HTML源码——控制台本身不提供“保存”功能，所有所谓“控制台保存”实际是借道 Elements 面板或 console 执行脚本触发下载，本质仍是复制或发起请求。
Elements 面板中复制 outerHTML 是最常用且可靠的方式
这是多数人误称为“控制台保存”的真实操作路径。它不依赖 JavaScript 执行，也不受跨域或 CSP 限制，拿到的是当前 DOM 快照（含 JS 渲染后结果）。
- 按
F12或Ctrl+Shift+I打开开发者工具，切换到Elements面板 - 右键最外层的
标签 →Copy→Copy outerHTML - 粘贴到 VS Code / 记事本等编辑器，
另存为时务必选编码UTF-8、扩展名.html、保存类型为所有文件 - 注意：若页面用了 Shadow DOM 或动态挂载内容，
outerHTML可能不包含这些节点，需手动展开并逐段复制
console 中用 document.documentElement.outerHTML 获取完整 HTML 字符串
适合需要进一步处理（如过滤注释、替换路径）再保存的场景，但必须在目标页面上下文中执行，且无法绕过同源策略获取其他域名的原始源码。
- 在控制台输入：
copy(document.documentElement.outerHTML)—— 直接复制到剪贴板 - 或更安全地导出：
download(new Blob([document.documentElement.outerHTML], {type: 'text/html'}), 'page.html')（需配合自定义download函数） - 常见错误：
document.body.innerHTML会丢失内容；document.all[0].outerHTML在部分浏览器已弃用 - 性能影响：对超长 DOM（如含大量表格或 SVG）执行
outerHTML可能卡顿，建议先console.log(document.documentElement.children.length)粗略评估
Network 面板抓取原始服务器响应（非渲染后 HTML）
当你要的是服务端返回的原始 HTML（不含客户端 JS 插入内容），而不是 Elements 里看到的最终 DOM，就得从 Network 入手。这一步常被忽略，却是区分“源码备份”和“快照备份”的关键。
- 打开开发者工具 →
Network面板 → 刷新页面 - 找到主文档请求（通常为
Name列显示index.html或无后缀的根路径，Type为document） - 右键该请求 →
Save response as…→ 保存为.html文件 - 注意：若页面走 Service Worker 缓存，响应可能被拦截，此时需禁用 SW（
Application→Service Workers→ 勾选Update on reload并刷新） - 兼容性：此方式在 Chrome / Edge / Firefox 均可用，但 Safari 的
Save response as…仅在开发模式下可见
真正容易被忽略的点是：你以为保存的是“源码”，其实拿的是“渲染结果”；你以为复制了整页，但 里的 meta 或 link 可能已被 JS 动态修改过。要存原始源码，唯一稳妥路径只有 Network 面板里的 Save response as…，其余全是 DOM 快照。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
