ctrl+u查看的是服务器返回的初始html，不含javascript动态生成的内容；要检查实际渲染的dom结构，必须使用开发者工具的elements面板。
直接按 Ctrl+U（Windows/Linux）或 Cmd+Option+U（macOS）就能看到服务器返回的原始 HTML，这是最快、最稳的方式——但前提是页面没禁右键，且你不需要看 JS 渲染后的内容。
用 Ctrl+U 看原始 HTML 时内容为空或不对劲
常见错误现象：按下 Ctrl+U 后一片空白，或者结构极简（比如只有 <div id="app"></div>），和页面显示完全不一致。
- 这不是操作错了，是页面用了 Vue/React 等框架，HTML 全靠 JS 动态插入，
Ctrl+U只能拿到初始空壳 - 服务端渲染（SSR）或静态站点通常能正常显示，但纯客户端渲染（CSR）项目基本都这样
- 部分网站会通过
document.oncontextmenu = () => false禁右键，间接让“查看网页源代码”菜单消失，但Ctrl+U一般仍有效
想看 JS 执行后的真实 DOM 结构，必须用 Elements 面板
开发者工具里的 Elements 面板展示的是内存中当前实际存在的节点，不是源码，适合调试组件没出现、data- 属性没写上、或者 CSS 选择器匹配失败的情况。
- 快捷键：
F12或Ctrl+Shift+I（Windows/Linux），Cmd+Option+I（macOS） - 打开后默认就在
Elements标签页；左侧点元素，右侧高亮对应区域；右键可选Edit as HTML临时修改（刷新即丢） - 注意：复制节点时用
Copy outerHTML而不是Copy element，后者可能只复制标签名 - 如果页面加载慢或卡顿，
Elements面板有时会延迟更新，可手动右键 → “Reveal in Elements panel” 强制定位
view-source: 协议在 Chrome 中经常打不开
在地址栏输入 view-source:https://example.com 理论上应直接显示源码，但 Chrome 自 v90 起默认禁用跨域 view-source: 请求——哪怕你刚从那个域名页面跳转过来，也可能跳首页或报错。
- Firefox 仍支持大部分场景，包括跨域
view-source:，可作为备用方案 - 本地文件用
view-source:file:///path/to/index.html在 Chrome 中也常失效，改用命令行更可靠 - 真正稳定的做法是：终端执行
curl https://example.com（需安装curl），或本地文件用cat index.html（macOS/Linux）、Get-Content .\index.html -Raw（PowerShell）
最容易被忽略的一点：所谓“源代码”其实分三层——服务器吐出的原始响应体、浏览器解析后生成的 DOM、JS 运行后修补的最终 DOM。选错工具，看到的就是另一回事；而多数人卡住，是因为默认以为 Ctrl+U 应该和页面长得一样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
