浏览器查看HTML源码有原始源码（Ctrl+U）和实时DOM（开发者工具Elements）两种方式，前者显示服务器返回的静态HTML，后者显示JS渲染后的实际DOM结构。
直接在浏览器里看 HTML 源代码
所有现代浏览器都内置了查看当前页面源码的功能，不用装插件、也不用开开发者工具就能快速看到原始 结构。
常见错误现象：右键菜单点“查看网页源代码”后一片空白，或内容和页面显示明显对不上——这通常是因为页面用了 JavaScript 动态渲染，查看网页源代码 只能显示服务器最初返回的 HTML，不包含 JS 运行后插入的 DOM。
- Chrome / Edge / Firefox：按
Ctrl+U（Windows/Linux）或Cmd+Option+U（macOS） - Safari：需先开启开发菜单（偏好设置 → 高级 → 勾选“在菜单栏中显示‘开发’菜单”），然后选“开发 → 显示页面源代码”
- 手机浏览器基本不支持快捷查看源码；iOS Safari 和 Android Chrome 都没有原生入口
用开发者工具看实时渲染后的 HTML
想看 JS 执行完、Vue/React 渲染后的真实 DOM 结构，得用开发者工具里的 Elements 面板，它展示的是当前内存中的 DOM 树，不是原始 HTML。
使用场景：调试组件没显示、元素被动态删掉、CSS 选择器失效、或者想确认某个 data- 属性是否真被写进去了。
- 打开方式：按
F12或Ctrl+Shift+I（Windows/Linux），macOS 是Cmd+Option+I - 默认定位到
Elements标签页；左侧可点击元素高亮页面对应区域，右侧显示计算样式和事件监听器 - 右键某个元素 → “编辑为 HTML” 可临时改结构，刷新即失效；“复制 → 复制外层 HTML” 能快速提取含子节点的片段
命令行下快速查看本地 HTML 文件源码
本地写了个 index.html，双击用浏览器打开后想立刻看源码？没必要反复右键 —— 直接用系统命令更稳。
立即学习“前端免费学习笔记（深入）”；
性能影响：纯文本读取，毫秒级；比浏览器加载整页再解析快得多，尤其适合大文件或网络受限环境。
- Windows PowerShell：
Get-Content .\index.html -Raw - macOS / Linux 终端：
cat index.html或less index.html（支持翻页） - VS Code 用户：右键文件 → “在 VS Code 中打开”，
Ctrl+Shift+P→ 输入 “Reopen with Encoding” 可防乱码 - 注意路径：如果文件在子目录，命令里要写对相对路径，比如
cat src/index.html
为什么用 view-source: 协议有时打不开
view-source:https://example.com 这种写法在地址栏输入后，部分浏览器（尤其是新版 Chrome）会直接跳转到首页或报错，不是你操作错了，是浏览器策略限制了该协议的跨域使用。
兼容性影响：Firefox 仍支持大部分 view-source: 地址，但 Chrome 从 v90 起默认禁用非同源的 view-source: 加载，防止信息泄露。
- 只对本地文件有效：
view-source:file:///Users/name/index.html一般能打开 - HTTP(S) 网站基本失效，换成
Ctrl+U更可靠 - 某些企业内网或测试环境启用了自定义协议拦截，也会导致
view-source:白屏
真正容易被忽略的是：源码查看本身不解决“为什么页面没按预期渲染”这个问题。看到的 HTML 只是起点，下一步得判断是服务端没吐对、JS 报错了、还是 CSS 优先级压住了样式——别卡在“看得到”就以为问题定位完了。
