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

新的 CSS flexbox 调试工具

现在,开发者工具已拥有专用的 CSS flexbox 调试工具!

CSS flexbox 调试工具

当您页面上的某个 HTML 元素应用了 display: flexdisplay: inline-flex 后,“元素”面板中该元素旁边就会显示 flex 标志。点击该标志可切换页面上显示 Flex 叠加层。

Styles 窗格中,您可以点击 display: flexdisplay: inline-flex 旁边的新图标以打开 Flexbox 编辑器。Flexbox 编辑器提供了一种快速修改 Flexbox 属性的方法。亲自尝试一下吧!

此外,Layout 窗格还包含 Flexbox 部分,用于显示页面上的所有 flexbox 元素。您可以切换每个元素的叠加层。

Layout 窗格中的 Flexbox 部分

Chromium 问题:11667101175699

新增了 Core Web Vitals 叠加层

利用新增的“Core Web Vitals”叠加层,更好地直观呈现和衡量网页性能。

Core Web Vitals 计划是 Google 推出的一项计划,旨在针对打造出色的 Web 体验至关重要的质量信号提供统一指南。

打开命令菜单,运行 Show Rendering 命令,然后启用 Core Web Vitals 复选框。

叠加层目前显示:

  • Largest Contentful Paint (LCP):衡量加载性能。为了提供良好的用户体验,LCP 应在网页首次开始加载后的 2.5 秒内发生。
  • First Input Delay (FID):衡量互动性。为了提供良好的用户体验,页面的 FID 应小于 100 毫秒
  • Cumulative Layout Shift (CLS):衡量视觉稳定性。为了提供良好的用户体验,网页应将 CLS 保持在小于 0.1 的范围内。

Core Web Vitals 叠加层

Chromium 问题:1152089

“问题”标签页更新

将问题数量移到了控制台状态栏中

控制台状态栏中现在添加了一个新的问题计数按钮,以提高问题警告的可见性。这将替换控制台中的问题消息。

控制台状态栏中的问题数

Chromium 问题:1140516

报告 Trusted Web Activity 问题

现在,“问题”标签页会报告 Trusted Web Activity 问题。旨在帮助开发者了解并解决其网站的 Trusted Web Activity 问题,从而提高应用的质量。

打开 Trusted Web Activity。然后,点击 Console 状态栏中的 Issues count 按钮,打开 Issues 标签页,即可查看问题。观看 Andre 的这一演讲,详细了解如何创建和部署 Trusted Web Activity。

“问题”标签页中的“可信网络活动”问题

Chromium 问题:1147479

在控制台中将字符串的格式设置为(有效)JavaScript 字符串字面量

现在,控制台会将字符串的格式设置为有效的 JavaScript 字符串字面量。以前,在输出字符串时,Console 不会转义双引号。

将字符串的格式设置为(有效)JavaScript 字符串字面量

Chromium 问题:1178530

“Application”面板中的“New Trust Tokens”窗格

现在,开发者工具会在 Application 面板下的新 Trust Tokens 窗格中显示当前浏览上下文中所有可用的信任令牌。

信任令牌是一种新的 API,可帮助打击欺诈行为并将机器人与真人区分开来,而无需被动跟踪。了解如何开始使用信任令牌

“New Trust Tokens”窗格

Chromium 问题:1126824

模拟 CSS color-gamut 媒体功能

模拟 CSS color-gamut 媒体功能

借助 color-gamut 媒体查询,您可以测试浏览器和输出设备支持的颜色的大致范围。例如,如果 color-gamut: p3 媒体查询匹配,则表示用户的设备支持 Display-P3 颜色空间。

打开命令菜单,运行 Show Rendering 命令,然后设置 Emulate CSS media feature color-gamut 下拉菜单。

Chromium 问题:1073887

改进的渐进式 Web 应用工具

现在,开发者工具会在控制台中显示更详细的渐进式 Web 应用 (PWA) 可安装性警告消息,并提供指向相关文档的链接。

PWA 可安装性警告

现在,如果清单 description 超过 324 个字符,Manifest 窗格会显示警告消息。

