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

Kayce Basques

欢迎！Chrome 60 中的开发者工具即将发布的新功能和重大更改包括：

查看下方这些版本说明的视频版本，或继续阅读以了解详情。

新功能

新的 Audits 面板，由 Lighthouse 提供支持

Audits 面板现在由 Lighthouse 提供支持。Lighthouse 提供了一套全面的 用于衡量网页质量的测试

渐进式 Web 应用、性能、 无障碍功能和最佳实践是这三大方面的总分 类别。报告的其余部分详细说明了用于确定您分数的每项测试。 通过修复失败的测试来提高网页质量。

Lighthouse 报告

图 1. Lighthouse 报告

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

  1. 点击审核标签页。
  2. 点击执行审核。
  3. 点击运行审核。Lighthouse 设置开发者工具来模拟移动设备，运行许多 测试相应网页，然后在 Audits 面板中显示结果。

2017 年 Google I/O 大会上的灯塔

观看下面的 Google I/O 2017 开发者工具讲座，详细了解 Lighthouse 的集成 。

为 Lighthouse 贡献力量

Lighthouse 是一个开源项目。要详细了解该工具的工作原理以及如何 请观看下方的 2017 年 Google I/O 大会上的 Lighthouse 讲座。

对 Lighthouse 审核有自己的想法？请在此处发布！

第三方徽章

使用第三方标志可更加深入地了解在 页面，登录到控制台并执行 JavaScript。

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

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

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

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

要启用第三方标志，请执行以下操作：

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

您可以使用 Call Tree 和 Bottom-Up 标签页中的 Group by product 选项来对效果进行分组。 记录活动的第三方实体的活动。请参阅入门指南 分析运行时性能，了解如何使用开发者工具分析性能。

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

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

“前往此处”的新手势

假设您在脚本的第 25 行暂停了，想要跳转到第 50 行。过去，您可以 在第 50 行设置一个断点，或右键点击该行并选择 Continue to here。而现在， 有一个更快的手势来处理此工作流。

在单步调试代码时，按住 Command (Mac) 或 Ctrl（Windows、Linux）和 然后点击“继续”前往该行代码开发者工具以蓝色突出显示可跳转的目的地。

继续前往此处

图 5. 前往此处

如需了解在开发者工具中调试的基础知识，请参阅 JavaScript 调试入门。

单步进入异步模式

在不久的将来，DevTools 团队的一大主题是调试异步代码 可预测，并且可为您提供异步执行的完整历史记录。

“前往此处”的新手势也适用于异步代码。按住 Command (Mac) 或 Control（Windows、Linux），开发者工具突出显示可跳转的内容 以绿色显示异步目的地

请查看以下来自 I/O 大会上的开发者工具讲座的演示，了解相关示例。

变更

在控制台中预览信息更丰富的对象

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

如何使用控制台预览对象

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

控制台现在如何预览对象

图 7. 控制台现在如何预览对象

控制台中信息更丰富的上下文选择菜单

现在，控制台的“上下文选择”菜单会提供有关可用上下文的更多信息。

  • 标题描述了每件商品的含义。
  • 标题下方的副标题描述的是商品的来源网域。
  • 将鼠标悬停在 iframe 上下文上，即可在视口中突出显示它。

新的“上下文选择”菜单

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

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

在 Chrome 59 中记录代码覆盖率时，覆盖率标签页将仅显示“记录...”、 而无需查看所使用的代码。现在，覆盖率标签页会实时显示您 所用的代码

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

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

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

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

更简单的网络节流选项

网络和性能面板中的网络限制菜单已简化为 仅包含三个选项：离线、慢速 3G（在印度等地很常见）和 快速 3G，在美国等地很常见。

新的网络节流选项

图 11. 新的网络节流选项

限制选项已经过调整，以匹配其他内核级限制工具。开发者工具编号 延迟时间、下载和上传指标显示在每个选项旁边，因为这些值 具有误导性。我们的目标是匹配每个选项的真实体验。

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

Sources 面板中移除了 Async 复选框。异步堆栈轨迹现在由 默认值。过去，由于性能开销，此选项是可选择启用的。现在，开销是 足够小，可默认启用该功能。如果您希望停用异步堆栈轨迹 你可以在设置中关闭它们，也可以在运行Do not capture async stack traces 命令。

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

观看下面由神话人物 Paul Ireland 发表的演讲，详细了解开发者工具团队的开发成果 以及他们在不久的将来要解决的重大主题。

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

开发者工具的新变化系列涵盖所有内容的列表。