快速定位自定义属性需在Styles面板顶部过滤框输入--筛出声明；若未显示，先确认是否定义在祖先节点（如:root），再右键该节点勾选:root或刷新重选。
Elements > Styles 面板里怎么快速定位自定义属性
自定义属性（--my-color）在 Styles 面板中不会自动归类到“常规 CSS 属性”区，必须手动展开 :root 或对应作用域元素的样式块才能看到。如果你在某个元素上没看到 --theme-primary，先确认它是否定义在该元素的祖先节点（比如 html 或 body），再右键点击该祖先节点 → “Force state” → 勾选 :root（或刷新后重新选中）。Styles 面板顶部有个过滤框，输入 -- 可直接筛出自定义属性声明，比滚动查找快得多。
修改自定义属性值时为什么没实时生效
常见原因有三个：
• 你改的是 element.style 里的内联值，但实际生效的是来自 :root 的声明，覆盖了它；
• 属性名拼错（比如 --color-primary vs --primary-color），DevTools 不报错，只是忽略；
• 使用了未注册的 @property 描述符（如缺少 syntax: "<color>"），此时浏览器会静默丢弃动画或 transition 效果，但值本身仍可读取。
验证方式：选中元素 → 切换到 Computed 面板 → 搜索 --your-prop，看右侧“Value”列是否显示有效值及来源行号。
如何调试自定义属性的继承链和计算结果
自定义属性本身不继承，但它的使用位置（比如 color: var(--text-color)）会参与继承计算。要查清某处颜色为何是灰色而非预期的蓝色：
• 在 Computed 面板搜索 color，点开值旁的箭头，查看“var(--text-color)”被解析成什么；
• 点击该值右侧的链接，跳转到定义 --text-color 的样式规则；
• 若该规则来自 :root，再检查当前元素是否被更高优先级的选择器重写了 --text-color（例如 .card { --text-color: #666; }）；
• 注意：Computed 面板只显示最终计算结果，不显示中间变量值，所以必须配合 Styles 面板逐层回溯。
@property 注册后 DevTools 不显示描述符信息
这是已知限制：只有 Chrome 120+ 且启用实验性功能（chrome://flags/#enable-css-property-descriptors）才支持在 Styles 面板悬停自定义属性时显示 @property 描述符。若你已注册但没看到工具提示：
• 检查是否漏写 inherits: true 或 syntax；
• 确保注册语句在 CSS 文件中位于所有使用该属性的规则之前（顺序敏感）；
• 打开 Elements → Styles → 找到注册规则，确认没有语法错误（如缺少分号、括号不匹配），否则整条 @property 会被浏览器跳过，且无任何警告。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：自定义属性的值在 Computed 面板中只显示“解析后”的结果，比如 var(--size, 1rem) 会直接显示 16px，而不会告诉你 fallback 是怎么来的。调试 fallback 行为，必须回到 Styles 面板，手动禁用主声明，再观察变化。
