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

Google 用户调研。

“新媒体”面板

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

在 DevTools 中引入新的媒体面板之前，有关视频播放器的日志记录和调试信息可在 chrome://media-internals 中找到。

借助新的“媒体”面板，您可以在与视频播放器相同的浏览器标签页中更轻松地查看事件、日志、属性和帧解码时间轴。您可以更快地实时查看和检查潜在问题（例如，为什么会丢帧、为什么 JavaScript 会以意外的方式与播放器互动）。

Chromium 问题：1018414

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

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

例如，您可以右键点击相应元素，然后选择 Capture node screenshot，以截取目录的屏幕截图。

Chromium 问题：1100253

“问题”标签页更新

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

“问题”标签页中现在默认隐藏第三方 Cookie 问题。选中新的包含第三方 Cookie 问题复选框即可查看这些问题。

Chromium 问题：1096481、1068116、1080589

模拟缺失的本地字体

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

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

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

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

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

停用本地字体后，您可以更轻松地：

• 调试和衡量 Web 字体加载性能并进行优化
• 验证 CSS @font-face 规则的正确性
• 发现网络字体与其本地版本之间的任何差异

Chromium 问题：384968

模拟非活跃用户

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

Chromium 问题：1090802

模拟 prefers-reduced-data

prefers-reduced-data 媒体查询用于检测用户是否希望系统提供替代内容，以便使用更少的数据来呈现网页。

您现在可以使用 DevTools 模拟 prefers-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 Worker”窗格中的“其他来源”列表

DevTools 现在提供了一个链接，可在新的浏览器标签页中查看来自其他来源的服务工作线程的完整列表 - chrome://serviceworker-internals/?devtools。

以前，开发者工具会在应用面板 > 服务工作线程窗格下显示一个嵌套列表。

Chromium 问题：807440

显示过滤后商品的覆盖范围摘要

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

在下面的示例中，请注意摘要最初显示 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

应用面板中的新帧详细信息视图

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

Chromium 问题：1093247

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

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

Chromium 问题：1107766

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

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

我们很快就会在帧详细信息视图中添加更多安全信息。

Chromium 问题：1051466

“元素”和“网络”面板更新

“样式”窗格中有关易于分辨颜色的建议

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

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

Chromium 问题：1093227

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

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

Chromium 问题：1105205、1116085

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

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

X-Client-Data HTTP 标头包含浏览器中已启用的实验 ID 和 Chrome 标志的列表。原始标头值看起来像不透明的字符串，因为它们是经过 base64 编码的序列化 protocol buffer。为了让开发者更清楚地了解内容，开发者工具现在会显示解码后的值。

Chromium 问题：1103854

在“样式”窗格中自动补全自定义字体

现在，在样式窗格中编辑 font-family 属性时，导入的字体会添加到 CSS 自动填充列表中。

在此示例中，'Noto Sans' 是安装在本地计算机中的自定义字体。它会显示在 CSS 补全列表中。之前，情况并非如此。

Chromium 问题：1106221

在“网络”面板中始终显示资源类型

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

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

Chromium 问题：997694

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

样式窗格和网络面板中的过滤条件文本框，以及元素面板中的 DOM 搜索文本框，现在都带有清除按钮。点击清除可移除您输入的所有文字。

Chromium 问题：1067184

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次点击 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，报告开发者工具问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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