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

Jecelyn Yeen

“新媒体”面板

DevTools 现在会在“媒体”面板中显示媒体播放器信息。

“新媒体”面板

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

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

Chromium 问题：1018414

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

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

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

截取节点屏幕截图

Chromium 问题：1100253

“问题”标签页更新

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

控制台消息中存在问题

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

“第三方 Cookie 问题”复选框

Chromium 问题：1096481、1068116、1080589

模拟缺少的本地字体

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

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

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

模拟缺少的本地字体

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

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

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

  • 调试和衡量 Web 字体加载性能和优化
  • 验证 CSS @font-face 规则的正确性
  • 了解 Web 字体及其本地版本之间的任何差异

Chromium 问题：384968

模拟非活跃用户

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

模拟非活跃用户

Chromium 问题：1090802

模拟 prefers-reduced-data

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

您现在可以使用 DevTools 模拟 prefers-reduced-data 媒体查询。

模拟 prefers-reduced-data

Chromium 问题：1096068

支持新的 JavaScript 功能

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

  • 逻辑赋值运算符 - 现在，DevTools 支持在“控制台”和“源代码”面板中使用新的运算符 &&=、||= 和 ??= 进行逻辑赋值。
  • 以美观格式输出数字分隔符 - 现在，DevTools 会在“Sources”面板中正确以美观格式输出数字分隔符。

Chromium 问题：1086817、1080569

Lighthouse 面板中的 Lighthouse 6.2

Lighthouse 面板现在运行的是 Lighthouse 6.2。如需查看完整的变更列表，请参阅版本说明。

取消调整图片大小

Lighthouse 6.2 中的新审核：

  • 避免出现长时间运行的主线程任务。报告主线程中运行时间最长的任务，有助于识别出导致输入延迟的最主要原因。
  • 链接可供抓取。检查锚元素的 href 属性是否链接到合适的目标网站，以便搜索引擎发现这些链接。
  • 未设尺寸的图片元素 - 检查图片元素是否设置了明确的 width 和 height。 明确的图片大小可以减少布局偏移并改善 CLS。
  • 避免使用未合成的动画。报告出现卡顿并降低 CLS 的未合成的动画。
  • 监听 unload 事件。报告 unload 事件。由于 unload 事件无法可靠触发，因此建议您改用 pagehide 或 visibilitychange 事件。

Lighthouse 6.2 中的更新版审核：

  • 移除未使用的 JavaScript。现在，如果网页具有可公开访问的 JavaScript 源代码映射，Lighthouse 会增强审核功能。

Chromium 问题：772558

废弃了“Service Workers”窗格中的“其他来源”列表

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

以前，DevTools 会在应用面板 > 服务工作线程面板下嵌套显示一个列表。

关联到其他来源

Chromium 问题：807440

显示被滤除内容的覆盖率摘要

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

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

“应用”面板中新增了帧详情视图

现在，DevTools 会显示每个帧的详细视图。如需访问该窗口，请点击应用面板中帧菜单下的某个帧。

“应用”面板中新增了帧详情视图

Chromium 问题：1093247

打开的窗口的帧详细信息

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

已打开的窗口框架详情

Chromium 问题：1107766

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

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

安全和隔离信息

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

Chromium 问题：1051466

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

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

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

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

Chromium 问题：1093227

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

在 Chrome 84 中弃用的“属性”窗格已回归。在未来的 DevTools 版本中，我们将改进检查元素属性的工作流程。

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

Chromium 问题：1105205、1116085

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

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

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

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

Chromium 问题：1103854

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

现在，在 Styles 窗格中修改 font-family 属性时，系统会将导入的字体样式添加到 CSS 自动补全列表中。

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

自动补全自定义字体

Chromium 问题：1106221

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

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

以前，DevTools 有时会将类型更改为 Other。

重定向型展示广告资源类型

Chromium 问题：997694

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

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

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

Chromium 问题：1067184

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。