Chrome开发工具 技巧和窍门

色变为红色，时间轴也会开始捕获你的 app。在你的 app 中完成几个动作后再次按下按钮来停止录制。帧模式让你洞察到进行中的任务，你的应用程序会按帧（更新）在屏幕上显示。在这个模式中，阴影的垂直区域标尺对应重新计算的样式，合成等等。每一个垂直长条的透明部分表示空闲时间，至少是在你页面上的空闲时间。举个例子，你的第一帧需要 15 毫秒，但是执行第二帧需要 30 毫秒。一个常见的情况是帧的刷新率是同步的，所以第二帧将稍微比 15 毫秒多一点去渲染。这里，3 号帧丢失了 “true” 硬件帧并且已经提交给了后面一帧，因此第二帧的时长其实相当于双倍了。如果你的应用并没有很多的动画在其中，并且在执行输入事件的时候浏览器需要执行大量重复的动作，那么使用帧是个好办法。当你有足够的时间在帧内执行完这样的事件，那么你的应用响应能力会更高，并且将会有良好的用户体验。当我们设定为 60 fps时，我们有最多 16.66 ms来做点事情。这点时间并不算多，所以让尽可能提升你动画的性能是十分重要的。更多：利用时间轴开发工具提升性能|开发者工具文档使用警告定位到指定的布局事件在时间轴中，如果你在记录视图中看见一个黄色的图标，就说明你的一些代码触发了强制/同步布局事件。你希望避免这些不必要的布局触发器，因为他们能够显著影响到你的页面的性能。更多：时间轴警告是一种性能的味道 | G+通过别人来分享和分析一段时间轴记录你可以浏览和并且跟其他开发者分享时间轴，这要感谢一个有用的导入/导出插件。使用 Ctrl + E 或者 Cmd + E 来开始/结束记录然后在时间轴上右键，选择 Save Timeline data。该菜单还支持重新浏览已经导出的时间轴数据。给时间轴记录做注释使用 console.timeStamp() 函数可以给你的时间轴记录添加注解。这就帮你把你的 web 中的代码和另外一个窗口或者浏览事件关联在了一起。更多：开发者工具控制台 API-制作时间轴 | 开发者文档你的应用可以通过调用 console.timeStamp() 函数来对你的时间轴记录进行注释。这就使你可以轻易的将代码和另一个窗口以及浏览事件绑定在一起。在下面的记录中，时间轴被标记为 “Adding Result”。下面来看看通过使用控制台来制作时间轴的例子。FPS 计数器/HUD 展示real-time FPS 计数器是一个用来视图化帧速和躲闪的工具。该工具可以通过进入设置菜单然后选中 ”Show FPS meter“ 来使用。当这个工具开始运转，你将会看到在右下角有一个黑色的盒子，同时还有帧的统计数字。该计数器可以在实时编辑中用于诊断你的页面为什么掉帧，而不必在时间轴视图间来回切换。更多：使用开发者工具的绘制模式来分析长时间绘制事件 | HTML5Rocks需要谨记的是如果你只是追踪 FPS 计数器可能会使你没有注意到的断断续续的跳帧现象。在使用 content 的时候一定要注意。如果 FPS 在桌面上的效果与在设备上的效果不一样，这也没有意义。所以要特别的小心在性能上的配置。更多配置使用时间轴的实用技巧，请跳转到利用时间轴来进行性能描述：一个只要应用运行就会记录并分析所有活动的地方，这是开始调查你的应用性能问题的最好的地方。深入了解帧速，记录中生成的几种类型以及 Chrome 计算页面元素的位置和大小时的布局流程。概述通过 3 snapshot 技术来查找 Javascript 内存漏洞打开开发者工具选择概述面板在你的页面进行一些引起漏洞的操作生成一个新的堆快照重复步骤 2 和步骤 3 三次选择最后的堆快照将过滤器从”所有对象“改为”快照 1 和 2 之间的对象“你现在应该已经可以看到漏洞对象的集合。你可以选择其中的一个并在对象保留树中来查看其包含内容的列表，这有助于找到泄露的原因。更多：BloatBusters-在 Gmail 中消除内存漏洞理解堆检测中的节点红色节点是处于生命周期的，因为他们是分离的 DOM 树中的一部分，并且树中有一个节点被 JavaScript （或者是一个闭包变量，一些属性）引用。黄色节点表示一个从 DOM 节点，引用的一个对象的属性或者一个数组元素。应该有一系列从 DOM 窗口到元素的属性(比如 window.foo.bar[2].baz)。更多所：理解堆概述中的节点 | G+理解在 CPU 概述中的时间开销在 CPU 概述中，”（idel）“，时间是当前标记的。花费在非浏览器中的程序是（”program“）。堆配置视图的更多了解一个我们经常问的问题：在开发者工具 > Profile > Heap sanpshot 中，Comparison，Dominator，Containment 以及 Summary 视图的区别是什么。这些视图提供了对分析器中数据的更多视角，就像下面一样：Comparsion 视图通过显示已经被垃圾回收器正确清理的对象来帮助你追踪内存漏洞。通常用于比较某次操作前后的两份（或更多）内存快照。具体内容是通过检查变化区释放的内存和引用计数来确认内存泄漏的存在以及造成泄露的原因。Dominators 视图用于确认垃圾回收正常工作时出现的本不该存在于对象上的引用（也就是说他们）。Summary 视图可帮助您在利用构造器名称分组的基础上捕获对象（和它们的内存使用）。这个视图通常对追踪 DOM 漏洞很有帮助。Containment 视图提供了一个更好的对象构建视图，它帮助我们通过全局的命名空间（也就是窗口）来分析对象，找出是什么是他们一直保持存在。它允许分析程序闭包并从底层深入你的对象。更多：驯服独角兽：在谷歌浏览器中对 JavaScript 的内存的简单剖析更多内存剖析技巧，请参考内存性能剖析:该文章会叫你如何使用分析堆内存来找出你的应用中的内存漏洞可以深入查看不同视图的数据 - 包括 Summary 视图，Comparison 视图，Containment 视图以及 Dominator 视图。源在 DOM 修改器上调试右键点击一个元素然后选中 “Break on Subtree Modification”:不论什么时候脚本穿过了元素并且修改了他们，调试器都能够自动的运转起来，以便告诉你正在发生什么：另外值得一提的是，暂停内嵌样式属性的修改，对于调试 DOM 动画非常有用 。追踪未捕获异常从 Sources 面板中，双击暂停脚本执行按钮会在未捕获异常发生时中断代码执行，并保留调用堆栈和应用程序的当前状态-有些人将之称为紫色暂停。使用 console.log 的条件断点活动我们知道开发者工具支持条件断点，只需要你在想要的行上点击一下设置一个断点，就跟普通的设置断点一样。你可以在某一行右键然后选择 "Edit Breakpoint"，然后就出现了