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

新媒体面板

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

新媒体面板

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

借助新的媒体面板,您可以在与视频播放器本身相同的浏览器标签页中,更轻松地查看事件、日志、属性和帧解码时间轴。您可以更快地实时查看和检查潜在问题(例如,为什么会发生丢帧、JavaScript 以意想不到的方式与播放器互动的原因)。

Chromium 问题:1018414

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

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

例如,您可以右键点击某个元素,然后选择截取节点屏幕截图,对目录进行屏幕截图。

截取节点屏幕截图

Chromium 问题:1100253

“问题”标签页更新

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

控制台消息中的问题

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

“第三方 Cookie 问题”复选框

Chromium 问题:109648110681161080589

模拟缺少的本地字体

打开“渲染”标签页,然后使用新的停用本地字体功能来模拟 @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 媒体查询。

模拟 preferreds-reduced-data

Chromium 问题:1096068

支持新的 JavaScript 功能

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

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

Chromium 问题:10868171080569

Lighthouse 面板中的 Lighthouse 6.2

Lighthouse 面板现在正在运行 Lighthouse 6.2。如需查看更改的完整列表,请查看版本说明

取消图片大小

Lighthouse 6.2 中的新审核:

  • 避免长时间运行的主线程任务。报告主线程上用时最长的任务,有助于识别导致输入延迟的主要因素。
  • 链接是可抓取的。检查锚标记元素的 href 属性是否链接到相应的目的地,以便发现链接。
  • 图片元素大小未调整 - 检查图片元素上是否设置了明确的 widthheight。显式图片大小可以减少布局偏移并改善 CLS。
  • 避免使用未合成的动画。报告出现卡顿并减少 CLS 的非合成动画
  • 监听 unload 事件。报告 unload 事件。请考虑改用 pagehidevisibilitychange 事件,因为 unload 事件无法可靠地触发。

更新了 Lighthouse 6.2 中的审核:

  • 移除未使用的 JavaScript。现在,如果页面具有可公开访问的 JavaScript 源代码映射,Lighthouse 将增强审核。

Chromium 问题:772558

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

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

以前,开发者工具显示了一个嵌套在 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 面板中 Frames 菜单下的某个帧即可访问它。

“应用”面板中新增了框架详细信息视图

Chromium 问题:1093247

已打开窗口的帧详情

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

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

Chromium 问题:1107766

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

现在,开发者工具会在帧详细信息中显示安全上下文,即 Cross-Origin-Embedder-Policy (COEP) 和 Cross-Origin-Opener-Policy (COOP)

安全和隔离信息

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

Chromium 问题:1051466

元素和 Network 面板更新

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

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

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

Chromium 问题:1093227

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

“属性”窗格回归了,该窗格在 Chrome 84 中已弃用。在日后的开发者工具版本中,我们将改进用于检查元素属性的工作流程。

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

Chromium 问题:11052051116085

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

在“Network”面板中检查网络资源时,开发者工具现在会将“Headers”窗格中的所有 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 面板中的过滤条件文本框以及 Elements 面板中的 DOM 搜索文本框现在都有 Clear 按钮。点击清除可移除您输入的任何文本。

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

Chromium 问题:1067184

下载预览渠道

您可以考虑将 Chrome Canary 版Dev 版Beta 版用作默认开发浏览器。通过这些预览渠道,您可以使用最新的开发者工具功能,测试先进的网络平台 API,并在用户采取行动之前发现网站上的问题!

与 Chrome 开发者工具团队联系

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

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文:@ChromeDevTools
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59