Elements面板显示的是浏览器修复后的真实DOM，非原始HTML；灰色文字、自动补全标签、结构跳变等均为容错信号，应以此为准调试而非依赖源码。
Elements 面板里看到的不是你写的 HTML，而是浏览器修复后的真实 DOM —— 想靠源码猜结构，基本白忙。
Elements 面板显示的是最终 DOM，不是原始 HTML
浏览器会自动修正语法错误：漏闭合的 <p>、非法嵌套的 <div> 在 <p> 里、错位的 </div>……这些都会被重写。你写的可能是：
<p>标题<div>内容</div></p>
但 Elements 面板实际显示的会是：
<p>标题</p><div>内容</div>
- 灰色文字、带删除线的标签、自动补全的
</li>或</tr>，都是浏览器容错的明确信号 - 右键 → “View page source” 看的是原始 HTML；右键 → “Inspect” 进 Elements 面板看的是 JS 执行完 + 浏览器修复后的 DOM
- SPA（React/Vue）页面中，Elements 面板几乎永远和源码不一致，必须以它为准
怎么快速定位某个 HTML 标签对应哪块视觉区域
别靠肉眼扫源码找，用浏览器原生能力直接映射：
立即学习“前端免费学习笔记（深入）”；
- 按
Ctrl+Shift+C（Windows/Linux）或Cmd+Shift+C（macOS），鼠标悬停页面，目标元素高亮时单击 —— Elements 面板立刻跳转并展开该节点 - 在 Elements 面板中鼠标悬停任意节点，页面上会实时浮现虚线边框，标出它的渲染边界
- 如果右键“检查”失效（比如页面禁用了上下文菜单），必须用快捷键，不能拖拽选区 —— 拖拽会触发截图模式
- Mac 上某些扩展（如 Grammarly）可能劫持
Cmd+Shift+C，此时点工具栏的箭头图标更可靠
修改 Elements 中的 HTML 为什么没生效或“又变回去”
所有编辑都只作用于内存中的 DOM 快照，刷新即丢，且不触发任何 JS 逻辑：
- 双击改文本、删
<script>、加class，页面会立刻响应，但这只是 DOM 层面的临时变更 - 如果元素由 React/Vue 渲染，下一次状态更新会直接覆盖你的手动修改，看起来像“改了又还原”
- 用 “Edit as HTML” 粘贴大段结构时，若漏了
</div>，浏览器会自动补，但补的位置往往不对，导致后续整块结构错乱 - 删掉一个
<link rel="stylesheet">后样式消失，不是 bug，是你亲手切断了样式来源
怎么查某个元素是谁用 JS 动态插入的
右键该元素 → “Break on” → “Subtree modifications”，之后只要它或子节点被 JS 修改（appendChild、innerHTML =、insertAdjacentHTML），调试器就会断在触发那行 JS 上：
- 断点只对「后续操作」有效 —— 已插入的元素，得先刷新页面再设断点
- 轮播图、实时消息等高频更新场景，断点会狂跳，建议配合勾选 “Pause on caught exceptions” 或临时注释无关逻辑
- Vue/React 应用里，断点常落在框架内部方法（如
mountComponent），得往上翻调用栈，找你自己的业务代码那一层 - 执行
document.body.innerHTML到 Console，对比输出与原始 HTML 文件，能快速确认哪些部分被 JS 改过
DOM 结构的复杂性不在标签多寡，而在浏览器修复、JS 干预、CSS 选择器权重三者叠加后的不可见影响 —— 越是“看着简单”的页面，越容易在 Elements 面板里发现意外的嵌套或缺失的闭合。
