开发者工具中的新功能 (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 视频发表评论。

开发者工具的新变化

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

Chrome 128

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 浏览器 111

Chrome 浏览器 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 入门指南

Chrome 浏览器 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消。

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59