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

Jecelyn Yeen

新的“媒体”面板

现在，开发者工具会在“媒体”面板中显示媒体播放器信息。

新的“媒体”面板

在开发者工具中的新媒体面板推出之前，有关视频播放器的日志记录和调试信息 在“chrome://media-internals”中找到。

新版“媒体”面板可让您更轻松地查看事件、日志、属性和帧时间轴 在视频播放器所在的同一个浏览器标签页中进行解码。您可以通过 更快地解决潜在问题（例如，为什么出现丢帧、为什么 JavaScript 需要与 以意想不到的方式呈现给播放器）。

Chromium 问题：1018414

通过元素面板上下文菜单捕获节点屏幕截图

现在，您可以通过“Elements”面板中的上下文菜单截取节点屏幕截图。

例如，您可以右键点击相应元素并截取目录的屏幕截图， 选择截取节点屏幕截图。

截取节点屏幕截图

Chromium 问题：1100253

“问题”标签页更新

控制台面板上的“问题”警告栏现已替换为常规消息。

控制台消息中的问题

“问题”标签页中现在默认隐藏第三方 Cookie 问题。启用新的包含 第三方 Cookie 问题复选框进行查看。

“第三方 Cookie 问题”复选框

Chromium 问题：1096481、1068116、1080589

模拟缺失的本地字体

打开“渲染”标签页，然后使用新的停用本地字体功能模拟缺失的 @font-face 规则中的 local() 个来源。

例如，当字体“Rubik”时，已在您的设备上安装，且 @font-face src 规则使用它 设为 local() 字体，Chrome 会使用您设备的本地字体文件。

启用停用本地字体后，开发者工具会忽略 local() 字体，并会从 网络。

模拟缺失的本地字体

开发者和设计人员经常会在开发过程中使用同一字体的两个不同副本：

  • 用于设计工具的本地字体，以及
  • 代码的网页字体

停用本地字体可让您更轻松地执行以下操作：

  • 调试和衡量网页字体加载性能和优化
  • 验证 CSS @font-face 规则的正确性
  • 了解网络字体与其本地版本之间的所有差异

Chromium 问题：384968

模拟非活跃用户

借助 Idle Detection API，开发者可以检测不活跃的用户并在处于空闲状态时做出响应 更改。现在，您可以使用开发者工具在传感器标签页中模拟 用户状态和屏幕状态，而不是等待实际闲置状态发生变化。您可以打开 从抽屉式导航栏中打开传感器标签页。

模拟非活跃用户

Chromium 问题：1090802

模拟 prefers-reduced-data

prefers-reduced-data 媒体查询用于检测用户是否更喜欢备用 使用较少数据来呈现网页的内容。

您现在可以使用开发者工具模拟 prefers-reduced-data 媒体查询。

模拟 preferences-reduced-data

Chromium 问题：1096068

支持新 JavaScript 功能

现在，开发者工具可以更好地支持一些最新的 JavaScript 语言功能：

  • 逻辑赋值运算符 - 开发者工具现在支持使用新的 运算符 &&=、||= 和 ??=。
  • 美观输出数字分隔符 - 开发者工具现在可以正确输出数字分隔符 在“来源”面板中查看

Chromium 问题：1086817、1080569

Lighthouse 面板中的 Lighthouse 6.2

Lighthouse 面板现在支持 Lighthouse 6.2。请参阅版本说明，全面了解 更改列表

调整图片大小

Lighthouse 6.2 中的新审核：

  • 避免长时间运行的主线程任务。报告主线程上用时最长的任务， 找出造成输入延迟的最严重原因。
  • 链接可抓取。检查锚元素的 href 属性是否链接到适当的 目的，便于用户发现链接。
  • 图片元素未调整大小 - 检查是否为图片元素设置了明确的 width 和 height。 显式图片大小可以减少布局偏移并改善 CLS。
  • 避免使用非合成的动画。报告非合成动画，这些动画出现卡顿和 降低 CLS。
  • 监听 unload 事件。报告 unload 事件。不妨考虑使用 pagehide 或 visibilitychange 事件，因为 unload 事件无法可靠地触发。

