Chrome 开发者工具变革 2013

Arthur Evans
X GitHub
Tim Statler
X

简介

随着 Web 应用的复杂性和功能不断增加，Chrome DevTools 也不断发展壮大。在 Paul Irish 在 2013 年 Google I/O 大会上发表的演讲“Chrome 开发者工具革命 2013”的回顾中，您可以了解将彻底改变 Web 应用构建和测试方式的最新功能。

如果您错过了 Paul 的演讲，可以点击上方观看（没关系，我们会等您），也可以直接跳转至功能精选：

  • 借助工作区，您可以将 DevTools 用作源代码编辑器。
  • 如果您使用 Sass，一定会喜欢在 DevTools 中实时修改 Sass (.scss) 文件，并立即在页面上看到更改。
  • 在 Chrome（Android 版）上远程调试网页已经有一段时间了，但 adb 扩展程序可以简化与 Android 设备的连接。借助反向端口转发，您可以轻松地从设备连接到开发机器上的 localhost。
  • 性能始终是 Web 应用的关注重点，而 DevTools 提供了许多新功能来帮助您跟踪瓶颈，包括用于 CPU 性能分析的新火焰图可视化图表，以及用于调试与渲染和内存用量相关的性能问题的多种新工具。

这些功能已在 Chrome 28 中正式推出，现已在稳定更新渠道中提供。

工作区

借助工作区，您可以将本地网络服务器提供的资源映射到磁盘上的文件，这样便可以在“Sources”面板中修改任何类型的源文件，并将这些更改保留到磁盘中。同样，您在外部编辑器中所做的更改也会立即显示在“Sources”面板中。

以下屏幕截图展示了工作区的实际运作方式。日历网站已通过 localhost 加载，而“来源”面板显示了该网站根文件夹的本地文件系统视图。您对此文件夹中的文件所做的修改会保留到磁盘中。在下面的屏幕截图中，Calendar.css 中有一些未保存的更改，因此文件名称旁边会显示一个星号。

“来源”面板。

按 Control+S 或 Command+S 可将更改持久保存到磁盘。

同样，您在“Elements”面板中对元素样式所做的更改也会反映在“Sources”面板和外部编辑器中。请注意：

  • Elements 面板中的 DOM 更改不会保留。只有 Elements 面板中的样式更改会保留。
  • 只能更改在外部 CSS 文件中定义的样式。对 element.style 或内嵌样式的更改不会保留回磁盘。如果您有内嵌样式，可以在“Sources”面板中对它们进行更改。
  • Elements 面板中的样式更改会立即保留；您无需按 Control+S 或 Command+S。
“元素”面板。

添加工作区文件夹

使用工作区分为两个部分：将本地文件夹的内容提供给 DevTools，以及将该文件夹映射到网址。

如需添加新的 Workspace 文件夹，请执行以下操作：

  1. 在 DevTools 中，点击 Settings “设置”图标 以打开 DevTools 设置。
  2. 点击工作区。
  3. 点击添加文件夹。
  4. 浏览到包含项目源文件的文件夹，然后点击选择。
  5. 出现提示时，点击允许，以允许 DevTools 对该文件夹拥有完整访问权限。

“Sources”（来源）面板会显示新的 Workspace 文件夹以及通过 localhost 加载的来源。现在，您可以在工作区文件夹中实时编辑文件，这些更改将保存到磁盘。

同时显示 localhost 资源和工作区文件的“Sources”面板。

将文件夹映射到网址

添加工作区文件夹后，您可以将其映射到网址。每当 Chrome 加载指定网址时，Sources 面板都会显示工作区文件夹内容，而不是网络文件夹内容。

如需将工作区文件夹映射到网址，请执行以下操作：

  1. 在“Sources”面板中，右键点击或在按住 Ctrl 的同时点击工作区文件夹中的文件。
  2. 选择映射到网络资源。
    显示“Map to Network Resource”选项的上下文菜单
  3. 从当前加载的页面中选择相应的影音平台资源。
    资源选择对话框。
  4. 在 Chrome 中重新加载该网页。

“来源”面板现在应仅显示您网站的本地工作区文件夹的内容，而不是 localhost 来源，如下所示。

映射的工作区文件夹

您还可以通过以下两种方式将网络文件夹关联到工作区文件夹：

  • 右键点击（或按住 Ctrl 键的同时点击）网络资源，然后选择映射到文件系统资源。
  • 在 DevTools 设置对话框的“工作区”标签页中手动添加映射。

