即使在隔离的时代，我们的工程团队也已适应，保持专注，并努力为您带来另一个激动人心的新版 Firefox。在开发者工具方面，您将发现控制台中的即时评估、WebSocket 的事件断点以及许多其他功能。在 Web 平台方面，新增功能包括图像的 HTML 延迟加载、CSS 的 `min()`、`max()` 和 `clamp()` 函数、公共静态类字段以及对 Web 动画 API 支持的补充。

与往常一样，请继续阅读以了解亮点，或在以下文章中查找新增功能的完整列表

• Firefox 75 for developers
• Firefox 75 的网站兼容性
• Firefox 75 终端用户发行说明

开发者工具新增功能

让我们首先回顾一下 75 中最有趣的开发者工具新增功能。

控制台表达式的即时评估

在 控制台 中评估表达式是探索应用程序状态、查询 DOM 或仅尝试 JavaScript API 的一种快速方法。现在，使用 Firefox 的多行控制台模式 更加容易地对更长的代码进行原型设计，该模式变得更加友好，更像 IDE。

新的 *即时评估* 功能会在您键入时预览当前表达式的结果，类似于 Quokka.js 等编辑器。只要在 Web 控制台中键入的表达式没有副作用，它们的将在您键入时预览。

为了使预览尽可能无缝，进行了大量的改进。结果中 DOM 节点的元素将突出显示。代码内的自动完成会根据结果类型推荐方法和属性。此外，您可以预览错误，以帮助您更快地修复表达式。

更好的检查和测量

区域测量现在可调整大小

使用 DevTools 中的可选 区域测量工具，您可以快速在页面上绘制矩形以测量特定区域的高度、宽度和对角线长度。您可以在设置中的“可用工具箱按钮”下启用该工具。感谢 Sebastian Zartner [:sebo]，这些矩形现在具有调整大小手柄，因此您可以精确地调整它们。

使用 XPath 查找 DOM 元素

XPath 查询 通常用于自动化工具，以告知软件要查找和交互的元素。再次感谢 sebo，您现在可以在 检查器的 HTML 搜索 中使用 XPath 查找 DOM 元素。这使得更容易在真实网站上测试表达式和微调查询。

WebSocket 的事件断点

最近的每个 DevTools 版本都改进了 WebSocket 检查 功能。这一次，由于来自才华横溢的 Chujun Lu 的贡献，调试功能增加了一个不错的功能。

您现在可以选择在 WebSocket 事件处理程序执行时暂停或记录。使用调试器中新添加的 事件侦听器断点。当您选择“记录”选项时，将记录事件数据和已执行的处理程序，但执行不会暂停。

在其他 WebSocket 检查器新闻中，消息过滤器现在支持正则表达式，这要归功于长期贡献者 Outvi V。

网络新增功能

Firefox 75 的网络面板进行了大量的质量和性能工作。此版本标志着对渲染同时快速触发的请求的速度的重大改进，而不会占用您的 CPU 资源。

在界面方面，贡献者 Florens Verschelde 推动了在列之间添加边框以帮助可读性的提议和设计。请注意，该设计与 DevTools 的整体外观更加一致。过滤器按钮也更清晰，状态之间的对比度更高，这要归功于贡献者 Vitalii。

请求阻止面板可帮助您测试您的网站在匹配的请求失败时的弹性。它现在允许使用“*”的通配符模式。感谢 Duncan Dean 的贡献。

开发者版中的抢先体验 DevTools 功能

开发者版 是 Firefox 的预发布频道。它提供对工具和平台功能的抢先体验。它的设置也默认情况下为开发人员启用了更多功能。我们希望尽快将新功能引入开发者版以收集您的反馈，包括以下亮点。

调试器和控制台的异步堆栈跟踪

现代 JavaScript 代码严重依赖于将 async/await 堆叠在其他 异步操作（如事件、Promise 和超时）之上。由于与 JavaScript 引擎的更好集成，异步执行现在被捕获以提供更完整的画面。

调试器中的异步调用堆栈使您可以逐步执行事件、超时和基于 Promise 的函数调用，这些调用会随着时间的推移而执行。在控制台中，异步堆栈使查找错误的根本原因变得更加容易。

Web 平台更新

让我们探索 Firefox 75 在 Web 平台更新方面提供了什么。

