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

Google 用户调研。

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

• 新的“Audits”（审核）面板，其中包含针对渐进式 Web 应用、性能、无障碍功能和最佳实践的测试。
• 第三方徽章。了解哪些第三方正在发出网络请求、记录到控制台以及执行 JavaScript。
• 继续执行到此处。一种可加快 JavaScript 调试工作流程的新手势。
• 可预测的异步 JavaScript 调试。
• 控制台中的对象预览。
• “覆盖面”标签页中的实时更新。
• 控制台中用于选择上下文的新菜单。
• 更简单的网络节流选项。
• 默认开启异步堆栈轨迹。

您可以观看下方视频版版本说明，也可以继续阅读以了解详情。

新功能

由 Lighthouse 提供支持的新“评估”面板

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

顶部的分数分别代表渐进式 Web 应用、性能、无障碍功能和最佳实践这四个类别的总分。报告的其余部分详细列出了确定您得分的各项测试。通过修复失败的测试来提高网页质量。

图 1. Lighthouse 报告

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

1. 点击审核标签页。
2. 点击 Perform an audit。
3. 点击运行审核。Lighthouse 会设置开发者工具来模拟移动设备，针对网页运行一系列测试，然后在审核面板中显示结果。

2017 年 Google I/O 大会上的 Lighthouse

观看下方 2017 年 Google I/O 大会上的 DevTools 演示，详细了解 Lighthouse 在 DevTools 中的集成。

为 Lighthouse 做贡献

Lighthouse 是一个开源项目。如需详细了解其运作方式以及如何为其做出贡献，请观看下方 Google I/O 2017 的 Lighthouse 讲座。

有关于 Lighthouse 审核的想法？在此处发布！

第三方徽章

使用第三方徽章可更深入地了解网页上发出网络请求、记录到控制台以及执行 JavaScript 的实体。

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

图 3. 在控制台中将鼠标悬停在第三方徽章上

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

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

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

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

“继续播放”功能的新手势

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

在单步执行代码时，按住 Command 键 (Mac) 或 Control 键（Windows、Linux），然后点击以继续执行该行代码。开发者工具会以蓝色突出显示可跳转到的目的地。

图 5. 继续执行到此处

如需了解有关在开发者工具中进行调试的基础知识，请参阅开始调试 JavaScript。

单步进入异步

在不久的将来，开发者工具团队的一个重要主题是使异步代码调试变得可预测，并为您提供完整的异步执行历史记录。

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

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

变更

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

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

图 6. 管理中心过去如何用于预览对象

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

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

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

• 标题描述了每项内容。
• 标题下方的副标题用于说明相应内容的来源网域。
• 将鼠标悬停在 iframe 上下文上，以在视口中突出显示该上下文。

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

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

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

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

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

更简单的网络节流选项

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

图 11. 新的网络节流选项

节流选项已调整为与其他内核级节流工具保持一致。开发者工具不再在每个选项旁边显示延迟时间、下载和上传指标，因为这些值会产生误导。目标是与每个选项的真实体验相匹配。

默认启用异步堆栈

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

2017 年 Google I/O 大会上的 DevTools

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，以报告 DevTools 问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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