Element 面板 - Styles & Computed 面板 - 查看和调试元素样式

核心面板介绍

Styles 面板 - 查看所有 CSS 规则

• 显示应用到元素的所有 CSS 规则（内联、外部、继承）
• 按源码定义顺序显示，通过删除线标识被覆盖的样式
• 可实时编辑、启用/禁用规则、查看优先级和继承链

Computed 面板 - 查看最终计算值

• 显示浏览器实际应用的最终样式值（绝对值）
• 可视化展示盒模型（margin、border、padding、content）
• 可追溯每个属性的来源规则

---

Styles 面板

面板结构

element.style { }              ← 内联样式（最高优先级）
.your-class { }                ← 匹配的 CSS 规则（按源码顺序）
#your-id { }
Inherited from <parent>        ← 继承的样式
user agent stylesheet          ← 浏览器默认样式

常用操作

• 编辑样式：点击属性值直接修改，↑↓ 调整数值（Shift+↑↓ 大步调整）
• 启用/禁用：点击复选框快速切换规则
• 添加规则：点击 + 号新增 CSS 规则
• 过滤搜索：输入关键词快速定位属性
• 查看继承：向下滚动查看 "Inherited from" 部分

---

Computed 面板

主要功能

1. 最终样式值

• 显示所有计算后的绝对值（如 1em → 16px）
• 包含浏览器默认值

2. Box Model 可视化

• 图形化展示：margin → border → padding → content
• 点击数值可直接编辑

3. 样式来源追溯

• 展开属性查看具体来源规则
• 点击跳转到 Styles 面板对应位置

4. 快速搜索

• 输入属性名模糊匹配（如 "width" 匹配 width、max-width 等）

---

常见问题排查

样式不生效？

1. 检查是否有删除线（被覆盖）
2. 检查是否有 ⚠️ 标记（属性错误）
3. 检查是否被 !important 覆盖

宽度计算不对？

1. 查看 Computed 面板的 Box Model
2. 检查 box-sizing 的值
3. 查看是否有 min-width/max-width 限制

---

快捷操作

操作	方法
调整数值	↑/↓ (±1)、Shift+↑/↓ (±10)、Alt+↑/↓ (±0.1)
切换规则	点击复选框启用/禁用
搜索属性	Ctrl+F 或点击 Filter 输入框
查看盒模型	Computed 面板顶部
添加规则	Styles 面板点击 + 号