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

欢迎!Chrome 60 中开发者工具即将引入的新功能和重大变更包括:

查看下面的版本说明视频版本,或继续阅读以了解详情。

新功能

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

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

渐进式 Web 应用性能无障碍功能最佳实践方面,排名靠前的得分就是您在这三个类别中的总体得分。报告的其余部分是决定您的分数的每项测试的细分数据。 通过修复失败的测试来提高网页质量。

Lighthouse 报告

图 1. Lighthouse 报告

要审核网页,请执行以下操作:

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

2017 年 Google I/O 大会上的 Lighthouse

请观看下面的 Google I/O 2017 年 Google I/O 大会上的开发者工具演讲,详细了解 Lighthouse 在开发者工具中的集成。

为 Lighthouse 贡献力量

Lighthouse 是一个开源项目。如需详细了解 Lighthouse 的工作原理以及如何为其做贡献,请观看下面的 2017 年 Google I/O 大会上的 Lighthouse 演讲。

对 Lighthouse 评估有想法?请在此处发布!

第三方徽章

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

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

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

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

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

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

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

使用 Call TreeBottom-Up 标签页中的 Group by product 选项,按照导致活动的第三方实体对性能记录活动进行分组。如需了解如何使用开发者工具分析性能,请参阅分析运行时性能入门

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

图 4. 在 Bottom-Up 标签页中按产品分组

用于“继续前往此处”的新手势

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

单步调试代码时,请按住 Command (Mac) 或 Ctrl (Windows, Linux),然后点击以转到相应代码行。开发者工具以蓝色突出显示可跳转目的地。

前往此处

图 5. 前往此处

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

单步进入异步模式

让调试异步代码变得可预测,并为您提供完整的异步执行历史记录,这是开发者工具团队在近期的一大主题。

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

有关示例,请查看 I/O 上开发者工具演讲中的以下演示。

变更

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

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

控制台用于预览对象的方式

图 6. 控制台用于预览对象的方式

控制台现在如何预览对象

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

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

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

  • 标题用于说明每件商品的含义。
  • 标题下方的副标题说明了内容的来源网域。
  • 将鼠标悬停在 iframe 上下文上,即可在视口中突出显示它。

新的“上下文选择”菜单

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

“覆盖率”标签页中的实时动态资讯

在 Chrome 59 中记录代码覆盖率时,Coverage 标签页只会显示“Recording...”,而不会显示设备当前使用了哪些代码。现在,覆盖率标签页会实时显示正在使用的代码。

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

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

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

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

更简单的网络节流选项

简化了网络性能面板中的网络节流菜单,现在仅包含三个选项:离线慢速 3G(在印度等地区很常见)和快速 3G(在美国等地方很常见)。

新的网络节流选项

图 11. 新的网络节流选项

调整了限制选项,以与其他内核级限制工具保持一致。开发者工具将不再显示每个选项旁边的延迟时间、下载和上传指标,因为这些值具有误导性。目标是匹配每个选项的真实体验。

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

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

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

请在下方查看神秘的 Paul Irish 的演讲,详细了解开发者工具团队在过去一年的工作以及他们近期面临的重大主题。

下载预览渠道

您可以考虑将 Chrome Canary 版Dev 版Beta 版用作默认开发浏览器。通过这些预览渠道,您可以使用最新的开发者工具功能,测试先进的网络平台 API,并在用户采取行动之前发现网站上的问题!

与 Chrome 开发者工具团队联系

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

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文:@ChromeDevTools
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

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 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

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