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上的<span>标签。

  • 继承样式，继承了被选择元素的祖先元素匹配的CSS样式规则。

styles-annotated.png

图中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上面有一大片。

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

在Elements工具中。能够通过CSS样式的左边checkbox来临时禁用或者激活某条CSS样式，某条样式被禁用后，在代码中相应的CSS样式会被凝视。同理，在代码中被凝视的CSS样式。在Elements工具中，会以被禁用的状态显示出来（比如上图的visibility样式）。

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

201503162102.png

编辑CSS样式

点击CSS样式的选择器、属性名、属性值能够分别对他们进行设置。点击201503161907.png能够插入一条CSS规则，个人认为比較赞的是利用DevTools进行CSS样式改动的时候会依据输入值自己主动补全输入。比如使某个元素不可见的CSS样式「visibility」可能记不太清楚拼写，我们仅仅须要在DevTools里面CSS样式名中输入「v」，DevTools就会帮我们自己主动找出来全部「v」开头的CSS样式。

对于样式的值也是一样，DevTools会自己主动给出相应CSS样式可能的值，通过键盘上下键能够高速进行切换并实时显示到页面上。

201503161919.png201503161922.png

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

201503161931.png

CSS改动历史

须要注意的是，和DOM的改动一样，在DevTools里面进行的全部CSS改动，都是临时的。

这就意味着页面一旦刷新。全部的改动都会丢失。我们写代码时候可能须要重复多次对某些地方进行微调。DevTools提供了一个改动历史查看工具来帮助我们查看当前对页面上CSS以及JavaScript的改动。查看方法非常easy，在DevTools的「Sources」标签以下，右键须要查看改动历史的文件。选择「Local modifications...」就可以。我们能够在改动历史中，看到改动的时间，以及两次改动前后的Diff，还能够对这些改动进行回滚操作。

201503161954.png

201503161953.png

 

顺便说下，假设我们须要让CSS改动真正反映到源码文件里，能够选择增加workspace来实现。

关于workspace，在以后会详细展开。

 CSS盒模型查看

谈到CSS布局，必定会提起CSS的盒模型。

记得学校里上网页设计课的时候，还在用table来进行页面布局，可是放眼望去如今的站点，差点儿都是使用盒模型来布局的。关于盒模型，在书上看到非常多概念性的东西，可是一直对margin、border、padding等概念不是非常熟悉。

通过DevTools的盒模型工具，能够非常直观的帮助我们上手CSS布局。

201503162105.png

 

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

201503162026.gif

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

 

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

（完）

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/gcczhongduan/p/5223008.html