开发者工具中的新功能 (Chrome 60)

Kayce Basques

欢迎！Chrome 60 中 DevTools 的新功能和重大变更包括：

请观看下方视频版的版本说明，或继续阅读了解详情。

新功能

由 Lighthouse 提供支持的新“审核”面板

“审核”面板现由 Lighthouse 提供支持。Lighthouse 提供了一组全面的测试，用于衡量网页的质量。

顶部的 Progressive Web App、性能、无障碍和 最佳实践得分是您在各个类别中的总得分。报告的其余部分则会对决定您得分的每项测试进行细分。修复失败的测试，以提高网页质量。

Lighthouse 报告

图 1. Lighthouse 报告

如需审核网页，请执行以下操作：

  1. 点击审核标签页。
  2. 点击执行审核。
  3. 点击运行审核。Lighthouse 会设置 DevTools 来模拟移动设备，对页面运行一系列测试，然后在审核面板中显示结果。

2017 年 Google I/O 大会上的 Lighthouse

请观看下面的 2017 年 Google I/O 大会上的 DevTools 演讲，详细了解 Lighthouse 如何与 DevTools 集成。

为 Lighthouse 做贡献

Lighthouse 是一个开源项目。如需详细了解 Lighthouse 的工作原理以及如何为其贡献力量，请参阅下方 Google I/O 2017 大会上的 Lighthouse 讲座。

有 Lighthouse 审核方面的想法？请在此处发布！

第三方徽章

使用第三方标记可深入了解在网页上发出网络请求、向控制台记录日志和执行 JavaScript 的实体。

将鼠标悬停在“网络”面板中的第三方标记上

图 2. 将鼠标悬停在“网络”面板中的第三方标记上

在 Play 管理中心内将鼠标悬停在第三方徽章上

图 3. 在 Play 管理中心内将鼠标悬停在第三方徽章上

如需启用第三方徽章，请执行以下操作：

  1. 打开命令菜单。
  2. 运行 Show third party badges 命令。

您可以使用通话树和自下而上标签页中的按产品分组选项，按导致相应活动的第三方实体对效果记录活动进行分组。如需了解如何使用开发者工具分析性能，请参阅开始分析运行时性能。

在“自下而上”标签页中按产品进行分组

图 4. 在自下而上标签页中按商品进行分组

新增了“继续到此处”手势

假设您在脚本的第 25 行暂停，并想跳转到第 50 行。以前，您可以在第 50 行设置断点，也可以右键点击该行并选择继续到此处。不过，现在有一种更快的手势可用于处理此工作流。

逐行调试代码时，按住 Command 键（Mac）或 Control 键（Windows、Linux），然后点击以继续到相应代码行。DevTools 会以蓝色突出显示可跳转的目的地。

继续执行到此处

图 5. 继续执行到此处

如需了解在 DevTools 中调试的基础知识，请参阅 JavaScript 调试入门。

单步进入异步代码

近期，DevTools 团队的一个重要目标是使调试异步代码可预测，并为您提供完整的异步执行历史记录。

用于“继续到此处”的新手势也适用于异步代码。当您按住 Command 键（Mac）或 Control 键（Windows、Linux）时，DevTools 会以绿色突出显示可跳转的异步目的地。

如需查看示例，请参阅 I/O 大会上有关开发者工具的演讲中的以下演示。

变更

控制台中更具信息量的对象预览

以前，当您在控制台中记录或评估对象时，控制台中只会显示 Object，这并不特别有用。现在，控制台会提供有关对象内容的更多信息。

控制台如何预览对象

图 6. 控制台如何预览对象

管理中心现在如何预览对象

图 7. 管理中心现在如何预览对象

控制台中更具信息量的上下文选择菜单

现在，Search Console 的“情境选择”菜单会提供有关可用情境的更多信息。

  • 标题用于说明各个项的用途。
  • 标题下方的副标题说明了内容的来源网域。
  • 将鼠标悬停在 iframe 上下文上，即可在视口中突出显示该上下文。

新的“上下文选择”菜单

图 8. 在新的“上下文选择”菜单中将鼠标悬停在某个 iframe 上，该 iframe 会在视口中突出显示

“覆盖面”标签页中的实时更新

在 Chrome 59 中记录代码覆盖率时，覆盖率标签页只会显示“正在记录...”消息，而无法了解正在使用哪些代码。现在，覆盖率标签页会实时显示正在使用的代码。

使用旧版“覆盖率”标签页加载网页并与其互动

图 9. 使用旧版覆盖率标签页加载网页并与其互动

使用新的“覆盖率”标签页加载网页并与其互动

图 10. 使用新的覆盖率标签页加载网页并与其互动

更简单的网络节流选项

网络和性能面板中的网络节流菜单已简化为仅包含三个选项：离线、低速 3G（印度等地常见）和高速 3G（美国等地常见）。

新的网络节流选项

图 11. 新的网络节流选项

我们调整了节流选项，使其与其他内核级节流工具保持一致。由于这些值具有误导性，因此 DevTools 不再在每个选项旁边显示延迟时间、下载和上传指标。目标是匹配每种选项的真实体验。

异步堆栈默认处于开启状态

来源面板中已移除 Async 复选框。异步堆栈轨迹现在默认处于开启状态。过去，由于性能开销，此选项是可选的。开销现在已足够小，可以默认启用该功能。如果您想停用异步堆栈轨迹，可以在设置中将其停用，也可以在命令菜单中运行 Do not capture async stack traces 命令来停用。

2017 年 Google I/O 大会上的开发者工具

请观看下方由传奇人物 Paul Irish 带来的演讲，详细了解开发者工具团队在过去一年中所做的工作，以及他们近期要解决的重大主题。

下载预览渠道

不妨考虑将 Chrome Canary 版、开发者版或 Beta 版用作默认开发浏览器。通过这些预览版渠道，您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API，并帮助您在用户发现问题之前发现网站上的问题！

与 Chrome DevTools 团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。