右键“查看网页源代码”显示的是服务器返回的原始html，不包含js动态内容；f12的elements面板展示的是执行js后的实时dom树，二者可能完全不同。
浏览器右键“查看网页源代码”看到的到底是什么
它只是当前页面的初始 HTML，不包含 JavaScript 动态插入的内容，也不反映 DOM 实时状态。很多人以为点开就是“真实源码”，结果调试时发现 document.getElementById 找不到元素，或者爬虫抓不到渲染后的内容，问题就出在这儿。
- 右键 → “查看网页源代码” = 服务器返回的原始 HTML 字符串（未执行 JS）
- F12 打开开发者工具 → 切到 Elements 面板 = 当前实时 DOM 树（JS 已执行、Vue/React 已挂载）
- 两者可能完全不同；比如单页应用（SPA）的
<div id="app"></div>在源码里空空如也，在 Elements 里却塞满了组件节点
Chrome DevTools 的 Elements 面板怎么高效定位元素
靠肉眼滚动找节点效率低，还容易点错。真正快的方法是结合搜索和选择器高亮。
- 按
Ctrl+F（Win）或Cmd+F（Mac）在 Elements 面板内直接搜文本、class名、id值，支持正则（勾选右下角.*） - 鼠标悬停在 DOM 节点上时，页面会实时高亮对应区域；右键节点 → “Scroll into view” 可快速定位不可见元素
- 想看某个元素绑定的事件？右键 → “Break on” → “attribute modifications” 或 “subtree modifications”，比手动查
addEventListener省力得多
用 curl 或 Python requests 获取的 HTML 为什么和浏览器看到的不一样
因为服务端可能做了 User-Agent 检测、JavaScript 渲染拦截，甚至返回了骨架屏或降级 HTML。
- curl 默认不执行 JS，且请求头里没有
User-Agent，有些站点会直接返回空<div id="root"></div> - requests.get() 同样只拿原始响应体，不会触发
fetch、Vue.createApp等逻辑 - 需要服务端渲染（SSR）或预渲染内容时，得换方案：用
Puppeteer、Selenium或浏览器自动化工具加载完整页面再取page.content()
移动端真机调试时看不到 Elements 面板怎么办
不是功能缺失，是连接和配置没走对路。Chrome 对安卓设备支持好，iOS 则限制多些。
立即学习“前端免费学习笔记（深入）”；
- 安卓：打开手机“开发者选项” + “USB 调试”，用 USB 连电脑，Chrome 地址栏输入
chrome://inspect→ 点击“Configure”加localhost:9222或手机 IP，页面列表就会出现 - iOS：必须用 macOS + Safari，手机设置 → Safari → “高级” → 开启“Web 检查器”；Mac Safari → “开发”菜单 → 手机名 → 选页面；注意 iOS 16+ 对远程调试有更严的证书和权限要求
- 真机上右键无效，所有 DOM 查看必须依赖电脑端 DevTools 的 Elements 面板，别试图在手机浏览器里找“查看源码”
DOM 是活的，HTML 源码是死的。调试时盯错地方，花两小时不如花两分钟切到 Elements 面板按一下 Ctrl+F。很多“元素不存在”的问题，其实只是没分清静态 HTML 和动态 DOM。