PWA 说明截断警告

此外,如果 PWA 的屏幕截图不符合要求,清单窗格现在会显示警告消息。如需详细了解 PWA 屏幕截图属性及其要求,请点击此处。

PWA 屏幕截图警告

Chromium 问题:11464501169689965802

“网络”面板中新增了 Remote Address Space

您可以使用网络面板中的新 Remote Address Space 列查看每个网络资源的网络 IP 地址空间。

新的“远程地址空间”列

Chromium 问题:1128885

提升了性能

现已改善在打开开发者工具的情况下的页面加载性能。在一些极端情况下,性能提升到原来的 10 倍

开发者工具会收集堆栈轨迹,并将其附加到控制台消息或异步任务,以便在日后出现问题时供开发者使用。由于此收集必须在浏览器引擎中同步进行,因此如果堆栈轨迹收集速度缓慢,则会大大降低开发者工具打开速度。我们成功地显著降低了堆栈轨迹收集的开销。

请继续关注有关实现方法的更详细的工程博文。

Chromium 问题:10694251077657

在“帧详情”视图中显示允许/禁止的功能

帧详情视图现在会显示由“权限”政策控制的允许和禁止的浏览器功能列表。

权限政策是一种 Web 平台 API,可让网站在其自身的框架或嵌入的 iframe 中允许或阻止使用浏览器功能。

根据“权限”政策允许/禁止的功能

Chromium 问题:1158827

在“Cookies”窗格中新增了 SameParty

现在,“Application”面板中的“Cookies”窗格会显示 Cookie 的 SameParty 属性。SameParty 属性是一个新的布尔属性,指示是否应在向同一 First-Party Set 的来源发出的请求中包含一个 Cookie。

SameParty 列

Chromium 问题:1161427

已弃用的非标准 fn.displayName 支持

不再支持非标准 fn.displayName。请改用 fn.name

displayName 的用法示例

一直以来,Chrome 都支持非标准 fn.displayName 属性,以便开发者控制 error.stack 和开发者工具堆栈轨迹中显示的函数的调试名称。在上面的示例中,调用堆栈之前会显示 noLongerSupport

fn.displayName 替换为标准 fn.name,后者在 ECMAScript 2015 中可配置(通过 Object.defineProperty),以替换非标准 fn.displayName 属性。

fn.displayName 的支持不可靠,且在各个浏览器引擎之间不一致。这会减慢堆栈轨迹收集速度,无论开发者是否实际使用 fn.displayName,都需要支付此费用。

名称用法示例

Chromium 问题:1177685

弃用“设置”菜单中的 Don't show Chrome Data Saver warning

Don't show Chrome Data Saver warning 设置已移除,因为 Chrome 流量节省程序已弃用

弃用了“不显示 Chrome 流量节省程序警告”设置

Chromium 问题:1056922

实验功能

在“问题”标签页中自动报告低对比度问题

开发者工具增加了对在“问题”标签页中报告对比度问题的实验性支持。

低对比度文本是网络上最常见的可自动检测无障碍功能问题。 在“问题”标签页中显示这些问题有助于开发者更轻松地发现这些问题。

打开存在低对比度问题的页面(例如此演示)。然后,点击 Console 状态栏中的 Issues count 按钮,打开 Issues 标签页,即可查看问题。

自动报告低对比度问题

Chromium 问题:1155460

“元素”面板中的完整无障碍功能树状视图

你现在可以切换查看网页经过改进的全新完整无障碍树状视图。

当前无障碍窗格会有限地显示其节点,仅显示从根节点到所检查节点的直接祖先链。新的无障碍树状视图旨在改进这一点,使无障碍树更易于探索、更实用、更易于开发者使用。

启用实验后,元素面板中会显示一个新按钮,点击该按钮即可在现有 DOM 树和完整的无障碍功能树之间切换。

请注意,此实验尚处于早期阶段。我们计划逐步改进和扩展该功能。

完整的无障碍功能树状视图

Chromium 问题:887173

下载预览渠道

您可以考虑将 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