在您开始记录之前，请在 Controls 窗格中启用 Screenshots 复选框，以便捕捉记录的屏幕截图。 屏幕截图显示在 Overview 窗格下方。

 操作6：分析 JavaScript

开始记录前，请启用 JS Profile 复选框，以便在您的时间线记录中捕捉 JavaScript 堆栈。 启用 JS 分析器后，您的火焰图会显示调用的每个 JavaScript 函数。

 操作7：分析绘制

开始记录前，请启用 Paint 复选框，以便获取有关 Paint 事件的更多数据分析。 启用绘制分析并点击 Paint 事件后，新 Paint Profiler 标签会出现在 Details 窗格中，后者显示了许多与事件相关的更精细信息。

 操作8：渲染设置

打开主 DevTools 菜单，然后选择More tools > Rendering settings 访问渲染设置，这些设置在调试绘制问题时非常有用。渲染设置会作为一个标签显示在 Console 抽屉式导航栏（如果隐藏，请按 esc 显示抽屉式导航栏）旁边

 操作9：搜索记录

查看事件时，您可能希望侧重于一种类型的事件。例如，您可能需要查看每个 Parse HTML 事件的详细信息。在 Timeline 处于焦

点时，按 Cmd+F (Mac) 或 Ctrl+F (Windows / Linux) 以打开一个查找工具栏。键入您想要检查的事件类型的名称，如 Event。工具

栏仅适用于当前选定的时间范围。选定时间范围以外的任何事件都不会包含在结果中。利用上下箭头，您可以按照时间顺序在结果中移动。

所以，第一个结果表示选定时间范围内最早的事件，最后一个结果表示最后的事件。每次按向上或向下箭头会选择一个新事件，因此，您可以

在 Details 窗格中查看其详细信息。按向上和向下箭头等同于在火焰图中点击事件。

您可以放大显示一部分记录，以便简化分析。使用 Overview 窗格可以放大显示一部分记录。 放大后，火焰图会自动缩放以匹配同一部分。

要在 Timeline 部分上放大，请执行以下操作：

选择部分后，可以使用 W、A、S 和 D 键调整您的选择。 W 和 S 分别代表放大和缩小。 A 和 D 分别代表左移和右移。

您可以在 Overview 或火焰图窗格中点击右键并选择相关选项，保存和打开记录。

（1）Application面板

 （2）简要分析

  a.在 Chrome 52 之后资源面板更名为应用面板。

  b.使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。

  c.查看和修改本地存储与会话存储。

  d.检查和修改 IndexedDB 数据库。

  e.对 Web SQL 数据库执行语句。

  f.查看应用缓存和服务工作线程缓存。

  g.点击一次按钮即可清除所有存储、数据库、缓存和服务工作线程。

 （3）实际操作

  操作1：本地存储

  a.如果您使用本地存储存储键值对 (KVP)，则可以从 Local Storage 窗格中检查、修改和删除这些 KVP。

说明：