Ctrl+U查看的是服务器返回的初始HTML，不含JavaScript动态生成的内容；要检查实际渲染的DOM结构，必须使用开发者工具的Elements面板。
直接按 Ctrl+U（Windows/Linux）或 Cmd+Option+U（macOS）就能打开当前网页的原始 HTML 源代码，这是最快速、无依赖的方式。
为什么不能右键“查看源代码”就完事？
现代网页大量使用 JavaScript 动态渲染，Ctrl+U 看到的是服务器返回的初始 HTML，不含运行时生成的 DOM 节点（比如 React 渲染后的内容、AJAX 加载的数据）。如果你要查的是“页面上实际显示的结构”，这个源码页帮不上忙。
常见错误现象：Ctrl+U 里搜不到你刚看到的按钮文字，或者整个 <main> 区域是空的 —— 那说明内容是 JS 插进去的。
- 想看 JS 渲染后的结果，必须用浏览器开发者工具（
F12或Ctrl+Shift+I），切到Elements标签页 -
Elements显示的是实时 DOM 树，支持搜索、高亮、禁用样式、模拟设备等 -
Ctrl+U和Elements是两套东西：前者是 HTTP 响应体，后者是内存中的 DOM 快照
Chrome / Edge / Firefox 查看动态 HTML 的实操要点
打开开发者工具后，默认聚焦在 Elements 面板。这里不是静态快照，而是可交互的树状结构：
立即学习“前端免费学习笔记（深入）”；
- 鼠标悬停在 DOM 节点上，页面对应区域会高亮（带半透明蒙层）
- 右键节点可“
Break on”属性修改、子树变更或节点移除，用于调试 DOM 变更逻辑 - 按
Ctrl+F（Windows）或Cmd+F（macOS）可在当前 DOM 树中搜索文本或选择器，比如输入.card-title - 修改节点内容或属性后，页面实时响应；刷新即还原 —— 这是临时调试，不影响真实源码
命令行下怎么获取原始 HTML？
如果需要脚本化获取服务端返回的 HTML（比如做爬虫分析或 CI 检查），别靠浏览器，用 curl 或 wget：
curl -s https://example.com | head -n 20
注意几个关键点：
-
-s静默模式，不显示进度条和错误提示 - 有些网站会检测
User-Agent并拒绝非浏览器请求，加-H "User-Agent: Mozilla/5.0"可绕过基础拦截 - 如果页面依赖 Cookie 或登录态，
curl默认不携带，需配合-b cookies.txt或先用curl -c登录存 cookie - 返回内容可能是 gzip 压缩的，
curl默认自动解压，但某些旧版本需显式加--compressed
真正容易被忽略的是：同一个 URL，Ctrl+U、Elements、curl 三者看到的 HTML 很可能完全不同 —— 它们分别代表服务端输出、客户端运行时状态、无头请求结果。选哪个，取决于你想诊断的问题类型：是服务端模板没吐对？JS 渲染出错了？还是反爬机制干扰了请求？
