用 DevTools 高效调试 B2 样式

样式不生效，别靠猜。浏览器 DevTools 是美化 B2 时的必备放大镜。

看谁压住了我的样式

选中元素 → Styles 面板，被划掉的属性就是「被更高优先级覆盖」的规则。点开对应选择器，直接改数值实时预览。

盒模型可视化

Computed 面板里的盒子图，直观显示 margin / border / padding 各占多少，排查「多了 10px」这类问题一秒定位。

实用技巧

1. 强制状态：右键元素 → Force state → :hover，不用真去悬停就能调悬停样式；
2. 取色器：点颜色方块吸任意像素颜色；
3. 设备工具栏：切手机/平板视口，验证响应式；
4. 本地覆盖：Sources → Overrides，把线上 CSS 映射到本地改，刷新不丢，验证后再写回子主题。

养成「先看面板再改文件」的习惯，效率翻倍。