要拿到动态渲染前的原始html，必须绕过javascript执行，直接获取服务器返回的初始响应体；curl和requests.get()最可靠，view-source:协议可控但有跨域限制，elements面板内容是js执行后的dom，非原始html。
要拿到动态渲染前的原始 HTML，就得绕过浏览器执行 JavaScript 的环节，直接读取服务器返回的初始响应体——这和你在 Elements 面板里看到的、或 document.documentElement.outerHTML 输出的完全不是一回事。
右键“查看网页源代码”为什么拿不到动态内容
因为这个操作只触发浏览器加载并显示 response.body 的原始文本，不执行任何 JS。页面上那些由 Vue、React 或 AJAX 插入的列表、按钮、tab 栏，此时根本不存在于这个 HTML 里。
- 常见错误现象：
document.querySelector(".product-list")返回null，但页面明明有商品区 - 爬虫用
requests.get(url).text抓到的是一片空<div id="app"></div> - SEO 工具扫描不到关键内容，因为搜索引擎爬虫默认也不执行 JS
curl 和 requests.get() 是最可靠的原始 HTML 获取方式
它们模拟的是 HTTP 客户端直连服务器的行为，不带渲染引擎，所以天然规避了 JS 执行阶段。
-
curl -s https://example.com：终端一行命令，输出即原始 HTML 字符串；加-o page.html可保存文件 -
requests.get(url)：Python 中首选，注意设置response.encoding = response.apparent_encoding防止中文乱码 - 不要用
urllib.request.urlopen(url).read().decode("utf-8")直接硬解码，很多页面声明是 utf-8，实际响应却是 gbk 或 gb2312
view-source: 协议和 Ctrl+U 本质相同，但更可控
在地址栏输入 view-source:https://example.com，效果等同于右键 → 查看网页源代码，但能绕过部分禁用右键的网站限制。
- Chrome/Edge 支持
view-source:；Firefox 同样支持，Safari 需开启开发菜单后才可用 - 该协议不会触发任何 JS，也不会发额外请求，就是原封不动把
response.body当作 text/plain 渲染 - 不能用于跨域 URL（比如你本地 HTML 文件里写
view-source:http://other-site.com，浏览器会拒绝）
Elements 面板里的 HTML 不是“原始”，但 copy outerHTML 有用处
Elements 面板展示的是实时 DOM 树，document.documentElement.outerHTML 输出的是当前状态的完整序列化 HTML——它包含所有 JS 插入、修改、删除后的结果，和原始 HTML 毫无关系。
- 调试时有用：你想确认某个组件是否真的被 mount 了，或者事件监听器是否绑定成功
- 导出快照：在 Console 里执行
copy(document.documentElement.outerHTML)，Ctrl+V 就能粘贴出“你此刻看见的全部 HTML” - 陷阱：别把它当成服务端返回的内容去分析结构或写 XPath，selector 极可能失效
真正需要“水合前”的 HTML 时，唯一可信的来源只有网络层响应本身——不是 DOM，不是渲染结果，而是从 TCP 连接里捞出来的那一段字节流。所有基于浏览器 UI 的操作，只要没明确绕过 JS 执行，就不是原始态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