Lighthouse 6.2 中更新了审核：

  • 移除未使用的 JavaScript。如果某个页面 可公开访问的 JavaScript 源代码映射。

Chromium 问题：772558

弃用“其他源”列于“Service Workers”窗格中

现在，开发者工具会提供一个链接，供您在新的 浏览器标签页 - chrome://serviceworker-internals/?devtools。

以前，DevTools 会显示嵌套在 Application 面板下的列表 >Service Worker 窗格。

链接到其他源

Chromium 问题：807440

显示过滤后的项目的覆盖率摘要

现在，在设置过滤器时，开发者工具会动态重新计算并显示覆盖率信息摘要 在覆盖率标签页中应用。以前，覆盖率标签页始终显示 所有覆盖率信息的摘要

在下面的示例中，请注意摘要最初显示 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused.，然后说 应用 CSS 过滤后57 kB of 604 kB (10%) used so far. 546 kB unused.。

过滤出的项目的覆盖率摘要

Chromium 问题：1061385

“Application”面板中新增了框架详情视图

现在，开发者工具会显示每个帧的详细视图。点击 Frames（帧）下的相应帧即可访问报告 Application 面板中选择。

“Application”面板中新增了框架详情视图

Chromium 问题：1093247

已打开窗口的框架详情

现在，开发者工具还会在框架树下显示打开的窗口 / 弹出式窗口。框架详情视图 打开的窗口中包含其他安全信息。

已打开窗口框架的详细信息

Chromium 问题：1107766

安全与隔离信息 (COEP / COOP)

DevTools 现在会显示安全上下文、Cross-Origin-Embedder-Policy (COEP) 和 Cross-Origin-Opener-Policy (COOP)。

安全与隔离信息

框架详情视图中很快就会添加更多安全信息。

Chromium 问题：1051466

“元素和网络”面板更新

“Styles”窗格中的无障碍颜色建议

现在，开发者工具可为低色彩对比度文本提供颜色建议。

在下面的示例中，h1 的文本对比度较低。若要解决此问题，请打开 color 的颜色选择器 属性。展开 Contrast rate（对比度）部分后，开发者工具会提供 AA 以及 AAA 颜色建议点击建议的颜色以应用该颜色。

Chromium 问题：1093227

恢复“元素”面板中的属性窗格

“属性”窗格已恢复，但在 Chrome 84 中已废弃。在开发者工具的未来版本中， 我们将改进检查元素属性的工作流程。

“元素”面板中的“属性”窗格

Chromium 问题：1105205、1116085

“Network”面板中直观易懂的 X-Client-Data 标头值

在“Network”面板中检查网络资源时，开发者工具现在会格式化任何 X-Client-Data 标头值显示为代码。

X-Client-Data HTTP 标头包含一系列已启用的实验 ID 和 Chrome 标志 。原始标头值看起来像不透明字符串，因为它们是采用 base-64 编码的， 序列化协议缓冲区。为了让内容对开发者更透明，开发者工具 现在显示的是解码后的值。

人类可读的“X-Client-Data”标头值

Chromium 问题：1103854

在“Styles”窗格中自动填充自定义字体

现在，在修改 font-family 时，导入的字体会添加到 CSS 自动补全功能列表中 属性。

在此示例中，'Noto Sans' 是本地计算机中安装的自定义字体。显示位置 CSS 补全列表。而以前并不是这样。

自动填充自定义字体

Chromium 问题：1106221

在“网络”面板中一致地显示资源类型

现在，开发者工具会始终显示与原始网络请求相同的资源类型，并且 在发生重定向（状态 302）时，将 / Redirect 附加到 Type 列值。

以前，开发者工具有时会将类型更改为 Other。

显示重定向资源类型

Chromium 问题：997694

清除“元素”和“网络”面板中的按钮

Styles 窗格和 Network 面板中的过滤器文本框，以及 DOM 搜索文本 元素面板中的方框，现在添加清除按钮。点击清除即可移除 。

清除“元素”和“网络”面板中的按钮

Chromium 问题：1067184

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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