【前端技术文档】chrome调试功能

整  理：曹燕
时  间：2015-12-18
说  明：chrome调试功能的介绍

1.Elements面板——DOMchrome调试功能30

左侧展示了dom树，在某个dom节点上点击右键会出现操作菜单，常用功能：增加属性、编辑属性、以html形式编辑代码、复制css路径、复制Xpath路径、剪切/复制/粘贴/删除代码、设置断点。

左侧底部显示当前节点的所有祖先节点。

右侧面板主要包括5个功能块。①Styles：按权重从大到小顺序显示所选元素的css样式，可以进行修改，页面会实时响应变化；下方是盒模型图；②Computed：所选元素的最终样式，只可读不可修改；③Event Listeners：显示绑定到当前元素的事件监听函数；④Dom Breakpoints：显示dom中设置的断点，便于调试；⑤Properties：显示元素作为dom对象的各个属性。

2.Network面板——请求加载chrome调试功能359

上图分为7列，从左到右分别是Name、Status、Type、Initiator、Size、Time和Timeline。①Name表示加载的文件名；②Status表示状态码（200为请求成功，304表示从缓存读取）；③Type表示文件的MIME Type的类型；④Initiator表示发出这个文件请求的发出者；⑤Size表示文件大小；⑥Time表示每个请求的总时长；⑦Timeline显示了请求和加载情况（Timeline中鼠标移到每个时间条上的时候，会显示整个请求的详细信息）。通过它可以看到哪些请求是同时发出的，哪些请求被阻塞了。Timeline中有一条蓝线和一条红线，蓝线表示DOM Content Loaded事件触发的时间，红线表示 Window onload事件触发的时间。

点击某个请求会显示该请求的具体信息：chrome调试功能725

顶部的选项卡将请求的文件进行了分类，便于查看，如：XHR、JS、CSS、Img、Media、Font、Doc、Websockets和Other。

底部显示了网页请求的整体加载信息，如：请求个数、传输大小、dom结构加载时长、页面加载完成总时长。

3.Sources面板——样式脚本chrome调试功能867

显示所有加载的html、css和js资源，可以实时编辑css或js文件。右侧显示监听、事件绑定以及断点信息。常用于设置断点来调试js。

设置断点调试js可参考：http://segmentfault.com/a/1190000004123527

4.Timeline面板——页面加载chrome调试功能1070

Timeline跟Network有类似的地方，他们都是按照页面的加载时间来统计数据的，不过Timeline统计的数据侧重点不一样。Timeline主要统计了三个数据：Loading，Scripting，Rendering。

点击时间线上的任意位置，可以查看在这个点的详细信息。

5.Profiles面板——CPU信息chrome调试功能1230

Profile记录的主要是CPU和内存占用的信息。点击start按钮，开始记录CPU使用信息，刷新页面，等页面加载完成之后点击stop按钮，完成录制。chrome调试功能1232

上图的左边两列是时间，第一列是self，第二列是total，self表示函数自己的运行时间，不包含调用其他函数的时间，而total表示这个函数运行的总时间。第三列是运行的函数。通过比较时间的百分比可以找出性能差的函数进行优化。

6.Resources面板——所有资源信息chrome调试功能1445

Resources显示所有加载的资源，除了Sources面板中的html/css/js文件外，还包括图片文件；并且还可以查看本地存储、会话存储、cookies信息、缓存等。

7.Audits面板——性能检测优化chrome调试功能1552chrome调试功能1554

Audits面板的作用于pagespeed、Yslow类似，用于检测页面的性能，提出优化建议。点击Run按钮，即可得到页面性能的检测结果和优化建议。

8.Console面板——控制台输出chrome调试功能1649

Cosole可以用于输出信息，常用于调试。支持的一些方法函数如下：

  • log(object[, object, ...])，使用频率最高的一条语句：向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。
  • info(object[, object, ...]) ，向控制台输出一条信息，该信息包含一个表示“信息”的图标，和指向该行代码位置的超链接。
  • error(object[, object, ...])在控制台中输出一条错误信息。
  • warn(object[, object, ...])在控制台中输出一条警告信息。
  • assert([, object, ...]) ，断言，测试一条表达式是否为真，不为真时将抛出异常（断言失败）。
  • dir(object) 输出一个对象的全部属性（输出结果类似于 DOM 面板中的样式）。
  • dirxml(node) 输出一个 HTML 或者 XML 元素的结构树，点击结构树上面的节点进入到 HTML 面板。
  • trace() 输出 Javascript 执行时的堆栈追踪。
  • group(object[, object, ...]) 输出消息的同时打开一个嵌套块，用以缩进输出的内容。调用 console.groupEnd() 用以结束这个块的输出。
  • count([title]) 输出该行代码被执行的次数，参数 title 将在输出时作为输出结果的前缀使用。
  • clear() 清空控制台。

 

 

 

发表评论