专注于
IT技术和业内交流

Chrome DevTools — 如何使用Timeline

运用Chrome DevTools中的Timeline面板来记录和分析应用程序中运行的所有活动。这是在应用程序中开启调查感知的性能问题的最佳场所。

Timeline tool

Timeline面板概述

Timeline面板包含四个窗格:

  1. Controls:开始记录、停止记录以及配置记录过程中捕获的信息。
  2. Overview:页面性能的高度总结。更多详细信息见下方。
  3. Flame Chart:CPU栈跟踪的可视化。
    你可以在Flame Chart上看到一到三个点和垂直的线。蓝线代表DOMContentLoaded事件。绿线表示第一次绘画的时间。红线表示 load【加载】时间 。
  4. Details:当选择一个事件,这个窗格显示有关该事件的详细信息。当没有选择事件的情况下,这个窗格显示有关所选时间框架的信息。

annotated timeline panel

概述窗格

Overview 包括三种图表:

  1. FPS:每秒的帧数。绿色条状图越高,每秒的帧数越高。FPS图上方的红色方块表示长帧。
  2. CPU:CPU资源。 这个area chart表明什么类型的事件消耗CPU资源。
  3. NET:每种颜色条状图代表一种资源。条状图越长,获取资源的时间就越长。每个条状图较亮部分代表等待时间(发出资源请求到第一个字节被下载的时间)。较暗的部分代表传送时间(下载第一个字节到最后一个字节的时间)。

    彩色条代表的含义如下:

    • HTML文件是 蓝色
    • Scripts是 黄色
    • Stylesheets)是紫色
    • Media文件是绿色
    • 其他资源是
      灰色

overview pane, annotated

记录

想要记录page load(页面加载),你可以打开Timeline面板,打开想要记录的页面,然后重新加载页面。Timeline 面板会自动记录页面加载情况。
想要记录页面交互,同样打开 Timeline面板,然后点击
Record(record button)按钮或者用快捷键键入 Cmd+E (Mac)或Ctrl+E
(Windows / Linux)来启动记录。在记录期间,Record 按钮会变红。执行页面交互,然后再次点击 Record 按钮或快捷键键入就可以停止记录。

当记录结束时,DevTools推测出哪部分记录与你相关后,会自动缩放到那部分。

记录注意事项

  • 尽可能短地缩短记录事件。越短的记录通常越容易分析。
  • 避免不必要的动作。尽量避免除想记录和分析外的多余的动作(鼠标点击、网络加载)。
    例如:当你想要记录发生在点击登录后的事件时,不要滚动页面,下载图片等等。
  • 禁用浏览器缓存。当记录网络操作时,在DevTools的设置面板或者
    Network conditions drawer禁用浏览器缓存是个不错的主意。
  • 禁用扩展程序。Chrome应用扩展会在Timeline里对你的应用产生一些干扰。你可以以以隐身模式打开Chrome窗口,或创建一个新的
    Chrome用户用来测试。

查看记录详情

当你在Flame Chart选中一个事件,Details面板会展示该事件相关的详细信息。

details pane

有些细节在所有类型的事件中均有呈现,比如Summary。其他细节仅仅只适用于某些事件类型。参见Timeline event
reference
中每种记录类型的详细内容。

在记录过程中捕获屏幕截图

Timeline面板在页面加载的时候能够捕获屏幕截图。这种特性叫做Filmstrip

在你做捕获屏幕截图记录之前打开Controls 面板上的Screenshots复选框。 屏幕截图展示在Overview面板下方。

timeline recording with filmstrip

将鼠标悬停在ScreenshotsOverview面板上,可以查看整个记录中某个点放大的截图。向左和向右移动鼠标可以模拟出当前时间段内的记录动态图。

//此处原文有视频

JS profiler

在时间轴记录中记录捕获JavaScript栈之前打开JS Profile复选框。当JS profiler启动后,你的flame chart显示出调用的每个JavaScript函数。

flame chart with JS profile enabled

painting事件

在获取到更多关于Paint事件的记录之前启动Paint复选框。当paint profiling启动后,你点击Paint事件,一个新的Paint Profiler标签在Details中显示出来。

paint profiler

渲染设置

当调试paint的问题时,可以打开DevTools主菜单,选择 More tools > Rendering settings
进入 rendering settings来设置。
打开rendering settings的标签在Console drawer的旁边 (当它处于隐藏状态的时候,可以点击
esc就可以看到drawer)。

rendering settings

搜索记录

当你想要重点看某个类型的事件时,或者你想要查看每个Parse HTML事件的详细情况。

点击Cmd+F (Mac) 或 Ctrl+F
(Windows / Linux) 此时Timeline会打开一个搜索框,键入你想查找事件类型名称,比如 Event

这个搜索框搜索的内容仅仅适用于当前选定的时间段。任何选定时间段之外的事件都不在搜索结果记录中。

上下移动箭头可以按照时间顺序查看结果。所以,第一个结果代表选定时间段内最早的事件,而最后结果代表最后一个事件。你每次点击上下箭头,就会选中一个新事件,因此,可以在
Details板块查看详细情况。点击上下箭头的效果等同于在Flame Chart面板点击一个事件。

find toolbar

放大某个时间段

为了更简单分析记录,你可以放大记录的某一段概览。可以运用Overview实现该功能,放大操作后,在该区域的Flame Chart自动放大。

zoom in on a section of a timeline recording

放大时间段,可以按照以下做法:

  • Overview区域,用鼠标拖动一个时间段。
  • 在规则区域调整灰色条。

当选择某个区域时,你也可以用W,A,
SD键来调整该区域。 W
S表示分别在该区域放大和缩小。A
D分别表示向左和向右移动。

保存和加载记录

你可以通过在Overview or Flame Chart点击鼠标右键和选择相关选项来保存和打开记录。

save and open recordings

本文由朱怡霏翻译、@海欧校验,感谢大家的参与.如有错译、漏译请留言我们会及时更正。

未经允许,不得转载本站任何文章:代码山 » Chrome DevTools — 如何使用Timeline

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们