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

Kayce Basques

Audits 面板中的多客户端支持

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

例如，假设您的“Audits”面板报告显示网页的性能得分为 70 提升性能的一个最大机会就是消除阻塞渲染的资源。

初始效果得分为 70。

图 1. 初始性能得分。

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

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

现在，Audits 面板可以与请求屏蔽功能结合使用，您可以快速 衡量阻塞渲染的脚本对加载性能的影响程度，方法是首先阻止 向阻塞渲染的脚本发出广告请求：

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

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

然后再次审核该网页：

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

图 4. 阻止有问题的脚本后，性能得分提高到 97。

或者，您也可以使用本地替换为每个脚本添加 async 属性。 标签，但是“我们把它留给读者练习吧”前往多客户端演示试用 。您也可以查看此 Twitter 微博观看演示视频。

Chromium 问题 991906

付款处理程序调试

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

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

  3. 点击录制。开发者工具会记录 3 天的付款处理程序事件，即使开发者工具 已关闭。

    记录付款处理程序事件。

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

  4. 如果付款处理程序事件是在其他网域上发生的，请启用显示来自其他网域的事件 来源。

  5. 触发付款处理程序事件后，点击事件所在的行即可详细了解该事件。

    查看付款处理程序事件。

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

Chromium 问题 980291

Audits 面板中的 Lighthouse 5.2

Audits 面板现正在运行 Lighthouse 5.2。新增的第三方使用情况诊断信息 审核结果会告诉您请求的第三方代码数量以及这些第三方代码阻止了多长时间 主线程进行调用如需了解详情，请参阅优化第三方资源 第三方代码会如何降低加载性能。

“Third-Party Usage”的屏幕截图Lighthouse 报告界面中的 KPI。

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

Chromium 问题 772558

“Performance”面板中 Largest Contentful Paint

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

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

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

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

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

  2. 将鼠标悬停在“摘要”标签页中的“相关节点”上，即可在视口中突出显示该节点。

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

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

  3. 点击 Related Node，在 DOM 树中将其选中。

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

如果您在开发者工具中遇到 bug 并想要提交问题，或者您知道 如需改进开发者工具并想要请求新功能，请转到主菜单 >帮助 >报告 DevTools 问题，在开发者工具工程团队的跟踪器中创建问题。提供 Glitch 上可重现的极小示例极大地提高了团队修复问题的能力 或实现您的功能请求！

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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