此页面由 Cloud Translation API 翻译。

开发者工具的新变化 (Chrome 78)

Kayce Basques

Audits 面板中的多客户端支持

您现在可以将 Audits 面板与其他开发者工具功能（例如请求屏蔽和本地替换）结合使用。

例如，假设您的“审核”面板报告显示您的网页的性能得分为 70，而最大的性能优化机会之一就是消除阻塞渲染的资源。

初始性能得分为 70。

图 1. 初始 Performance 得分。

初始报告指出，有 3 个阻塞渲染的脚本就是一个问题。

图 2. 初始报告指出，有 3 个阻塞渲染的脚本就是一个问题。

现在，审核日志面板可以与请求屏蔽结合使用，您可以首先屏蔽阻塞渲染的脚本的请求，从而快速衡量阻塞渲染的脚本对加载性能的影响：

使用“请求拦截”标签页拦截有问题的脚本。

图 3. 使用请求拦截标签页拦截有问题的脚本。

然后再次审核网页：

启用请求屏蔽功能后，性能得分提高至 97。

图 4. 在屏蔽有问题的脚本后，性能得分提高至 97。

您也可以使用 Local Overrides 为每个脚本标记添加 async 属性，但“我们还是把它留给读者练习。”转到多客户端演示进行试用。您也可以查看此 Twitter 微博，查看演示视频。

Chromium 问题 991906

付款处理程序调试

Application 面板的 Background Services 部分现在支持付款处理程序事件。

转到 Application（应用）面板。
打开付款处理程序窗格。
点击录制。即使关闭开发者工具，开发者工具也会记录 3 天的付款处理程序事件。

图 5. 记录付款处理程序事件。
如果您的付款处理程序事件发生在其他来源上，请启用显示来自其他网域的事件。
触发付款处理程序事件后，点击事件所在的行即可详细了解该事件。

图 6. 查看付款处理程序事件。

Chromium 问题 980291

“审核”面板中的 Lighthouse 5.2

Audits 面板现在正在运行 Lighthouse 5.2。新的第三方使用情况诊断评估会告诉您请求了多少第三方代码，以及这些第三方代码在网页加载时阻塞主线程的时长。如需详细了解第三方代码如何降低加载性能，请参阅优化第三方资源。

Lighthouse 报告界面中“第三方使用情况”审核的屏幕截图。

图 7. 第三方使用情况审核。

Chromium 问题 772558

“Performance”面板中的 Largest Contentful Paint

在 Performance 面板中分析加载性能时，Timings 部分现在包含 Largest Contentful Paint (LCP) 标记。LCP 会报告视口中可见的最大内容元素的呈现时间。

“Timings”（计时）部分中的 LCP 标记。

图 8. Timings 部分中的 LCP 标记。

若要突出显示与 LCP 相关联的 DOM 节点，请执行以下操作：

点击 Timings（计时）部分中的 LCP 标记。
将鼠标悬停在摘要标签页中的相关节点上，以在视口中突出显示该节点。

图 9. 摘要标签页的相关节点部分。
点击相关节点，在DOM 树中选中它。

通过主菜单提交开发者工具问题

如果您在开发者工具中遇到 bug 并想提交问题，或者想了解如何改进开发者工具并想提出新功能请求，请依次前往主菜单 > 帮助 > 报告开发者工具问题，在开发者工具工程团队的跟踪器中创建问题。在 Glitch 上提供一个最简单、可重现的示例，可以极大地提高团队修复 bug 或实现功能请求的能力！

帮助 > 报告开发者工具问题。" width="800" height="604">

图 10。主菜单 > 帮助 > 报告开发者工具问题。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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