打开 “捕获设置 ”菜单。 请参阅 显示录制设置 。

打开 “禁用 JavaScript 示例 ”复选框。

录制页面。

以下两个图显示了禁用和启用 JavaScript 示例之间的差异。 禁用采样时，录制 的主部分要 短得多，因为它省略了所有 JavaScript 调用堆栈。

禁用 JS 示例时的录制示例：

打开 JS 示例时录制的示例：

录制时限制网络

若要在录制时限制网络，请执行以下操作：

打开 “捕获设置 ”菜单。 请参阅 显示录制设置 。

将 “网络 ”设置为所需的限制级别。

录制时限制 CPU

若要在录制时限制 CPU，请执行以下操作：

打开 “捕获设置 ”菜单。 请参阅 显示录制设置 。

将 CPU 设置为所需的限制级别。

限制相对于计算机的功能。 例如， 2 倍减速 选项会使 CPU 运行速度比平常慢 2 倍。 DevTools 不会真正模拟移动设备的 CPU，因为移动设备的体系结构与台式机和笔记本电脑的体系结构大不相同。

启用高级绘制检测

若要查看详细的绘制检测，请参阅：

打开 “捕获设置 ”菜单。 请参阅 显示录制设置 。

选中 “启用高级油漆检测 (慢) ”复选框。

若要了解如何与绘制信息交互，请参阅 查看层 和 查看画图探查器 。

保存录制内容

若要保存录制内容，请右键单击录制内容，然后选择“ 保存配置文件 ”。

若要加载录制内容，请右键单击录制内容，然后选择“ 加载配置文件 ”。

清除上一个录制内容

进行录制后，单击“ 清除录制 ( ) 从 性能 工具清除该录制。

分析性能记录

记录运行时性能 或 记录负载性能 后， 性能 工具会提供大量数据来分析刚刚发生的情况的性能。

选择录制的一部分

在 “概述 ”中向左或向右拖动鼠标以选择录制的一部分。 概述 是包含 FPS 、 CPU 和 NET 图表的部分。

若要使用键盘选择部分，请执行以下操作：

选择 “主 ”部分的背景，或它旁边的任意部分（例如 交互 、 网络 或 GPU ）。 此键盘工作流仅在其中一个部分处于焦点时有效。

W 使用 、 A 、 S D 键可以分别放大、向左移动、缩小和向右移动。

使用触控板选择部分：

将鼠标悬停在 “概述 ”部分或 “详细信息 ”部分上。 “ 概述 ”部分是包含 FPS 、 CPU 和 NET 图表的区域。 “ 详细信息 ”部分是包含 “主要 ”部分、 “交互” 部分等的区域。

使用两根手指向上轻扫以缩小，向左轻扫以向左移动，向下轻扫以放大，然后向右轻扫以向右移动。

若要在 “主 ”部分或任何相邻区域滚动长火焰图，请在向上和向下拖动的同时单击并按住。 向左和向右拖动以移动所选录制部分。

按 Ctrl+F (Windows、Linux) 或 Command+F (macOS) 打开 性能 工具底部的搜索框。

导航与查询匹配的活动：

单击“ 上一 () ” 和“ 下一步 ( ) ”按钮。

若要选择下一个活动，请按 Enter 。 若要选择上一个活动，请按 Shift+Enter 。

修改查询设置：

若要使查询区分大小写，请单击“区分 大小 写 (区分 ) ”按钮。

若要在查询中使用正则表达式，请单击“ 正则表达式 ( ) 按钮。

若要隐藏搜索框，请单击“ 取消 ”。

查看main线程活动

使用 Main 部分可以查看在页面main线程上发生的活动。

选择事件，在 “摘要 ”选项卡中查看有关该事件的详细信息。DevTools 概述了所选事件。

DevTools 使用火焰图表示main线程活动。 x 轴表示随时间推移的录制。 y 轴表示调用堆栈。 顶部的事件会导致其下面的事件。

在上图中，事件 click 导致 Function Call 第 53 行中的 activitytabs.js 。 下面 Function Call ，查看匿名函数是否已运行。 匿名函数请求 ， a 后者请求 ， wait 后者请求 。 Minor GC