Sass/CSS 源代码映射调试

借助 Sass（CSS 源映射）调试功能，您可以在 Sources 面板中实时编辑 Sass (.scss) 文件并查看结果，而无需离开 DevTools 或刷新页面。在检查样式由 Sass 生成的 CSS 文件提供的元素时，Elements 面板会显示 .scss 文件而不是生成的 .css 文件的链接。

显示 .scss 样式表的 Elements 面板

点击链接，在“Sources”面板中打开（可编辑）SCSS 文件。您可以对此文件进行任何更改。

显示 .scss 文件的 Sources 面板。

当您保存对 SCSS 文件的更改（在 DevTools 或其他位置）时，Sass 编译器会重新生成 CSS 文件。然后，DevTools 会重新加载新生成的 CSS 文件。

使用 Sass 调试

如需在 Chrome 中使用 Sass 调试功能，您需要安装Sass 编译器的预发布版本，这是目前唯一支持生成源映射的版本。

gem install sass -v '>=3.3.0alpha' --pre

您还需要在 DevTools 实验中启用 Sass 调试功能：

  1. 在 Chrome 中打开 about:flags。
  2. 开启启用开发者工具实验。
  3. 重启 Chrome。
  4. 打开 DevTools 设置，然后点击实验。
  5. 开启对 Sass 的支持（或 Sass 样式表格调试，具体取决于您使用的浏览器版本）。

安装 Sass 后，启动 Sass 编译器以监控 Sass 源文件的更改，并为每个生成的 CSS 文件创建源映射文件，例如：

sass --watch **--sourcemap** sass/styles.scss:styles.css

如果您使用的是 Compass，请注意，Compass 尚不支持 Sass 的预发布版本，因此您无法将 Sass 调试功能与 Compass 搭配使用。

运作方式

对于处理的每个 SCSS 源文件，除了编译的 CSS，Sass 编译器还会生成源映射文件 (.map 文件)。源映射文件是 JSON 文件，会在 .scss 文件与 .css 文件之间定义映射。每个 CSS 文件均包含指定源映射文件网址的注解，嵌入特殊注释中：

/*# sourceMappingURL=<url>; */

例如，假设存在以下 SCSS 文件：

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass 会生成如下所示的 CSS 文件，其中包含 sourceMapping网址 注解：

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

以下是一个源映射文件示例：

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

在 Android 版 Chrome 上更轻松地进行远程调试

开发者工具中新增了一些功能，可让您更轻松地在 Chrome for Android 上进行远程调试：ADB 扩展程序和反向端口转发。

ADB Chrome 扩展程序简化了设置远程调试的过程。它具有以下优势：

  • 捆绑了 Android 调试桥 (ADB)，因此您无需安装它。
  • 无需进行命令行交互。
  • 用于轻松启动和停止 ADB 守护程序以及查看已连接的设备的界面。

借助反向端口转发，您可以轻松将 Android 设备上的 Chrome 连接到在本地主机上运行的 Web 服务器，而如果不使用一些 DNS 技巧，在某些网络环境中，这很难实现。

使用 ADB 扩展程序

首先，从 Chrome 应用商店安装 ADB Chrome 扩展程序。点击添加到 Chrome以安装该扩展程序。

安装完成后，Chrome 中会显示一个灰色的 Android 菜单图标。如需启动 ADB，请点击该图标，然后点击 Start ADB（启动 ADB）。

ADB 扩展菜单。

ADB 启动后，菜单图标会变为绿色，并显示当前连接的设备数量（如果有）。

显示已连接设备的 ADB 扩展菜单。

点击查看设备，打开 about:inspect 页面，其中会显示每个已连接的设备及其标签页。如需在开发者工具中检查标签页，请点击其网址旁边的“检查”链接。

显示设备标签页链接的 about:inspect 页面

如果您没有看到任何已连接的设备，请检查您的设备是否已连接到 USB，以及 Chrome for Android 设置中是否已启用 USB 调试。如需更详细的说明和问题排查步骤，请参阅 Android 上的远程调试。

反向端口转发（实验性）

