前言
Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化，简单来说它就是Timeline的数字化版本。它的功能选项卡不是很多（只有三个），操作起来比较前面的几块功能版本来说简单，但是里面的数据确很多，很杂，要弄懂它们需要花费一些时间。尤其是在内存快照中的各种庞杂的数据。在这篇博客中卤煮将继续给大家分享Chrome开发者工具的使用经验。如果你遇到不懂的地方或者有不对的地方，可以在评论中回复卤煮，文章最后卤煮会最后把秘籍交出来。下面要介绍的是Profiles。首先打开Profiles面板。
Profiles界面分为左右两个区域，左边区域是放文件的区域，右边是展示数据的区域。在开始检测之前可以看到右边区域有三个选项，它们分别代表者不同的功能:
1.(Collect JavaScript CPU Profile)监控函数执行期花费的时间
2.(Take Heap Snapshot)为当前界面拍一个内存快照
3.(Record Heap Allocations)实时监控记录内存变化(对象分配跟踪)
一、Collect JavaScript CPU Profile（函数收集器）
一个快照可以有多个试图，在左边区域的右上角我们可以看到点击下拉菜单可以得到四个个任务视图选项：
他们分别代表：
Summary(概要) - 通过构造函数名分类显示对象；
Comparison(对照) - 显示两个快照间对象的差异；
Containment(控制) - 探测堆内容；
Statistic(图形表)-用图表的方式浏览内存使用概要Comparison是指对比快照之间的差异，你可以首先拍一个快照A，操作网页一段时间后拍下另外一个快照B，然后在B快照的右边距区域的左上角选择该选项。然后就可以看到对比图。上面显示的是每个列，每一项的变化。在对照视图下，两个快照之间的不同就会展现出来了。当展开一个总类目后，增加和删除了的对象就显示出来了：
尝试一下官方示例帮助你了解对比的功能。
你也可以尝试着查看Statistic选项，它会以图表的方式描述内存概况。
三、Record Heap Allocations.（对象跟踪器）
好了，第二个功能也介绍完了，最后让我们来瞧瞧最后一个功能Record Heap Allocations.这个功能是干啥的呢。它的作用是为为我们拍下一系列的快照（频率为50ms），为我们检测在启用它的时候每个对象的生存情况。形象一点说就是假如拍摄内存快照的功能是照相那么它功能相当于录像。当我们启用start按钮的时候它便开始录像，直到结束。你会看到左侧区域上半部分有一些蓝色和灰色的柱条。灰色的表示你监控这段时间内活跃过的对象，但是被回收掉了。蓝色的表示依旧没有没回收。你依旧可以滑动滚轮缩放时间轴。
对象跟踪器功能的好处在于你可以连续不断的跟踪对象，在结束时，你可以选择某个时间段内（比如说蓝色条没有变灰）查看期间活跃的对象。帮助你定位内存泄露问题
博文已经迁移至新地址。