图像的 HTML 延迟加载

延迟加载 是一种常见的策略，通过将资源标识为非阻塞（非关键）并在需要时才加载它们，而不是立即全部加载它们，从而提高性能。图像是在 Web 应用程序中延迟加载的最常见资产之一。

为了使图像延迟加载更加容易，我们引入了对 HTML <img> 元素的 load 属性的支持。将值设置为 *lazy* 将指示浏览器延迟加载屏幕外的图像，直到用户滚动到它们附近为止。唯一其他可能的值是 *eager*，正如您所预期的那样，它是默认值。

<img src="image.jpg" loading="lazy" alt="..." />

您可以通过检查其布尔值 `complete` 属性的值来确定给定的图像是否已完成加载。

注意：当热加载的内容全部加载完毕时，`load` 事件将被触发。此时，可视视窗中可能（甚至很可能）存在尚未加载的延迟加载图像。

注意：Chrome 还实现了对 <iframe> 内容的延迟加载的实验性支持，但这尚未成为标准；我们正在等待它被标准化。

CSS 的 `min()`、`max()` 和 `clamp()`

本月有一些激动人心的 CSS 新增功能！我们添加了对三个非常有用的 CSS 函数的支持，它们彼此密切相关，但用途不同

• min() - 接受一个或多个可能的值或计算以供选择，并确保所有情况下使用的值将是可能性中最小的值。实际上，这为响应式设计提供了一系列值，以及最大允许值。
• max() - 接受一个或多个可能的值或计算以供选择，并确保所有情况下使用的值将是可能性中最大的值。实际上，这为响应式设计提供了一系列值，以及最小允许值。
• clamp() - 接受三个值或计算：最小值、首选值和最大值。如果计算出的值低于最小值或高于最大值，则将使用最小值或最大值。如果计算出的值介于两者之间，则将使用首选值。这允许属性值适应元素或分配给它的页面的更改，同时保持在最小值和最大值之间。

这些函数对于响应式设计非常有用，并且可以节省大量时间和代码，用于以前可能使用 `min-width`、`width` 和 `max-width` 的组合、多个媒体查询甚至 JavaScript 来完成的事情。

CSS `min()`、`max()` 和 `clamp()` 的实际应用

让我们研究以下示例

html {
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: min(1000px, calc(70% + 100px));
}

h1 {
  letter-spacing: 2px;
  font-size: clamp(1.8rem, 2.5vw, 2.8rem)
}

p {
  line-height: 1.5;
  font-size: max(1.2rem, 1.2vw);
}

这里，我们将主体宽度设置为 `min(1000px, calc(70% + 100px))`，这意味着在较宽的视窗中，主体内容将为 `1000px` 宽。在较窄的视窗中，主体内容将为视窗宽度的 `70%` 加上 `100px`（直到此计算结果变为 `1000px` 或更多）！

顶级标题的字体大小设置为 `clamp(1.8rem, 2.5vw, 2.8rem)`。因此，它将至少为 `1.8rem`，最大为 `2.8rem`。在这两个值之间，`2.5vw` 的理想值将生效，因此您将看到标题文本在视窗宽度上增大和缩小，其中 `2.5vw` 计算为大于 `1.8rem` 但小于 `2.8rem`。

段落字体大小设置为 `max(1.2rem, 1.2vw)`，这意味着它将至少为 `1.2rem`。但它将在 `1.2vw` 的计算值大于 `1.2rem` 的计算值时开始增长。

您可以在我们的 `min()`、`max()`、`clamp()` 简单示例 中看到它的实际效果。

JavaScript 语言特性

75 版本中有一些有趣的 JavaScript 新增功能。

首先，我们现在有了 公共静态类字段。当您希望一个字段仅在每个类中存在一次，而不是在您创建的每个类实例中存在时，这些字段非常有用。这对于缓存、固定配置或任何您不需要在实例之间复制的数据尤其相关。基本语法如下所示

class ClassWithStaticField {
  static staticField = 'static field'
}

console.log(ClassWithStaticField.staticField)
// expected output: "static field"​

接下来，我们通过添加 `Intl.Locale` 对国际化 (i18n) 功能进行了进一步增强，`Intl.Locale` 是一个标准的内置构造函数，表示 Unicode 地区标识符。例如，您可以像这样创建一个韩语地区对象

