HTML源代码怎么查看

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 应该和页面长得一样。