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

Kayce Basques

“审核”面板中的多客户支持

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

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

图 1. 初始效果得分。

图 2. 初始报告显示，3 个会阻塞渲染的脚本存在问题。

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

图 3. 使用请求屏蔽标签页屏蔽问题脚本。

然后再次审核该网页：

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

您也可以使用本地替换为每个脚本标记添加 async 属性，但“我们将此留给读者自行练习”。如需观看视频演示，请查看这条推文。

Chromium 问题 #991906

付款处理程序调试

应用面板的后台服务部分现在支持付款处理程序事件。

1. 前往应用面板。
2. 打开付款处理程序窗格。

3. 点击录制。即使 DevTools 处于关闭状态，也会记录 Payment Handler 事件 3 天。

   

   图 5. 记录 Payment Handler 事件。

4. 如果付款处理脚本事件发生在其他来源，请启用显示其他网域的事件。

5. 触发 Payment Handler 事件后，点击相应事件的行即可详细了解该事件。

   

   图 6. 查看 Payment Handler 事件。

Chromium 问题 980291

“审核”面板中的 Lighthouse 5.2

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

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

Chromium 问题 772558

“性能”面板中的 Largest Contentful Paint

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

图 8. 时间部分中的 LCP 标记。

突出显示与 LCP 关联的 DOM 节点：

1. 点击时间部分中的 LCP 标记。

2. 将鼠标悬停在摘要标签页中的相关节点上，以突出显示视口中的相应节点。

   

   图 9. 摘要标签页的相关节点部分。

3. 点击相关节点，即可在 DOM 树中选择该节点。

通过主菜单提交 DevTools 问题

如果您在开发者工具中遇到 bug 并想提交问题，或者如果您有关于如何改进开发者工具的想法并想请求新功能，请前往主菜单 > 帮助 > 报告开发者工具问题，在开发者工具工程团队的跟踪器中创建问题。提供可重现的最小示例可大幅提高团队修复您的 bug 或实现您的功能请求的能力！

帮助 > 报告 DevTools 问题。” width="800" height="604">

图 10。主菜单 > 帮助 > 报告 DevTools 问题。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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