ctrl+u保存的是服务器返回的原始html，不含js动态内容；elements面板copy outerhtml保存的是渲染后的实时dom；view-source:协议发起新请求绕过缓存；curl/requests需设ua和编码防乱码或拦截。
Ctrl+U 保存的是原始 HTML，不是渲染后的内容
直接按 Ctrl+U（Windows/Linux）或 Cmd+U（macOS）打开的源码页，是服务器返回的原始响应体，不含任何 JavaScript 动态插入、修改或删除的节点。它适合检查 SEO 元标签、服务端模板输出、初始 HTML 结构是否正确。
常见错误现象：另存为 时没在源码页操作，而是在原网页标签页点“另存为”，结果保存成 Web Page, Complete 格式，生成一堆文件夹和资源，根本不是单个 .html 文件。
- 务必在
Ctrl+U打开的新标签页中操作 - 保存时选择“Web Page, HTML Only”（Chrome/Edge）或“Page Source”（Firefox）
- 文件名必须以
.html结尾，编码选UTF-8
Elements 面板里右键 Copy outerHTML 保存的是实时 DOM
当你需要保存 JavaScript 渲染后的最终结构（比如 React/Vue 页面加载完数据后的完整 HTML），就得用开发者工具的 Elements 面板——它展示的是当前内存中的 DOM 树，不是原始源码。
操作路径：按 F12 → 切到 Elements 标签 → 右键最外层 节点 → Copy → Copy outerHTML。
- 复制内容包含所有动态生成的元素、内联样式、临时 class，但不含外部 CSS/JS 文件链接
- 粘贴到文本编辑器后，需手动补上
和基础 meta 标签才可双击打开正常渲染 - 若页面用了 Shadow DOM 或 iframe，
outerHTML不会自动包含其内部结构，得单独展开复制
view-source: 协议能绕过缓存和重定向，看到真实响应
在地址栏输入 view-source:https://example.com 并回车，浏览器会跳过常规导航流程，直接发起一次新的 GET 请求，并强制以纯文本方式显示响应体。这对排查 CDN 缓存、服务端 302 重定向、或 SSR 输出异常特别有用。
与 Ctrl+U 的关键区别：view-source: 每次都是新请求，Ctrl+U 可能复用已加载的缓存版本。
- URL 必须完整，包括协议（
https://或http://），否则会报ERR_INVALID_URL - 不支持 POST 页面或带登录态的受限页面（会跳转到登录页，然后显示登录页源码）
- 部分企业内网环境或特殊安全策略下，该协议可能被浏览器禁用
curl 和 Python requests 抓取的是服务器原始响应，但要注意 headers
命令行或脚本抓取时，curl https://example.com > page.html 默认不带 User-Agent，有些网站会返回 403 或降级 HTML；requests.get() 默认也不发 Accept 头，可能拿到 JSON 而非 HTML。
- 加
-H "User-Agent: Mozilla/5.0"或设置headers={'User-Agent': '...'}可避免被反爬拦截 - 务必检查
response.status_code == 200和response.headers.get('content-type', '').startswith('text/html') - 中文网页记得用
response.encoding = 'utf-8'或response.content.decode('utf-8')，否则保存后是乱码
真正容易被忽略的点是：原始源码（Ctrl+U / view-source:）和实时 DOM（Elements + outerHTML）本质不同，选错会导致备份失效。调试时看哪个，保存时就用对应方法，别混着来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
