文档介绍：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部分,puted Style、Styles、Metrics、Properties、DOM Breakpoints、Event puted Style显示的是所选元素的最终样式(putedStyle()方法),如果勾选了Show inherited,puted Style中的属性是只读的,不能实时修改,所以主要用来查看元素的最终属性值。
而第二部分Styles估计是用得最多的。这里会显示作用在所选元素的所有css规则,包含css文件中的样式规则,还有user stylesheet和user agent stylesheet的样式。样式按照权重的大小排列,最上面的是权重最高的,下面是权重低的。。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都可以查看。
work
Network的功能是非常实用和强大的,我们能够用它来查看很多信息。
上图分为8列,从左到右分别是Name、Method、Status、Type、Initiator、Size、Time和Timeline。Name表示加载的文件名,Method表示请求的方法,Status表示状态码(200为请求成功,304表示从缓存读取),Type表示文件的MIME Type的类型。Init