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

Kayce Basques

审核面板中的多客户支持

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

例如，假设您的审核面板报告显示您的网页的性能得分为 70，并且您最大的性能改进机会之一是消除导致渲染阻塞的资源。

初始效果得分为 70。

图 1. 初始效果得分。

初始报告指出，有 3 个会阻止呈现的脚本存在问题。

图 2. 初始报告指出，有 3 个会阻止呈现的脚本存在问题。

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

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

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

然后再次审核该网页：

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

图 4. 屏蔽存在问题的脚本后，效果得分提高到了 97。

或者，您也可以使用本地替换项为每个脚本代码添加 async 属性，但“我们将把这项练习留给读者。”请参阅多客户端演示进行试用。或者，查看这条推文，观看视频演示。

Chromium 问题 991906

付款处理程序调试

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

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

  3. 点击录制。DevTools 会记录 3 天的付款处理脚本事件，即使 DevTools 处于关闭状态也是如此。

    记录付款处理脚本事件。

    图 5. 记录付款处理脚本事件。

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

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

    查看付款处理脚本事件。

    图 6. 查看付款处理脚本事件。

Chromium 问题 980291

“审核”面板中的 Lighthouse 5.2

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

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

图 7. 第三方使用审核。

Chromium 问题 772558

“效果”面板中的 Largest Contentful Paint

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

“时间”部分中的 LCP 标记。

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

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

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

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

    “摘要”标签页的“相关节点”部分。

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

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

通过主菜单提交 DevTools 问题

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

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

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。