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

Kayce Basques
Kayce Basques
X GitHub

Google 用户调研。

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

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

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

初始效果得分为 70。

图 1. 初始效果得分。

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

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

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

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

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

然后再次审核该网页：

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

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

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

Chromium 问题 #991906

付款处理程序调试

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

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

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

    记录付款处理程序事件。

    图 5. 记录付款处理程序事件。

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

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

    查看 Payment Handler 事件。

    图 6. 查看 Payment Handler 事件。

Chromium 问题 980291

“审核”面板中的 Lighthouse 5.2

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

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

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

Chromium 问题 772558

“性能”面板中的 Largest Contentful Paint

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

“Timings”（时间）部分中的 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 开发者工具团队联系

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

开发者工具的新变化

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