通常，您会在本地开发机器上运行 Web 服务器，并希望从设备连接到该网站。如果开发机器和设备位于同一网络上，则非常简单。但在某些情况下（例如在受限的企业网络中），如果不使用一些巧妙的 DNS 技巧，可能无法实现此目的。Chrome（Android 版）中有一个名为反向端口转发的新功能，可让您轻松实现此目的。该功能的运作方式是，在您的设备上创建一个监听 TCP 端口，以便通过 USB 将流量转发到开发机上的特定 TCP 端口。

如需使用此功能，您需要：

  • 开发机器上已安装 Chrome 28 或更高版本
  • 设备上已安装 Chrome（Android 版 Beta 版）
  • 开发机器上安装了 Android 调试桥 (ADB Chrome 扩展程序或完整 Android SDK)

如需使用反向端口转发，您需要连接设备以进行远程调试，如“使用 adb 扩展程序”中所述。然后，您需要启用反向端口转发，并为应用添加端口转发规则。

首先，启用反向端口转发：

  1. 在开发机器上打开 Chrome。
  2. 在 about:flags 中，开启启用开发者工具实验，然后重启 Chrome。
  3. 打开 about:inspect。您应该会看到您的移动设备及其打开的标签页列表。
  4. 点击所列任一网站旁边的“检查”链接。
  5. 在打开的 DevTools 窗口中，打开“设置”面板。
  6. 在“实验”下，开启启用反向端口转发。
  7. 关闭 DevTools 窗口，然后返回 about:inspect。

然后添加端口转发规则：

  1. 再次点击“检查”链接以打开 DevTools，然后再次打开 DevTools 设置。
  2. 点击端口转发标签页。
  3. 在 Device port 字段中，输入 Chrome 应在 Android 设备上连接到的端口号（默认为 8080）。
  4. 在 Target 字段中，附加 Web 应用在开发机器上运行的端口号。
    DevTools 设置中的“端口转发”标签页
  5. 在 Android 版 Chrome 中，打开 localhost:，其中 是您在设备端口字段中输入的值（默认为 8080）。

您应该会看到开发机器提供的内容。

JavaScript 性能剖析的火焰图可视化

新的火焰图视图直观地表示了一段时间内的 JavaScript 处理情况，类似于时间轴和网络面板中显示的内容。

火焰图。

横轴是时间，纵轴是调用堆栈。面板顶部显示了整个录制的概览，您可以使用鼠标选择概览中的某个区域，以便“放大”该区域，如下所示。详情视图的时间尺度会相应缩小。

放大的火焰图。

在详情视图中，调用堆栈表示为函数“块”堆栈。位于另一个代码块之上的代码块被下方的函数块调用。将鼠标悬停在给定代码块上会显示其函数名称和计时数据：

  • 名称 - 函数的名称。
  • 自用时间 - 完成函数当前的调用所需的时间，仅包含函数本身的语句，不包含函数调用的任何函数。
  • 总时间 - 完成此函数和其调用的任何函数当前的调用所需的时间。
  • 汇总的自用时间 - 记录中函数所有调用的总时间，不包括此函数调用的函数。
  • 累计总时间 - 函数所有调用的总时间，包括此函数调用的函数。
显示时间数据的火焰图

点击函数块会在“Sources”面板中打开包含该函数的 JavaScript 文件，并定位到定义该函数的行。

“Sources”面板中的函数定义。

如需使用火焰图，请执行以下操作：

  1. 在 DevTools 中，点击 Profiles（配置文件）标签页。
  2. 选择录制 JavaScript CPU 性能分析报告，然后点击开始。
  3. 收集完数据后，点击停止。
  4. 在配置文件视图中，选择火焰图可视化图表。
    个人资料视图中的可视化菜单

五大关键效果衡量功能

在介绍开发者工具的革命性进展后，我们还将介绍几项用于调查性能问题的新功能：

  • 连续绘制模式
  • 显示绘制矩形和图层边框
  • FPS 计数器
  • 查找强制同步布局（布局抖动）
  • 对象分配跟踪

连续绘制模式

持续绘制模式是开发者工具设置中的一项选项（渲染 > 启用持续页面重绘），可帮助您确定各个元素或 CSS 样式的渲染开销。

通常，Chrome 仅在响应布局或样式更改时绘制到屏幕，并且仅绘制需要更新的屏幕区域。启用连续页面重绘后，整个屏幕会不断重绘。系统会显示一个动态显示屏，其中显示 Chrome 绘制网页所需的时间以及时间范围，还有一个图表，显示近期绘制时间的分布情况。直方图中的水平线表示 16.6 毫秒标记。

绘制时序平视显示。

