使用强大的Chrome开发者工具——CSS篇

这次以 http://segmentfault.com/ 这个在程序员界蛮火的站点为研究对象吧,把它比作国内的stackoverflow应该不为过。下面进入正题:

Chrome开发者工具中CSS部分最常用的区域是Elements面板右侧的Styles标签,以及隔壁频率次之的Computed标签,有时候还会去查询Sources下的css文件内容。

1.查询节点的CSS盒模型以及计算后的最终各CSS属性值

这个最简单方便,只要在Elements面板中找到你想查询的节点并点击选中它,然后在右侧选择Computed标签,下面紧接着就是盒模型图,很直观,再接着往下就是css中设置过的所有属性经过计算的最终值。最底部还有个Filter过滤文本框,当属性列表比较多的时候,可以用关键字过滤。上个图:QQ20150327-1

2.调试CSS属性

我们把右侧的标签切换到Styles,我当前选择的是页面上部的【今天,你在开发时遇到了什么问题呢?】这个节点,上图QQ20150327-2

下面灰色背景的是浏览器内置的样式。

那么如何调试CSS呢,有如下几种方式:

1)切换式

鼠标移到已经设置的css属性上,在属性名前会出现复选框,一般初始化时都是选中状态(除非你的css文件里有属性注释,那么就是未勾选状态),比如我们用鼠标点击font-size属性前的复选框,页面上的标题字体立刻变小了(由底部的css得知是14px),再点击复选框,字体又变大了,即这条属性设置又生效了。其他的属性调试类似,都是立即见效。

2)修改属性值

还是修改字体大小好了,我们点击font-size的属性值18px,立刻进入到了编辑状态,像这类属性值是带数字的,处于编辑状态时,我们都可以通过上下方向键来增加或减小属性值,可以一下下按,也可以长按,还可以结合shift+上/下方向键,是以10为jump单位,pageup/pagedown + shift + 上/下方向键,以100为jump单位,比如我这里设置了58px的字体,如图:

QQ20150328-2

3)添加新属性

鼠标移到想添加新属性的CSS选择器大括号内的某一行,点击左键,立刻会新起一行,并进入编辑状态,填写你想添加的新属性名,Chrome会渐进提示,按下回车或tab,会进入属性值的设置状态,也会渐进提示,属性值完后,页面也会实时生效。比如我这里给标题加了个红色边框,如图:QQ20150328-1

注:a.如果我们在element.style下新增css属性,那么即是为该元素添加内联样式。

b.从上到下,选择器权重越来越低,到最后经常是伪类或继承的css属性了。

4)添加新的选择器及其属性

点击Styles标签下右上角的“+”按钮,在下方会立即新增一个与当前节点相对应的<标签名><class1><class2…>这样的选择器并处于编辑状态,大括号中没有内容,等待我们去添加新属性。比如我们这里添加了一个新选择器:

QQ20150328-3

 

若新的选择器与当前节点不匹配,此选择器将变成半透明状,表示未选中,好贴心~

5)设置:active/:hover/:focus/:visited状态

点击刚才“+”号右边的鼠标加虚线框的按钮,下方会出现这四个状态的复选框,可根据需要开启/关闭他们的状态。实时生效奥,比如我这里开启focus状态:

QQ20150328-4

还有一个方法可以达到同样的效果:在左边节点上右键->选择【Force Element State】,子菜单中也是这四个状态,可根据需要切换。

6)从Styles中的选择器跳转至Source中的CSS文件

有这样一个典型的场景:想要查看页面上有个通过CSS3-animation实现的动画代码,animation是需要设置key frames的名字的,而Styles标签中是看不到相应@key frames代码的。此时我们可以点击该animation所在的选择器右边的css文件名,将直接跳转至Source中的对应CSS文件,在这里可以查看整个css文件的内容,在这里搜索(ctrl/cmd + F)key frames的名字就能查到它啦!如果代码是压缩过的,可以点击下方的一对大括号按钮,来使代码格式化,好贴心奥~