Chrome 开发者工具变革 2013

Arthur Evans
Twitter GitHub
Tim Statler
Twitter

简介

随着 Web 应用的复杂性和功能不断提高，Chrome 开发者工具也在不断增加。在此回顾 Paul Irish 2013 年 Google I/O 大会演讲 Chrome 开发者工具变革 2013 的回顾内容，了解哪些最新功能彻底改变了您构建和测试 Web 应用的方式。

如果您错过了 Paul 的演讲，可以在上方观看（请稍等片刻），也可以直接剪辑到功能摘要：

  • 通过工作区，您可以将开发者工具用作源代码编辑器。
  • 如果您使用 Sass，一定会在开发者工具中实时编辑 Sass (.scss) 文件，并且会在页面上看到更改立即反映出来。
  • 已经有一段时间可以在 Android 版 Chrome 上远程调试网页了，但 ADB 扩展程序可以让连接到 Android 设备变得更简单。反向端口转发可让您从设备轻松连接到开发机器上的 localhost。
  • 在 Web 应用中，性能一直是重要的问题，并且开发者工具有许多新功能可以帮助您跟踪瓶颈，包括用于 CPU 分析的新火焰图可视化功能，以及用于调试与渲染和内存使用相关的性能问题的新工具。

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

工作区

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

下面的屏幕截图显示了工作区的实际应用示例。Google 日历网站是通过 localhost 加载的，而“Sources”面板显示的是网站根文件夹的本地文件系统视图。您对此文件夹中的文件所做的修改将持久保存在磁盘中。在下面的屏幕截图中，我们对 Calendar.css 进行了一些未保存的更改，因此在文件名旁边显示了一个星号。

“来源”面板。

按 Control+S 或 Command+S 会将更改保存到磁盘。

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

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

添加工作区文件夹

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

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

  1. 在开发者工具中，点击 Settings 图标 “设置”图标 即可打开开发者工具设置。
  2. 点击工作区。
  3. 点击添加文件夹。
  4. 转到包含项目源文件的文件夹，然后点击选择。
  5. 出现提示时，点击 Allow 以允许开发者工具完全访问该文件夹。

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

显示本地主机资源和工作区文件的“Sources”面板。

将文件夹映射到网址

添加工作区文件夹后，您可以将其映射到网址。每当 Chrome 加载指定的网址时，“来源”面板就会显示工作区文件夹内容，而非网络文件夹的内容。

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

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

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

已映射的工作区文件夹

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

  • 右键点击（或在按住 Control 键的同时点击）某个网络资源，然后选择 Map to File System Resource。
  • 在开发者工具“设置”对话框的“工作区”标签页中手动添加映射。

Sass/CSS 源映射调试

通过 Sass (CSS Source Map) 调试，您可以在 Sources 面板中实时编辑 Sass (.scss) 文件，无需离开开发者工具或刷新页面即可查看结果。当您检查样式由 Sass 生成的 CSS 文件提供的元素时，“Elements”面板会显示指向 .scss 文件（而非生成的 .css 文件）的链接。

显示 .scss 样式表的“元素”面板

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

显示 .scss 文件的位置面板。

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

使用 Sass 调试

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

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

您还需要在开发者工具实验中启用 Sass 调试功能：

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

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

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

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

运作方式

对于它处理的每个 SCSS 源文件，Sass 编译器除了生成已编译的 CSS 之外，还会生成源映射文件（.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（Android 版）上进行远程调试：ADB 扩展程序和反向端口转发。

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

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

反向端口转发功能可让您轻松将 Android 版 Chrome 连接到本地主机上运行的网络服务器，而在有些网络环境中，如果没有一些 DNS 技巧，会非常困难。

使用 ADB 扩展程序

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

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

ADB 扩展程序菜单。

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

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

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

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

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

反向端口转发（实验性）

通常情况下，您的本地开发计算机上有运行 Web 服务器，并且您希望从设备连接到该网站。如果开发机器和设备位于同一网络上，这很简单。但在某些情况下，例如在受限的企业网络中，如果没有一些巧妙的 DNS 技巧，这可能无法实现。Android 版 Chrome 中有一项称为反向端口转发的新功能。该功能的工作原理是，在您的设备上创建一个监听 TCP 端口，该端口通过 USB 将流量转发到开发机器上的特定 TCP 端口。

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

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

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

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

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