DevTools 为脚本分配随机颜色。 在上图中，来自一个脚本的函数请求为浅绿色。 来自另一个脚本的请求颜色为米色。 深黄色表示脚本活动，紫色事件表示呈现活动。 这些深黄色和紫色事件在所有录制中都是一致的。

如果要隐藏 JavaScript 请求的详细火焰图，请参阅上面的 禁用 JavaScript 示例 。 禁用 JS 示例时，仅显示上图 中的和 Function Call 等 Event: click 高级事件。

查看表中的活动

录制页面后，无需仅依赖 Main 部分来分析活动。 DevTools 还提供三个表格视图用于分析活动。 每个视图提供对活动的不同视角：

若要查看直接花费的时间最多的活动，请使用 “自下而上 ”选项卡。

若要查看导致最多工作的根活动，请使用 “调用树 ”选项卡。

若要查看活动在录制期间发生的顺序，请使用“ 事件日志 ”选项卡。

在新窗口或 选项卡中打开“活动选项卡演示 ”网页。 活动选项卡 是 性能 工具底部的 “自下而上 ”、“ 调用树 ”和“ 事件日志 ”选项卡。 这些选项卡显示根活动。

根活动 是导致浏览器执行某些工作的活动。 例如，单击网页时，浏览器会将活动 Event 作为根活动运行。 该 Event 活动可能会导致其他活动（例如处理程序）运行。

在 Main 部分的火焰图中，根活动位于图表顶部。 在 “调用树 ”和“ 事件日志 ”选项卡中，根活动是顶级项。

有关根活动的示例，请参阅下面的 “调用树”选项卡 。

“Bottom-Up”选项卡

在新窗口或 选项卡中打开“活动选项卡演示 ”网页。

使用“ 自下而上 ”选项卡可以查看哪些活动直接占用的聚合时间最多。

“ 自下而上 ”选项卡仅在录制的选定部分显示活动。 请参阅 选择录制的一部分 ，了解如何选择部分。

在上图 的主 节火焰图中，可以看到几乎所有时间都花费了运行 Parse HTML 。 上图的“ 自下而上 ”选项卡中的顶部活动是 Parse HTML 。 在“ 自下而上 ”选项卡中，下一个开销最大的活动是 Layout 。

“ 自用时间 ”列表示所有事件中直接在该活动中花费的聚合时间。

“ 总时间” 列表示在该活动或任何子项中花费的聚合时间。

“调用树”选项卡

在新窗口或 选项卡中打开“活动选项卡演示 ”网页。

使用“ 调用树 ”选项卡可以查看哪些 根活动 导致工作最多。

“ 调用树 ”选项卡仅在录制的选定部分显示活动。 请参阅 选择录制的一部分 ，了解如何选择部分。

在上图中， “活动 ”列中的顶级项（如 Evaluate Script 和 Parse HTML ）是根活动。 嵌套表示调用堆栈。 例如，在上图中， Parse HTML 它导致了 Evaluate Script 导致 Compile Script 和 (anonymous) 。

自我时间 表示在该活动中直接花费的时间。 “总时间 ”表示在该活动或任何子项中花费的时间。

单击“ 自用时间 ”、“ 总时间 ”或“活动 ”，按该列对表进行排序。

使用 “筛选器 ”文本框可按活动名称筛选事件。

默认情况下，“ 分组 ”菜单设置为“ 无分组 ”。 使用“ 分组 ”菜单可以根据各种条件对活动表进行排序。

单击“ 显示最重的堆栈 ( ) 以显示 活动 表右侧的另一个表。 单击某个活动以填充 “最重的堆栈 ”表。 “ 最重堆栈 ”表显示所选活动的哪些子项运行时间最长。

“事件日志”选项卡

使用“ 事件日志 ”选项卡可按录制期间发生的顺序查看活动。

“ 事件日志 ”选项卡仅在录制的选定部分显示活动。 请参阅 选择录制的一部分 ，了解如何选择部分。

“ 开始时间” 列表示该活动相对于录制开始的时间点。 例如，上图中所选项目的开始时间 175.7 ms 意味着活动在录制开始后 175.7 毫秒开始。

“ 自用时间 ”列表示直接在该活动中花费的时间。

“总时间 ”列表示直接在该活动或任何子项中花费的时间。

单击“ 开始时间 ”、“ 自用时间 ”或“ 总时间 ”，按该列对表进行排序。

