各种前端Debug技巧系列

  概览

  上一篇文章主要讲解了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 相关的功能。

  #web前端开发#

  

标签