const korean = new Intl.Locale('ko', {
  script: 'Kore', region: 'KR', hourCycle: 'h24', calendar: 'gregory'
});

然后按预期返回对象的属性

console.log(korean.hourCycle, japanese.hourCycle);
// expected output: "h24" "h12"

表单新增功能

在 Firefox 75 中，我们有一些有用的表单专用 API 新增功能

• `HTMLFormElement` 接口有一个新方法 `requestSubmit()`。与旧的（仍然可用的）`submit()` 方法不同，`requestSubmit()` 的行为就像单击了指定的提交按钮一样，而不是仅仅将表单数据发送到接收方。因此，将传递 `submit` 事件，并且在提交数据之前会检查表单的有效性。
• `submit` 事件现在由类型为 `SubmitEvent` 的对象表示，而不是简单的 `Event`。`SubmitEvent` 包含一个新的 `submitter` 属性，它返回用于触发表单提交的 `Element`。使用此事件，您可以为提交事件设置一个处理程序，该处理程序可以识别用于提交表单的多个提交按钮或链接中的哪一个。

Web 动画 API 增强功能

在 75 版本中，我们添加了许多新的 Web 动画 API 功能，使此规范更加有趣和实用。

隐式 to/from 关键帧

从现在开始，您可以仅设置动画的开始或结束状态（即单个关键帧）。如果能够，浏览器将推断动画的另一端。例如，考虑 此简单动画 - 关键帧对象如下所示

let rotate360 = [
  { transform: 'rotate(360deg)' }
];

我们只指定了动画的结束状态，而开始状态是隐含的。

自动移除填充动画

可以在同一个元素上触发大量的动画。如果它们是无限的（即正向填充），这会导致大量的动画列表，这可能会导致内存泄漏。出于这个原因，我们实现了 Web 动画规范中的一部分，该部分自动移除覆盖的正向填充动画，除非开发人员明确指定要保留它们。

您可以在我们的简单 替换无限动画演示 中看到它的实际效果。相关的 JavaScript 功能如下所示

• animation.commitStyles() - 运行此方法将动画的结束样式状态提交到正在被动画化的元素，即使动画已被移除。它将导致结束样式状态被写入到正在被动画化的元素，形式为样式属性中的属性。
• animation.onremove - 允许您运行一个事件处理程序，该处理程序在动画被移除（即进入活动替换状态）时触发。
• animation.persist() - 当您希望明确保留动画时，请调用 `persist()`。
• animation.replaceState - 返回动画的替换状态。如果动画已被移除，则为 `active`；如果调用了 `persist()`，则为 `persisted`。

时间线

`Animation.timeline` 获取器、`Document.timeline`、`DocumentTimeline` 和 `AnimationTimeline` 功能现在默认启用，这意味着您现在可以访问动画的时间线信息。此功能对于返回时间值以进行同步非常宝贵。

默认情况下，动画的时间线和文档的时间线相同。

获取活动动画

最后但并非最不重要的是，`Document.getAnimations()` 和 `Element.getAnimations()` 方法现在默认启用。它们分别允许您返回整个文档或特定元素上的所有活动动画的数组。

ARIA 注释

在 Firefox 75（在 Linux 和 Windows 上），您将看到对一组新的辅助功能特性的支持，这些特性统称为 ARIA 注释，这些特性将被发布在即将发布的 WAI-ARIA 1.3 规范中。这些特性使得在网页文档中创建可访问的注释成为可能。典型的用例包括编辑建议（即可编辑文档中的添加和/或删除）和评论（例如与正在审查的文档部分相关的编辑评论）。

目前还没有屏幕阅读器支持 ARIA 注释，但很快我们就可以使用这些新的角色和其他属性。有关示例和更多支持详细信息，请阅读 MDN 上的 ARIA 注释。

浏览器扩展

在 WebExtensions API 中添加了两个新的 `browserSettings`：`zoomFullPage` 用于缩放页面上的文本，以及 `zoomSiteSpecific`，它决定缩放是否仅应用于活动标签页，还是应用于同一网站的所有标签页。

总结

就是这样。我们在 Firefox 75 中打包了许多有趣的新功能；请查看它们，并玩得开心！与往常一样，请随时在评论中提供反馈并提出问题。