“查看源代码”是空的，是因为它只显示服务端返回的原始HTML骨架（如<div id="root"></div>），不含JS动态渲染的内容；真实DOM需通过开发者工具Elements面板复制outerHTML获取。
“查看源代码”为啥是空的？——动态渲染内容不在这儿
打开网页按 Ctrl+U 或右键选“查看页面源代码”，看到的往往是只有 <div id="root"></div> 的骨架，JS 渲染后的真实 DOM 根本没出现。这不是你操作错了，是服务端返回的原始 HTML 确实就长这样。
真正要保存的是浏览器最终解析并执行 JS 后生成的完整结构，也就是你在开发者工具 Elements 面板里看到的内容。它包含所有动态插入的标签、数据、事件绑定后的状态（比如已展开的菜单、加载完成的列表）。
- 原始源码（
Ctrl+U）适合分析服务端逻辑、SEO 结构或调试 SSR 问题 - 渲染后 DOM（
Elements→Copy outerHTML）才是你眼睛看到、想存下来离线查看/调试的那个“网页” - 如果页面用了 Shadow DOM（如某些 Web Component），
outerHTML可能不包含影子树内部，得手动展开再复制
用 Elements 面板保存完整 DOM：三步别手抖
这是最常用、最可控的方式，不需要装插件、不依赖网络请求，直接从当前页面内存中取现成结构。
- 按
F12打开开发者工具，切到Elements标签页 - 在左侧 HTML 树里找到最顶层的
<html>节点（不是<body>，不是某个 div） - 右键 →
Copy→Copy outerHTML（注意不是Copy innerHTML）
粘贴到 VS Code 或记事本里，务必手动选择编码为 UTF-8，否则中文变乱码；文件名末尾加 .html，保存路径随意（桌面、项目文件夹都行）。
立即学习“前端免费学习笔记（深入）”；
⚠️ 容易踩的坑：Copy element 和 Copy outerHTML 在部分浏览器里名称接近但行为不同；Chrome 有时会把注释、自动补全的闭合标签也一起复制进来，不影响运行，但二次编辑时可能干扰结构识别。
curl/wget 抓不到 JS 渲染内容？那是设计如此
curl https://example.com > page.html 拿到的永远是原始响应体，和 Ctrl+U 一样。它不执行 JS，不等异步接口返回，也不触发 useEffect 或 mounted 钩子。
如果你明确需要服务端原始 HTML（比如做爬虫指纹比对、监控首屏直出是否生效），那 curl 是对的；但想存“人眼所见”的页面，就得换思路：
- 用 Puppeteer 或 Playwright 启动无头浏览器，等
networkidle0或自定义 selector 出现后再取page.content() - Python +
selenium：显式等待关键元素加载完成，再调用driver.page_source - 命令行不想写脚本？
playwright show-trace录制操作后导出 HTML 快照（需额外配置）
性能影响明显：Puppeteer 启动 Chromium 实例约耗 300–500MB 内存，单页抓取耗时通常在 1–3 秒，远高于 curl 的毫秒级。别用它批量抓 1000 个静态页——纯浪费资源。
Save Page WE / SingleFile 扩展为什么有时白屏？
这类扩展本质是往页面注入 JS，调用 document.documentElement.outerHTML 序列化整个 DOM，再把 CSS/JS/image 内联或 Base64 编码打包进一个文件。听起来完美，但有硬伤：
- 异步数据还没回来就点了保存 → DOM 里还是 loading 占位符
- 滚动懒加载的图片、点击才展开的 Tab，若没手动触发过，就不会出现在最终 HTML 中
- 通过
fetch加载的 JSON 数据不会被还原成 HTML —— 扩展只管 DOM 树，不管 JS 变量值 - Service Worker 拦截了资源请求？扩展无法绕过，可能漏掉字体或 API 返回的 SVG
所以，保存前务必手动滚动到底部、点开所有折叠区、等待所有加载动画消失。不是点了按钮就完事，得像测试 QA 一样“交互一遍”。
真正容易被忽略的一点：这些扩展生成的单文件 HTML，本地双击用 file:// 协议打开时，部分现代框架（如 Next.js App Router）会因缺少服务端上下文而报错或空白——必须用 python -m http.server 或 VS Code Live Server 启一个本地 HTTP 服务才能正常跑。
