技术好 文收藏程序员开发工具

如何使用Chrome Timeline 工具（译）

2016-07-27  本文已影响13256人  youngBrain1893

【原文地址】https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool
该文章介绍了 Timeline 工具的基本组成以及如何使用该工具对页面事件进行记录，具体的调试细节还得更具读者的具体使用场景和调试目的对数据进行分析得到解决方案，该文章算是对 Chrome Timeline 工具的一个使用说明书。

使用 Chrome DevTools 的 Timeline 面板记录程序运行时的所有行为，并用于加以分析是解决程序性能问题的最好方案。

timeline-panel

目录结构

通过 Timeline 记录页面加载后所发生的各种事件和交互。
在 Overview 区域查看 FPS，CPU 和 网络请求信息
点击 Flame Chart 上的一个事件记录查看其详细信息
放大某一段记录，更利于分析

Timeline panel overview

Timeline 面板由一下 4 个子面板构成：

  1. 控制面板（Controls）
    开启记录，停止记录，配置记录期间需要记录那些内容。

  2. 概括（Overview）
    对页面表现（行为）的一个概述。

  3. Flame Chart
    可视化 CPU 堆栈(stack)信息记录
    在 Flame Chart 面板上你可能看到三根垂直的线，蓝线代表 DOMContentLoaded 事件，绿线代表渲染开始的时间( time to first paint)，红线代表 load 事件。

  4. 详细信息（Detail）
    当有具体事件被选择时，该面板展示这个事件的更多详细信息。如果没有事件被选择，该面板展示当前所选时间段的一些信息。

timeline-annotated

Overview pane

概括区域由一下三个图形记录组成:

  1. FPS. Frames Per Second.
    绿色的柱越高， FPS 值也越高。FPS 图表上方的红色小块指明了长帧(long frame，较慢渲染？)，这些 long frame 可能是卡顿(jank)

  2. CPU. CPU Resources.
    这个面积图(area chart)表明了哪种事件在消耗 CPU 资源。

  3. NET.
    每种不同颜色的条代表一种资源。这个条越长表明获取( retrieve )该资源所花的时间越长。

每个条中的浅色部分代表等待时间（资源请求被发送到收到第一个响应字节的时间），深色部分代表文件传输时间（从收到第一个字节到这个资源完全被下载好）

蓝色 代表 HTML 文件，黄色 代表 Script 文件，紫色 代表 Stylesheets 文件， 绿色 代表 Media 文件，灰色 代表其他资源。

overview-annotated

Make a recording

当记录停止过后，DevTools 会自动去分析那块内容是你最关心的，并且会自动的放大（选择）那块区域。

Recording Tips：

View recording details

当你在 Flame Chart 中选择一个具体的事件，Detail 区域会展示一些关于该事件的额外信息。

details-pane

上图中的一些 tab，比如 __Summay __ 对所有的事件都会有对应的展示信息，其他的一些 tab 只有对于某些特定的事件类型才有展示内容。可以通过查看 Timeline event reference 查看 tab 和事件类型的关系。

Capture screenshots during recording

TImeline 面板还可以在记录期间对页面进行截屏重现，这个特性就像幻灯片查看一样。

如果要对一个页面的进行截屏重现，现在 控制区域(Controls pane) 中勾选 Screenshots，然后开始记录，完成记录后，页面的截屏会展现在 概述面板(Overview pane)下方。

timeline-filmstrip.png

将鼠标移动到 概述区域 或 截屏 上可以查看到当前点上页面截屏放大的图像，左右移动鼠标来模拟记录期间页面的动态效果。

Profile JavaScript

在开始记录之前，在控制区域(Control pane)勾选 JS Profile，这样记录的时候就会去记录 JavaScript stacks 相关信息。这时你的 Flame Chart 中将会记录任何一个被调用过的方法。

js-profile

Profile painting

和 Profile Javascript 一样，你需要先在控制区域勾选 Paint 来在后面的记录中记录 Paint 事件，此时，当你在记录结果中选择一个 Paint 事件后，Paint Priflter 这个 tab 将会出现在 Details 区域，该 tab 将会展示更多当前关于当前事件的信息。

paint-profiler

Rendering settings

打开 DevTools 的主菜单，选择 More tools > Rendering settings来配置一些 rendering settings，这些可能会对调试渲染问题很有帮助。开启 rendering settings 后，会在 Console drawer 旁边添加一个 Rendering tab。如果 Console drawer 没有展现在页面上，可通过 ESC 使其展示出来。

rendering-settings

Search records

查看记录的事件时，你可能只希望关注于某一类型的事件，比如你只是希望查看每个 Parse HTML 事件的详细信息。

通过使用 Cmd + F/Ctrl + F快捷键，在 Timeline 区域中打开 搜索工具栏，在搜索工具栏中输入你想分析的事件类型，比如 Event.

工具栏只会将搜索条件作用在当前选择的时间表内的事件，在时间表外的事件都不会显示在结果中。

搜索工具栏中的上下箭头可以帮助你按事件发生的先后顺序查看过滤后的事件的详细信息。第一条记录代表当前选区最先发生的事件，最后一条记录代表当前选区最后发生的事件。每次点击上下箭头，就会选择一个新的事件，所以你可以在 Details 面板查看这个事件的具体信息。（点击上下箭头和在 Flame Chart 选择一个事件是等效的）

find-toolbar

Zoom in on a Timeline section

指定某一个 Recording 结果区域，将会更有利于对记录数据的分析。可以通过在 Overview 区域选择某一块内容，来定位到某一块 recording 数据。当在 Overview 区域选择某一块内容后，Flame Chart 会自动定位到匹配的区域，并更清楚的展示对应内容。

zoom

可以通过下面的方式来指定选择一块区域：

一旦你选择了某一块内容，你可以使用 W, A, S, D 键来调整选区，W 和 S 用来放大放小选取，A 和 D 分别向左向右移动选区。（测试中没发现具体怎么使用，通过手动选区来实现这些功能）

Save and load recordings

你可以通过在 概述面板 或 Flame Chart 区域点击鼠标左键，在弹出的菜单中选择相关选项，实现Save 和 Load recordings。

save-open
上一篇下一篇

猜你喜欢

热点阅读