然后添加端口转发规则：

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

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

JavaScript 配置文件的火焰图可视化效果

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

火焰图。

横轴是时间，纵轴是调用堆栈。面板顶部有一幅概览，显示了整个记录，您可以通过鼠标选择概览的区域来“放大”该区域，如下所示。详情视图的时间刻度会相应缩小。

已放大的火焰图。

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

  • 名称 - 函数的名称。
  • 自用时间 - 完成函数的当前调用所用的时间，仅包含函数本身中的语句（不包括函数调用的任何函数）。
  • 总时间 - 完成此函数及其所调用的任何函数的当前调用过程所用的时间。
  • Aggregated self time - 记录期间所有函数调用的总时间，不包括此函数调用的函数。
  • 总计总时间 - 函数所有调用（包括此函数调用的函数）的总总时间。
显示时间数据的火焰图

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

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

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

  1. 在开发者工具中，点击配置文件标签页。
  2. 选择 Record JavaScript CPU profile（记录 JavaScript CPU 配置文件），然后点击 Start（开始）。
  3. 收集完数据后，点击停止。
  4. 在配置文件视图中，选择火焰图可视化图表。
    个人资料视图中的可视化菜单

五大关键的效果衡量功能

本调查对开发者工具的革命性进展进行了完善，此外还新增了几个用于调查性能问题的新功能：

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

连续绘图模式

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

通常，Chrome 仅会在响应布局或样式更改时在屏幕上进行绘制，且只会响应需要更新的屏幕区域。如果您启用连续页面重绘功能，系统会不断地重新绘制整个屏幕。平视显示器会显示 Chrome 绘制网页所花费的时间和时间范围，以及一张显示最近绘制时间分布图的图表。直方图的水平线表示 16.6 毫秒标记。

绘制时间平视显示。

使用此方法的好处是，您可以在“Elements”面板中浏览 DOM 树，并隐藏个别元素（按 H 键隐藏当前选中的元素），或停用某个元素的 CSS 样式。通过查看网页渲染时间的变化，您可以了解某个元素或样式添加到网页呈现“权重”所占的时间（如果有）。如果隐藏单个元素会大幅缩短绘制时间，那么您知道需要重点关注该元素的样式或构造。

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

  1. 打开开发者工具设置。 1. 在常规标签页的呈现下，启用启用连续网页重绘功能。

如需了解详情，请参阅使用开发者工具的连续绘制模式对长时间绘制时间进行性能分析。

显示绘制矩形和图层边框

开发者工具中的另一个选项是显示正在将显示屏绘制到哪些矩形区域。（“设置”>“渲染”>“显示绘制矩形”）。例如，在下面的屏幕截图中，在对紫色图形应用 CSS 悬停效果的区域上方绘制了一个绘制矩形。这不错，因为它在屏幕中所占的比例相对较小。

显示绘制矩形的网站。

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

显示全屏重绘的网站。

FPS 表

FPS 计量器会显示网页的当前帧速率、最小和最大帧速率、显示帧速率随时间变化的条形图以及显示帧速率变化的直方图。

FPS 表

如需显示 FPS 表，请执行以下操作：

  1. 打开开发者工具设置。
  2. 点击常规。
  3. 在 Rendering 下，启用 Force Accelerated composing（强制合成）和 Show FPS meter（显示 FPS 表）。

您可以打开 about:flags，开启 FPS 计数器，然后重启 Chrome，从而强制 FPS 表始终显示。

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

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

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

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

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

有关详情，请参阅时间轴演示：诊断强制同步布局。

对象分配跟踪

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

堆分配配置文件视图。

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

  1. 在开发者工具中，点击配置文件标签页。
  2. 选择 Record heap allocations，然后点击 Start。
  3. 完成数据收集后，点击 Stop recording heap profile（分析窗格左下角的红色圆圈）。

画布性能分析（实验性）

最后，请探索一项完全实验性的功能。通过画布性能分析，您可以记录和播放在画布元素上进行的 WebGL 调用。您可以逐步执行单个 WebGL 调用或调用组，并查看呈现的结果。您还会看到重放这些特定调用所花费的时间。

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

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