此页面由 Cloud Translation API 翻译。

开发者工具的新变化 (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 源代码映射，Lighthouse 现在将增强审核。

Chromium 问题：772558

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

开发者工具现在提供了一个链接，用于在新的浏览器标签页 chrome://serviceworker-internals/?devtools 中查看其他来源的 Service Worker 的完整列表。

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

链接到其他源

Chromium 问题：807440

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

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

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

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

Chromium 问题：1061385

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

现在，开发者工具会显示每个帧的详细视图。点击 Application 面板中 Frames 菜单下的帧即可访问该应用。

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

Chromium 问题：1093247

已打开窗口的框架详情

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

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

Chromium 问题：1107766

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

现在，开发者工具会在帧详情中显示安全上下文 Cross-Origin-Embedder-Policy (COEP) 和 Cross-Origin-Opener-Policy (COOP)。

安全与隔离信息

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

Chromium 问题：1051466

“元素和网络”面板更新

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

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

在下面的示例中，h1 的文本对比度较低。如需解决此问题，请在“Styles”窗格中打开 color 属性的颜色选择器。展开对比度部分后，开发者工具会提供 AA 和 AAA 颜色建议。点击建议的颜色以应用该颜色。

Chromium 问题：1093227

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

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

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

Chromium 问题：1105205、1116085

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

在 Network 面板中检查网络资源时，开发者工具现在会将 Headers 窗格中的所有 X-Client-Data 标头值的格式设置为代码。

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

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

Chromium 问题：1103854

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

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

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

自动填充自定义字体

Chromium 问题：1106221

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

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

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

显示重定向资源类型

Chromium 问题：997694

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

Styles 窗格和 Network 面板中的过滤器文本框以及 Elements 面板中的 DOM 搜索文本框现在都具有 Clear 按钮。点击清除可移除您输入的所有文本。

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

Chromium 问题：1067184

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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