【Debug】 你所知道的Elements - CSS 之 2----第四天

概览

上一篇文章主要讲解了Elements面板中设定CSS的部分，今天笔者将会继续说明CSS相关功能，包括Styles分页上方的小工具列以及Computed分页的应用。

阅读本篇文章时建议搭配此Demo页面Elements - CSS 2一起使用，效果更佳。

状态锁定

有时会在CSS中定义Pseudo class如:hover、:active，在使用者与页面互动时改变样式，不过定义在Pseudo class的Styles在Debug时无法直接用JavaScript触发，如果有一个滑鼠经过才会出现的选单就必须将元素锁定在hover状态，才能够一边调整样式一边观察变化，否则想要到DevTools中调整样式的时候选单就不见了。

最简单的锁定方式可以先Inspect元素、右键点击元素会看到Force state，再选择想要锁定的状态如:hober，下拉选单就出现了。

锁定状态后的元素会在左边出现小圆圈作为提示，不过其实在Styles 分页上方有一个:hov 按钮，点击会展开状态切换列表，这也是笔者较常使用的方式，可以透过这个列表快速切换多种状态。

Class 操作

.cls 按钮
点击:hov右边的.cls会展开Class切换列表，可以透过列表开关各个Class，另外也可以从Add new class输入框来加入新的Class，最特别的是输入时会出现下拉选单，可以直接搜寻这个页面定义过的Class，用方向键选择可以预览加上Class后的效果。

如果读者有使用过atomic CSS 像是TailwindCSS，会发现他们搭配.cls 非常好用，快速开关、新增、预览各种Class。

此处用了之前开发的PDF Editor 来示范，正好用到TailwindCSS。

新增Style Rule

最右侧的＋号是用来新增规则的，预设会产生一条可以选到这个目前选定元素的CSS Selector，可以编辑规则并写入一个暂时的CSS 档，这样就能避免修改现有的CSS 规则或是修改Inline style，另外如果按住+ 不放会出现下拉选单，可以选择新规则要写入哪一份CSS 档。

建立规则后点击右方的来源可以编辑刚刚新增的规则，此范例自动产生了一个CSS Selector并新增一条规则到style.css里面。

删除线

某一条上如果有删除线代表没有生效，可能是被更高优先的Style 覆盖了或是输入了不合法的值（左边会有惊叹号提示）。

另外Styles分页的规则列表其实是按照优先度由上到下排序的，同一个CSS property出现在最高优先度的规则中才会生效，不过加入!imporant的话就会超越没有加入!improtant的规则，同样的CSS selector则是越晚出现优先度越高。

Computed

规则很多时，很难从Styles 分页看出某个Property 实际的值，此时就要依靠Computed 分页来查询实际值，展开Property 可以看到所有规则和档案来源，还有被覆盖的删除线。

注意使用简写（short-hand）如background: #ff2525;是一次定义各种background相关的Property，例如background-image、background-size等等，background本身并不会出现在Computed分页里。

Search

有些property 是隐藏的，勾选Show all 才能看到全部，再搭配Filter 来快速找到该property。

Rendered Fonts

遇到字体问题的时候可以在Computed 面板的最下方找到某个元素内的字体使用了什么字体、来源，以及Render 了几个字。

此元素Render 了13 个Tahoma 字体

另外其实在Inspect 元素的时候就能看到许多有用的资讯如字体、Box model、Contrast ratio 等等，笔者在快速浏览字体大小的时候就会直接看Inspect 资讯框。

结语

今天把Elements 面板中CSS 相关功能讲解完毕了，明天继续讲解DOM 相关的功能。