Chrome development tools学习笔记(3)

（上次DOM的部分做了些补充，欢迎查看Chrome development tools学习笔记(2)）

利用DevTools Elements工具来调试页面样式

CSS（Cascading Style Sheets层叠样式表）定义了Web页面的表示层，是能够真正做到网页表现与内容分离的一种样式设计语言。本文主要是讲调试工具，关于CSS学习可以参考W3school的CSS部分：http://www.w3school.com.cn/css/index.asp。

DevTools的Elements右边的部分，会按照优先级从高到低显示应用在当前选中元素上的CSS样式：

• 通过style属性（或者DevTools）直接定义在元素上的CSS样式。
• 该匹配的CSS样式规则。例如，「span」会匹配到当前页面HTML上的标签。
• 继承样式，继承了被选择元素的祖先元素匹配的CSS样式规则。

图中1~7对应的说明如下：

1. 和当前元素匹配的CSS选择器和样式。
2. 匹配在同一元素上的多个相同的CSS属性，会先按来源、权重和特异性进行重写覆盖，如果这些优先级都相同，则后定义的属性优先，具体可以参照CSS文档中的层叠顺序说明。在Elements工具中，第一个定义的「color」属性上面打上了删除线，表示它被重写覆盖了。
3. User agent stylesheets（用户代理样式）也会在Elements工具中显示出来，所谓用户代理样式，即浏览器提供的一些默认样式，以前给实习生出过道题目，通过CSS样式来让文字输入text控件在获得焦点时候显示蓝色边框，有的人发现Chrome下面默认text控件获得焦点就会显示一个蓝色边框，其实如果在DevTools下查看就会发现，这里的蓝色边框效果，就是Chrome浏览器设置的用户代理样式，再仔细看的话，像text控件的边框之类的属性，都是通过用户代理样式设置上去的。
4. 开发者定义的CSS样式比用户代理样式优先级高，因此图中开发者定义的div的「display: inline-block;」样式把用户代理样式的「display: inline-block;」重写覆盖了。前面讲到了浏览器会设置很多用户代理样式，在开发中，我们通常使用CSS Reset，即导入一套CSS样式覆盖重写不同浏览器的用户代理样式，以统一页面显示效果。这里的Css Reset用到的就是优先级重写覆盖的原理。
5. 继承的样式显示在「Inherited from [node]」分组下面，单击分组头部的节点名，会跳转到对应的DOM节点。可以去CSS 2.1 properties table查看哪些CSS样式是可被继承的。
6. 「:root body」选择器的特异性比单独的「body」选择器强，因此图中「:root body」的「font-size: 30px」样式覆盖了「body」的样式。
7. 和前一点一样，由于CSS的优先级，「body」选择器的「font-family: Helvetica」样式也被覆盖了。关于CSS重写覆盖的优先级，也不多赘述了，百度google上面有一大片。

在CSS选择器中，逗号「,」被用来表示「或」的关系，即只要满足其中一部分，即被匹配。在Elements工具中，「或」关系的多个选择器中被匹配上的会以黑色字体表示。

在Elements工具中，可以通过CSS样式的左边checkbox来暂时禁用或者激活某条CSS样式，某条样式被禁用后，在代码中对应的CSS样式会被注释。同理，在代码中被注释的CSS样式，在Elements工具中，会以被禁用的状态显示出来（例如上图的visibility样式）。

在实际的项目中，很有可能一个元素上面定义了大量的CSS样式，我们可以通过关键词检索的方式来快速定位到想要查看的CSS样式。

编辑CSS样式

点击CSS样式的选择器、属性名、属性值可以分别对他们进行设置，点击可以插入一条CSS规则，个人觉得比较赞的是利用DevTools进行CSS样式修改的时候会根据输入值自动补全输入。例如使某个元素不可见的CSS样式「visibility」可能记不太清楚拼写，我们只需要在DevTools里面CSS样式名中输入「v」，DevTools就会帮我们自动找出来所有「v」开头的CSS样式。对于样式的值也是一样，DevTools会自动给出对应CSS样式可能的值，通过键盘上下键可以快速进行切换并实时显示到页面上。

点击可以切换元素的状态，和上一篇讲的在DOM节点上右键选择「Force element state」效果是一样的。

CSS修改历史

需要注意的是，和DOM的修改一样，在DevTools里面进行的所有CSS修改，都是暂时的。这就意味着页面一旦刷新，所有的修改都会丢失。我们写代码时候可能需要反复多次对某些地方进行微调。DevTools提供了一个修改历史查看工具来帮助我们查看当前对页面上CSS以及JavaScript的修改。查看方法很简单，在DevTools的「Sources」标签下面，右键需要查看修改历史的文件，选择「Local modifications...」即可。我们可以在修改历史中，看到修改的时间，以及两次修改前后的Diff，还可以对这些修改进行回滚操作。

 

顺便说下，如果我们需要让CSS修改真正反映到源代码文件中，可以选择加入workspace来实现。关于workspace，在以后会具体展开。

 CSS盒模型查看

谈到CSS布局，必然会提起CSS的盒模型。记得学校里上网页设计课的时候，还在用table来进行页面布局，但是放眼望去现在的网站，几乎都是使用盒模型来布局的。关于盒模型，在书上看到很多概念性的东西，但是一直对margin、border、padding等概念不是很熟悉。通过DevTools的盒模型工具，可以很直观的帮助我们上手CSS布局。

 

通过在盒模型中设置不同的值，我们可以很直观的看到margin、border、padding这些CSS属性对于布局的作用。光标移动到盒模型中的不同部分，页面上该部分会以高亮显示。可以在盒模型视图中进行快速的修改，不需要加px单位，修改一样是实时反馈在页面上的。当调整页面上元素位置的时候，可以帮助我们快速知道修改的是上层元素的padding还是当前元素的margin亦或是其他属性。用了DevTools亲自动手尝试后，再看到网上的盒模型介绍，是不是一下子就看懂了？

当设置position为「static」以外的值的时候，margin外面还会有一个position的盒子。

 

 转载自我的技术博客http://www.cc-lab.cn/chrome-dev-tools-3/

（完）