右键“查看网页源代码”显示的是服务器返回的原始html，不含js动态内容；应使用开发者工具elements面板查看实时dom结构；curl可获取源码但需注意请求头和重定向。
直接看源代码，浏览器自带功能就足够，不需要额外工具或插件。
右键“查看网页源代码”为什么有时看不到真实 HTML？
因为 右键 → 查看网页源代码 显示的是服务器返回的原始 HTML（即 DOM 初始状态），不包含 JavaScript 动态插入的内容。比如 React/Vue 渲染的页面、用 document.write 或 innerHTML 修改过的部分，这里都看不到。
- 适合检查 seo 元素、初始
<meta>、服务端渲染输出 - 不适合调试交互后变化的结构（比如点击展开菜单后的 DOM）
- 某些网站会禁用右键（通过
oncontextmenu），但不影响快捷键Ctrl+U（windows/linux）或Cmd+Option+U（macos）
想看 JS 运行后的真实 DOM 结构，该用哪个面板？
用浏览器开发者工具的 Elements 面板（不是 Sources）。它显示当前内存中的 DOM 树，支持实时编辑、断点观察节点变化。
- 打开方式：
F12或Ctrl+Shift+I→ 切到Elements标签页 - 右键节点可“
break on”监听属性/子树变动 -
Elements里看到的<div id="app">...</div>可能和Ctrl+U看到的完全不同——这是正常现象，不是 bug - 注意：刷新页面后
Elements重置，不会保留手动修改
命令行下怎么快速获取 HTML 源码？
用 curl 最直接，但要注意是否需要带 cookie、User-Agent 或处理重定向。
立即学习“前端免费学习笔记（深入）”；
- 基础获取：
curl https://example.com - 带请求头模拟浏览器：
curl -H "User-Agent: Mozilla/5.0" https://example.com - 跟随跳转（常见于登录后页面）：
curl -L https://example.com - 保存到文件：
curl -o page.html https://example.com - 如果返回空或 403，大概率是服务端校验了
User-Agent或需登录态（此时curl不适用，得用 Puppeteer 等方案）
真正容易被忽略的是：HTML 源码和实际渲染效果之间，隔着网络请求、JS 执行、CSS 计算、浏览器补全规则（比如自动闭合 <p></p>）三层转换。别只盯一个视图，交叉比对 Ctrl+U、Elements、Network → Response 才能定位问题。