使用此方法的好处在于，您可以在“Elements”面板中遍历 DOM 树并隐藏各个元素（按 H 键可隐藏当前选定的元素），或停用元素的 CSS 样式。您可以通过观察页面绘制时间的变化，了解某个元素或样式会增加多少页面呈现“负担”（如果有）。如果隐藏单个元素会显著缩短绘制时间，您就知道要重点关注该元素的样式或构建方式。

如需启用持续绘制模式，请执行以下操作：

  1. 打开 DevTools 设置。 1. 在常规标签页的渲染下，开启启用持续页面重绘。

如需了解详情，请参阅使用 DevTools 的连续绘制模式分析绘制时间过长问题。

显示绘制矩形和图层边框

DevTools 中的另一个选项是显示正在绘制到显示屏的矩形区域。（依次选择“设置”>“渲染”>“显示绘制区域”）。例如，在下面的屏幕截图中，系统会在对紫色图形应用 CSS 悬停效果的区域上绘制一个绘制矩形。这很好，因为它在屏幕上占据的空间相对较小。

显示绘制矩形的网站。

您应避免采用会导致整个显示屏重新绘制的设计和开发做法。例如，在以下屏幕截图中，用户正在滚动网页。一个绘制矩形用于环绕滚动条，另一个绘制矩形用于环绕网页的其余部分。在本例中，问题出在 body 元素上的背景图片上。图片位置在 CSS 中设置为固定，这要求 Chrome 在每次滚动时重新绘制整个网页。

显示全屏重绘的网站。

FPS 计数器

FPS 计量器会显示网页的当前帧速率、最低帧速率和最高帧速率，以及显示一段时间内帧速率的条形图和显示帧速率变化的直方图。

FPS 计数器

如需显示 FPS 计量器，请执行以下操作：

  1. 打开 DevTools 的“Settings”。
  2. 点击常规。
  3. 在渲染下，开启强制加速合成和显示 FPS 计量器。

您可以强制 FPS 计量器始终显示，方法是打开 about:flags、开启 FPS 计数器，然后重启 Chrome。

查找强制同步布局（布局抖动）

为了最大限度地提升渲染性能，Chrome 通常会批量处理应用请求的布局更改，并安排布局传递以异步计算和渲染请求的更改。不过，如果应用请求布局依赖属性（例如 offsetHeight 或 offsetWidth）的值，Chrome 将被迫立即同步执行页面布局。这些所谓的强制同步布局可能会显著降低渲染性能，尤其是在对大型 DOM 树重复执行时。这种情况也称为“布局抖动”。

时间轴记录会在检测到强制同步布局时向您发出提醒，并在相应时间轴记录旁边显示黄色警告图标。将鼠标悬停在其中一个记录上会显示使布局失效的代码和强制执行布局的代码的堆栈轨迹。

时间轴视图中的强制同步布局弹出式窗口。

此弹出式窗口还会显示需要布局的节点数、重新布局树的大小、布局范围和布局根。

如需了解详情，请参阅时间轴演示：诊断强制同步布局。

对象分配跟踪

对象分配跟踪是一种新型内存性能分析，可显示一段时间内的分配情况。当您开始分配跟踪时，DevTools 会持续拍摄堆快照。堆分配配置文件会显示正在创建对象的位置并确定保留路径。

堆分配性能分析报告视图。

如需跟踪对象分配，请执行以下操作：

  1. 在 DevTools 中，点击 Profiles（配置文件）标签页。
  2. 选择记录堆分配，然后点击开始。
  3. 收集完数据后，点击停止记录堆堆栈配置文件（性能分析窗格的左下角的红色圆圈）。

Canvas 性能分析（实验性）

最后，我们推出了一项完全实验性的功能供您探索。借助画布性能分析，您可以记录和重放对画布元素进行的 WebGL 调用。您可以逐个步骤调用 WebGL 调用或调用组，并查看渲染结果。您还会看到重放这些特定调用所花费的时间。

如需使用画布性能分析，请执行以下操作：

  1. 在 DevTools 设置的实验标签页中，开启 Canvas 检查功能。（如果您没有看到此标签页，请打开 about:flags，开启启用开发者工具实验，然后重启 Chrome。）
  2. 点击配置文件标签页。
  3. 选择捕获画布框架，然后点击拍摄快照。
  4. 现在，您可以探索用于创建画布框的调用。
Canvas 个人资料。