使用 “筛选器 ”文本框可按名称筛选活动。

使用“ 持续时间 ”菜单筛选掉花费的时间小于 1 毫秒或 15 毫秒的任何活动。 默认情况下，“ 持续时间 ”菜单设置为 “全部 ”，这意味着将显示所有活动。

禁用“ 加载 ”、“ 脚本 ”、“呈现” 或“ 绘制 ”复选框，以筛选出这些类别中的所有活动。

查看 GPU 活动

在 GPU 部分中查看 GPU 活动。

查看光栅活动

在“光栅”部分中查看 光栅 活动。

使用 “交互” 部分可查找和分析录制期间发生的用户交互。

交互底部的红线表示等待main线程所花费的时间。

单击交互，在 “摘要 ”选项卡中查看有关该交互的详细信息。

分析每秒帧数 (FPS)

DevTools 提供了多种方式来分析每秒帧数：

左行是事件组（ Connection Start 含）的所有内容。 换句话说，它是之前 Request Sent 的所有内容，独占。

条形图的浅部分是 Request Sent 和 Waiting (TTFB) 。

条形图的深色部分为 Content Download 。

右行实质上是等待main线程所花费的时间。 这不会在“ 计时 ”选项卡中表示。

请求的 www.bing.com 行栏表示形式：

网络 工具：

查看内存指标

打开“ 内存 ”复选框，查看上次录制中的内存指标。

DevTools 在 “摘要 ”选项卡上方显示新的 “内存” 图表。 NET 图表下方还有一个名为 HEAP 的新图表。 HEAP 图表提供的信息与 内存 图表中的 JS 堆 线相同。

图表上的彩色线条映射到图表上方的彩色复选框。 清除复选框以在图表中隐藏该类别。

图表仅显示当前选定的录制区域。 例如，在上图中， 内存 图表仅显示从大约 400 毫秒标记到 1750 毫秒标记的内存使用情况。

查看录制的一部分的持续时间

分析 “网络 ”或“ 主 ”等部分时，有时需要更准确地估计某些事件花费的时间。 按住 Shift ，单击并按住，然后向左或向右拖动以选择录制的一部分。 在选择的底部，DevTools 显示该部分花费的时间。

查看屏幕截图

请参阅 录制时捕获屏幕截图 ，了解如何打开屏幕截图。

将鼠标悬停在 “概述” 上可查看录制期间页面外观的屏幕截图。 概述 是包含 CPU 、 FPS 和 NET 图表的部分。

还可以通过在“ 框架 ”部分选择框架来查看屏幕截图。 DevTools 在“ 摘要 ”选项卡中显示小版本的屏幕截图。

单击“ 摘要 ”选项卡中的缩略图以放大屏幕截图。

查看层信息

查看有关帧的高级层信息：

启用高级绘制检测 。

在“框架”部分选择 一个框架 。 DevTools 在“ 事件日志 ”选项卡旁边的“层”选项卡中显示有关 层 的信息。

将鼠标悬停在图层上以在关系图中突出显示它。

移动关系图：

选择“ 平移模式 ( ) 沿 X 轴和 Y 轴移动。

选择 “旋转模式 ( ) 沿 Z 轴旋转。

选择“ 重置转换 ( ) 将关系图重置为原始位置。

查看画图探查器

查看有关画图事件的高级信息：

在 “主 ”部分选择“ 画图 ”事件。

“ 画图探查器 ”选项卡：

使用呈现工具分析呈现性能

使用 呈现 工具的功能来帮助可视化页面的呈现性能。

若要打开 呈现 工具，请执行以下操作：

打开命令菜单 。

开始键入 “渲染 ”，然后选择“ 显示呈现 ”。 DevTools 在 DevTools 窗口的底部显示 呈现 工具。

禁用本地字体

在 呈现 工具中，使用 “禁用本地字体 ”复选框模拟规则中 @font-face 缺少 local() 的源。

例如，当设备上安装了 Rubik 字体并且 @font-face src 规则将其用作 local() 字体时，Microsoft Edge 会使用设备上的本地字体文件。

选中“ 禁用本地字体 ”后，DevTools 将 local() 忽略字体并从网络中提取每个字体：

如果在开发过程中使用同一字体的两个不同副本，则此功能非常有用，例如：