ctrl+u可快速查看并保存服务器返回的初始html源码，不包含js动态内容，适用于分析静态结构、seo或服务端渲染逻辑；保存时需手动添加.html后缀、选“所有文件”类型及utf-8编码。
用 Ctrl+U 查看并保存原始 HTML 源码
这是获取服务器返回的初始 HTML 的最快方式，适合分析静态结构、SEO 元素或服务端渲染逻辑。它不包含 JS 动态插入的内容，但能反映真实请求响应。
- 在 Chrome/Edge/Firefox 中打开目标页，按
Ctrl+U（Windows）或Cmd+Option+U（Mac）直接跳转到源码页 - 按
Ctrl+S保存时，务必在“文件名”栏手动补全.html后缀（如layout-backup.html） - “保存类型”选“所有文件”，编码选
UTF-8，否则中文可能乱码 - 该方法失效常见于：页面禁用右键+禁用开发者工具（极少数管理后台），或源码被压缩成一行无缩进——此时需后续方法补救
用 Elements 面板复制 outerHTML 获取动态布局
当页面大量依赖 JS 渲染（如 React/Vue SPA、无限滚动列表、懒加载模块），Ctrl+U 看不到最终 DOM，必须用此法提取实际布局结构。
- 按
F12打开开发者工具，切到Elements面板 - 找到顶层
标签，右键 →Copy→Copy outerHTML（Chrome/Edge）；Firefox 是Copy→Copy outerHTML，不是 “Copy innerHTML” - 粘贴进 VS Code 或记事本后，建议执行一次格式化（VS Code 可按
Shift+Alt+F），否则标签嵌套深时难以阅读 - 注意：复制的是当前时刻的 DOM 快照，如果页面有定时器或滚动触发的加载，需先滚动到底部、点开所有折叠区域再复制
命令行用 curl 保存原始响应（适合批量或自动化）
绕过浏览器，直接向服务器发起 HTTP GET 请求，拿到未经任何客户端处理的原始字节流。适合脚本化抓取、CI 流程中存档、或对比前后端输出差异。
- 终端执行：
curl -s https://example.com > layout.html，-s静默模式避免进度条污染文件 - 若目标站强制 HTTPS 重定向或需 Cookie，加
-L（跟随跳转）和--cookie "key=value" - 保存的文件默认是 UTF-8，但某些老站用 GBK，可用
iconv -f gbk -t utf-8 layout.html > layout-utf8.html转码 - 该方式拿不到 JS 渲染结果，和
Ctrl+U行为一致；想抓动态内容，得换 Puppeteer 或 Playwright
另存为“网页，完整”会生成文件夹，别只拷 HTML
这个选项看似方便，实则埋了路径陷阱：浏览器会把 CSS、图片、JS 全部下载进同名子文件夹，而 HTML 文件里用的是相对路径引用它们。
- 保存后你会看到两个东西：
page.html和page_files/文件夹 - 如果只复制
page.html到别处，打开时样式丢失、图片 404——因为page.html里写的仍是src="page_files/logo.png" - 要离线可用，必须保持二者在同一目录层级；若需迁移，建议整个文件夹打包，或改用
Copy outerHTML+ 手动内联关键资源 - 该方式对分析布局结构帮助有限：浏览器可能自动补全缺失标签（如加
<tbody>）、注入调试注释、甚至重排空格，导致和真实源码有偏差 真正要还原一个页面的布局结构，关键不在“保存动作”本身，而在你清楚自己要的是哪一层：服务端吐出的原始骨架？JS 运行后的最终 DOM？还是带资源路径的可运行副本？选错方法，后面调试就全在猜。</tbody>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
