[!info] related notes

• 所属 MOC: 浏览器开发者工具 MOC
• 渲染基础: 浏览器渲染过程, 盒模型
• 可视化辅助: Rendering 面板
• 执行路径: Sources 面板

DevTools Elements 面板

一句话定义

Elements 展示的是：

浏览器此刻真正维护的 DOM，以及 CSS 经过 cascade、inheritance 与 computation 后得到的结果。

它不是服务器原始 HTML，也不是源码 CSS 文件本身。

DOM Tree

DOM Tree 可以回答：

• 节点到底存在吗；
• 运行时插入或删除了什么；
• class / attribute 当前是什么；
• 组件框架最终生成了什么 DOM。

这对区分：

• 组件没渲染；
• 已经渲染但看不见；

非常关键。

Styles

Styles 主要看 CSS cascade：

• 哪些规则匹配；
• 哪些声明被覆盖；
• selector 来源；
• inline style；
• inherited declarations；
• pseudo-state。

一条声明被划掉，通常只是该 property 在 cascade 中输给了别的声明，不代表整个 selector 无效。

Computed

Computed 展示最终计算值。

例如源码写：

width: 50%;

最终可能对应具体像素尺寸。

它适合回答“最终是什么”；如果要回答“为什么变成这样”，仍要回 Styles 看来源与 cascade。

Box Model 与 Layout

Box Model 帮助观察：

• content；
• padding；
• border；
• margin。

Flex / Grid overlays 则帮助理解：

• container 边界；
• tracks；
• gaps；
• item 对齐。

Force State

可以临时强制：

• :hover；
• :focus；
• :active；

等状态，适合复现难以持续保持的交互样式。

实时修改的意义

在 Elements 中修改 DOM / CSS 是实验：

假设 → 临时修改 → 页面立即反馈 → 验证方向 → 回正式源码实现。

除非结合 Workspaces / Overrides，否则刷新后通常不会成为正式项目修改。

Elements 与其他面板

• Network：数据或资源到底有没有回来。
• Sources：为什么代码改了 DOM / state。
• Elements：最终 DOM / CSS 是什么。
• Rendering：把 repaint、layout shift、media 条件等不可见渲染现象可视化。

常见误区

• 只看源码 CSS，不看实际 cascade；
• Computed 值不对时直接改最终值，而不追来源；
• DOM 已存在却继续排“组件为什么没 render”；
• 在 Elements 中改成功就认为正式代码已经修复；
• 把 display:none、零尺寸、overlay 遮挡等不同“看不见”原因混在一起。

学习检查

1. Elements 中看到的 DOM 与服务器返回 HTML 有什么区别？
2. Styles 与 Computed 分别回答什么问题？
3. CSS declaration 被划掉通常表示什么？
4. 为什么 DOM 已存在但用户看不到时，排查方向应从 mount 转向 CSS / layout？
5. Flex / Grid overlay 提供哪类布局证据？
6. Force State 为什么适合调试 hover / focus？
7. 给一个“按钮颜色不对”的问题，按 Styles → cascade → Computed → source 设计排查。