以 cURL 命令形式复制一个或所有请求

cURL 是一种用于进行 HTTP 事务的命令行工具。

在 Requests Table 中右键点击某个资源，将鼠标悬停在 Copy 上，然后选择 Copy as cURL，复制 Network 面板检测到的所有资源的 cURL 请求的字符串。

选择 Copy as cURL，复制 Network 面板检测到的所有资源的 cURL 请求的字符串。

当您复制全部时，过滤将被忽略（例如，如果您过滤 Network 面板仅显示 CSS 资源，然后按 Copy All as cURL，您将获取所有检测到的资源，而不只是 CSS）。

操作16：自定义 Network 面板

默认情况下，Requests Table 会使用小行显示资源。点击 Use large resource rows 按钮 (

) 可以增大每一行的大小。

大行可以让某些列显示两个文本字段：主要字段和次要字段。 列标头指示次要字段的含义。

添加和移除表格列

右键点击 Requests Table 中的任一标题可以添加或移除列。

导航时保留网络日志。

默认情况下，每当您重新加载当前页面或者加载不同的页面时，网络活动记录会被丢弃。启用 Preserve log 复选框可以在这些情况下保存网络日志。

新记录将附加到 Requests Table 的底部。

操作17：其他资源

要详细了解如何优化您的应用的网络性能，请参阅下面的资源：

 

2、TimeLine

  （1）TimeLine面板

 

（2）简要分析

 a.使用 Chrome DevTools 的 Timeline 面板可以记录和分析您的应用在运行时的所有活动。 这里是开始调查应用中可觉察性能问题的最佳位置。
 b.执行 Timeline 记录，分析页面加载或用户交互后发生的每个事件。
 c.在 Overview 窗格中查看 FPS、CPU 和网络请求。
 d.点击火焰图中的事件以查看与其相关的详细信息。
 e.放大显示一部分记录以简化分析。

 （3）实际操作

  操作1：Timeline 面板包含以下四个窗格：

      (a).Controls。开始记录，停止记录和配置记录期间捕获的信息。

      (b).Overview。 页面性能的高级汇总。更多内容请参见下文。 

      (c).火焰图。 CPU 堆叠追踪的可视化。您可以在火焰图上看到一到三条垂直的虚线。蓝线代表 DOMContentLoaded 事件。 绿线代表首次绘制的时间。 红线代表 load 事件。

      (d).Details。选择事件后，此窗格会显示与该事件有关的更多信息。 未选择事件时，此窗格会显示选定时间范围的相关信息。

操作2：Overview 窗格

Overview 窗格包含以下三个图表：

     a.FPS。每秒帧数。绿色竖线越高，FPS 越高。 FPS 图表上的红色块表示长时间帧，很可能会出现卡顿

     b.CPU。 CPU 资源。此面积图指示消耗 CPU 资源的事件类型。

     c.NET。每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）。

   深色部分表示传输时间（下载第一个和最后一个字节之间的时间）。

   横杠按照以下方式进行彩色编码：

 操作3：做记录

要记录页面加载，请打开 Timeline 面板，打开想要记录的页面，然后重新加载页面。 Timeline 面板会自动记录页面重新加载。要记录页面交互，请打开 Timeline 面板，然后按 Record 按钮 (

) 或者键入键盘快捷键 Cmd+E (Mac) 或 Ctrl+E(Windows / Linux)，开始记录。记录时，Record 按钮会变成红色。执行页面交互，然后按 Record 按钮或再次键入键盘快捷键停止记录。完成记录后，DevTools 会猜测哪一部分记录与您最相关，并自动缩放到那一个部分。

记录提示 操作4：查看记录详细信息

在火焰图中选择事件时，Details 窗格会显示与事件相关的其他信息。

 一些标签（如 Summary）适用于所有事件类型。其他标签则仅对特定事件类型可用。了解与每个记录类型相关的详细信息。

操作5：在记录期间捕捉屏幕截图

Timeline 面板可以在页面加载时捕捉屏幕截图。此功能称为幻灯片。