chrome调试功能详细分析.docxVIP

Chrome调试大全2012年3月25日?似水流年 12 浏览?发表评论?阅读评论作为一名前端开发者，打交道最多的可能是和浏览器。市面上各种浏览器多不胜数，主流的有Chrome，Firefox，Safari，IE，Opera，非主流的如360，遨游，QQ浏览器，搜狗浏览器，据说淘宝最近也要出浏览器了。不过个人最喜欢的还是Chrome，因为它的简洁和快速，还有功能的强大。FF什么的我觉得它已经慢得跟不上时代了:-D，这是个人意见，喜欢FF的朋友尽管吐槽。虽然IE和Firebug的开发工具都用过，但始终觉得不如Chrome顺手。下面就详细介绍一下Chrome的开发人员工具。Chrome一共有8个功能子集。如下图:1、Elements：这个部分主要是显示实时的DOM树。在页面中右键单击审查元素，就会出现Elements的面板。左边就展示的是DOM树，在一个DOM节点上点击右键就会出现一个菜单，一共分为4部分，第一部分是添加和编辑节点的属性，例如class等。第二部分是编辑节点，点击Edit as HTML，就可以像在编辑器中一样编写代码，Copy as HTML就是复制代码了，Delete node是整个删除节点。第三部分是添加DOM的断点。如果我们添勾选了任何一个，就会在右边栏的第五部分DOM breakpoints出现，这里对应的是JS的对DOM的操作，如果出现对应的事件（节点子树改变、节点属性改变、节点被移除），那么JS就会在相应的事件监听函数那里挂起，这个在后面JS设置断点再讲解关于断点的东西。最后一部分是文字换行，貌似用处不大。底部显示的是一个当前元素的所有祖先元素。例如，上图中当前元素是body，它的祖先元素是html（也是父级元素），如果html有父级元素，仍然会显示html的父级元素（这里例子有点特殊）。接下来看看右边栏。一共有6部分，分别是：Computed Style、Styles、Metrics、Properties、DOM Breakpoints、Event Listeners。Computed Style显示的是所选元素的最终样式（对应JS中的getComputedStyle()方法），如果勾选了Show inherited，将会显示此元素的所有style属性，Computed Style中的属性是只读的，不能实时修改，所以主要用来查看元素的最终属性值。而第二部分Styles估计是用得最多的。这里会显示作用在所选元素的所有css规则，包含css文件中的样式规则，还有user stylesheet和user agent stylesheet的样式。样式按照权重的大小排列，最上面的是权重最高的，下面是权重低的。最上面的element.style是元素的内嵌样式。user stylesheet是用户样式，不过一般不会有人自定义样式。user agent stylsheet是浏览器的默认样式，通常的css reset就是将这个reset掉。背景不是灰色的部分是可以修改的样式，我们对样式的修改会实时显示在页面中，这就省去了我们为了修改几个像素去修改css文件然后保存刷新的过程，同时也可以禁用和启用某些样式。在Styles的标题栏有一个鼠标箭头的图标，点击之后就会出现伪类，因为一般情况下不会出现伪类的css规则。第三部分Metrics显示了元素作为盒模型的各个参数。第四部分Properties显示了元素作为DOM对象的各个属性。例如上图中所示，这里从上到下是一个继承的关系。最上面是一个HTMLDivElement的实例，第二个是HTMLDivElement的类。第三个，是HTMLElement类，HTMLDivElement类继承自HTMLDivElement类。接着分别是Element类，Node类，和Object类。如果选择不同的节点类型，就会出现不同的继承关系。第四部分是DOM Breakpoints，这个后面再细讲。最后一个是Event Listeners，这个显示了绑定到当前元素的事件监听函数，而且会显示事件冒泡或捕获（即能够响应此事件的所有元素）。2、Resources这个面板会显示所有加载的资源，如上图所示。底部的中间有个铅笔图标的按钮，点击之后就可以实时编辑css或者js文件。其他例如Local Storage、Session Storage、Cookies都可以查看。3、NetworkNetwork的功能是非常实用和强大的，我们能够用它来查看很多信息。上图分为8列，从左到右分别是Name、Method、Status、Type、Initiator、Size、Time和Timeline。Name表示加载的文件名，Method表示请求的方法，Status表示状态码（200为请求成功，304表示从缓存读取），