必须同时掌握查看源代码和实时dom结构两种能力：按ctrl+u/cmd+u查看原始html（不执行js），用开发者工具elements面板查看javascript渲染后的实时dom，二者互补不可替代。
想快速确认网页的原始HTML是否包含某个meta标签，或排查JavaScript动态生成的内容为什么没显示，必须同时掌握查看源代码和实时DOM结构的两种能力——只看源码可能全是空div，只看DOM又找不到服务端注入的关键字段。
用快捷键直接打开原始HTML源码
按 Ctrl + U（Windows/Linux）或 Cmd + U（macOS），当前网页的原始HTML文本立刻在新标签页中以纯文本形式展开。
这个操作不执行任何JavaScript，也不加载CSS或图片，你看到的就是服务器HTTP响应体里的原始字节流——适合检查doctype、charset、script标签路径、SEO相关meta是否写对。
注意：如果页面由React/Vue等框架完全客户端渲染，这里很可能只看到一个空的
，别误以为代码丢了。用地址栏命令精准跳转并保存源码
方法一：在地址栏中把当前网址的https://替换成view-source:，例如https://example.com → view-source:https://example.com，回车即跳转。
方法二：在任意空白标签页地址栏直接输入view-source:https://example.com，回车打开——无需提前访问该网页。
【view-source:前缀不能加空格，也不能漏掉冒号】
打开后顶部有“另存为”按钮，可直接保存为.html文件用于离线分析或发给后端同事核对。
用开发者工具查看实时DOM结构
这一步是调试的核心：JavaScript运行后的真实节点树、Vue组件挂载位置、被CSS display:none隐藏但仍在DOM中的元素，全在这里。
第一步：在目标网页按 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（macOS）打开开发者工具。
第二步：点击顶部标签栏的“元素”（Elements）面板，左侧立即呈现树状DOM结构，支持逐级展开折叠。
第三步：鼠标悬停任意HTML标签，页面对应区域会自动被绿色边框高亮；点击该标签，右侧即时显示其所有计算样式、盒模型尺寸、绑定的事件监听器。
第四步：按 Ctrl + F 可在DOM树中搜索class名、id或任意文本，比在源码里搜快得多——因为这里搜的是最终渲染结果。
绕过卡顿：当Ctrl+U一直加载不出来的应急方案
方法一：不要关闭那个空白标签页，直接按 F12 打开开发者工具 → 切换到“网络”（Network）面板 → 刷新该源码标签页，观察哪条请求状态一直是pending，那就是阻塞源码加载的罪魁祸首（通常是失效广告脚本或CDN字体）。
方法二：右键页面任意空白处 → 选择“检查元素”，瞬间进入“元素”面板，看到的就是已加载完成的DOM，完全不受外部资源影响。
方法三：地址栏输入javascript:document.body.innerText=document.documentElement.outerHTML，回车后整个页面变成可复制的原始HTML字符串，适合紧急提取。
