想要又快又稳的满足各种UI 需求，每天肯定花不少时间在Debug CSS，不过总有某些特殊情境让Debug 过程非常繁琐，甚至是难以完成，此时心中就会逐渐冒起一把无名火。
概览
Elements 面板会显示目前网页中的DOM、CSS 状态，且可以修改页面上的DOM 和CSS，即时看到结果，省去了在编辑器修改、储存、浏览器查看结果的流程。
Elements 主要可以分为DOM 结构以及元素（Element）内容两个子面板，接下来笔者将会从右侧面板，也就是元素内容面板的CSS Debugging 相关功能开始讲起。
读者们可以搭配Demo页面Elements - CSS来实际操作以下提及的各种功能用法哦。
CSS
内容面板由几个分页组成，而Debug CSS 最常用的就是Styles 分页，元素的Class、Style 相关资讯都在这边一览无遗。
小技巧：点击Styles 面板的规则区块，也就是上图中任意区域，可以新增一条Style，编辑时可用Tab 跳到Value 或下一条Style。
Shadow Editor
box-shadow属性右方会有一个小小的图示，点击后会跳出阴影编辑器，如果原本没有box-shadow，就随意输入一个box-shadow: 0 0 black;，另外也可以切换为outset或inset。
还在用外部的阴影产生器吗？
Color editor
颜色编辑器想必大家都用过，但除了修改颜色以外，还有很多好用的功能，不过Chrome DevTools 没有直接打开Color editor 的方式，最快的方法是随意inspect 一个有颜色的元素或是新增一条Value是颜色的规则。
不过除了调整颜色外，还有以下几个功能。
取色器
左方的图示为取色器，如果想选取的颜色范围比较小如文字，可以把页面放大几倍，避免取到边缘的过渡颜色。
格式转换器
颜色格式可透过右方的上下箭头切换格式，并同时会修改color的值。
Palette
下方的颜色可不是摆好看的，点击右侧icon 可以展开选项来修改要展示的颜色集合：
Page Colors: 从网页现有CSS 中找到的颜色，从这边选颜色的话会与目前网站配色较相近。
Material Design: Google自家产品，没想法就先拿这些试试吧。
Custom: 自订颜色，用右方的加号新增色块，右键点击色块可以移除。
CSS Variables: 就是已定义的值属于颜色的CSS 变数。
Contrast ratio
只有color属性的颜色编辑器有这个功能，文字和背景的对比程度，点开右侧图示会看到颜色区域多了两条白线，分别是AA和AAA，符合AA才算达到最低对比标准，让使用者更舒服，而越大的文字所需的对比度会越低。
在跨越白线的时候通过AA 或AAA 对比标准就会得到勾勾✔️。
Box model
有看到下方由褐、橘、绿、蓝色组成的方形吗？他就是视觉化的Box model，也是CSS 最重要的基础，Computed 分页的最上方也有一个，点击Box model 中的margin、padding 等等可以直接编辑，想不到吧？
另外如果元素有非static的position，就会多一层position可以编辑喔。
小结
Elements面板之CSS篇尚未结束，续集请见Elements - CSS之2