在我们最新的精彩冒险中，我们已经发布了一个新的 Firefox 版本。版本 69 包含许多令人愉快的全新功能，包括 JavaScript 公共实例字段、Resize Observer 和 Microtask API、CSS 逻辑溢出属性（例如 overflow-block）以及 @supports 用于选择器.

我们还将介绍 Firefox 69 DevTools 中大量新调试功能的亮点，包括控制台消息分组、事件监听器断点和文本标签检查。

这篇文章仅仅提供了一些亮点；要了解所有细节，请查看以下内容

• Firefox 69 for developers
• Site compatibility for Firefox 69

新的 CSS

Firefox 69 支持一些新的 CSS 功能；最有趣的是以下内容。

用于溢出的新逻辑属性

69 版本支持一些新的 逻辑属性 — overflow-block 和 overflow-inline — 分别控制元素内容在块维度或内联维度上的溢出。

这些属性映射到 overflow-x 或 overflow-y，具体取决于内容的 writing-mode。使用这些新的逻辑属性而不是 overflow-x 和 overflow-y 使您的内容更容易本地化，尤其是在将其适应使用不同书写方向的语言时。它们也可以采用相同的取值 — visible、hidden、scroll、auto 等。

注意：如果您想了解这些概念，请查看 处理不同的文本方向。

@supports 用于选择器

@supports at-规则长期以来一直非常有用，可以有选择地仅在浏览器支持某个属性或不支持某个属性时应用 CSS。

最近，此功能已扩展，因此您可以仅在支持或不支持特定选择器时应用 CSS。语法如下

@supports selector(selector-to-test) {
  /* insert rules here */
}

从 Firefox 69 开始，我们默认支持此功能。您可以在 此处 找到一些用法示例。

JavaScript 获取公共实例字段

在 Firefox 69 中，我们对 JavaScript 语言进行的最有趣添加是支持 JavaScript 类中的公共实例字段。这允许您预先指定要让类拥有的属性，使代码更具逻辑性和自文档性，并且构造函数更简洁。例如

class Product {
  name;
  tax = 0.2;
  basePrice = 0;
  price;

  constructor(name, basePrice) {
    this.name = name;
    this.basePrice = basePrice;
    this.price = (basePrice * (1 + this.tax)).toFixed(2);
  }
}

请注意，您可以根据需要包含默认值。然后，可以使用您期望的方式使用该类

let bakedBeans = new Product('Baked Beans', 0.59);
console.log(`${bakedBeans.name} cost $${bakedBeans.price}.`);

私有实例字段（无法在类定义之外设置或引用）非常接近于在 Firefox 中获得支持，并且看起来也很有用。例如，我们可能希望隐藏税金和基本价格的详细信息。私有字段由名称前面的井号表示

#tax = 0.2;
 #basePrice = 0;

WebAPIs 的奇迹

Firefox 69 中默认启用了几个新的 WebAPI。让我们来看看。

Resize Observer

简而言之，Resize Observer API 允许您轻松地观察和响应元素内容或边框大小的变化。它提供了一个 JavaScript 解决方案来解决 Web 平台中经常讨论的 “元素查询” 的缺失问题。

一个简单的示例可能类似于以下内容（resize-observer-border-radius.html，另请参见源代码），它会调整 <div> 的 border-radius，使其随着变小或变大而变化

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    if(entry.contentBoxSize) {
      entry.target.style.borderRadius = Math.min(100, (entry.contentBoxSize.inlineSize/10) +
                                                      (entry.contentBoxSize.blockSize/10)) + 'px';
    } else {
      entry.target.style.borderRadius = Math.min(100, (entry.contentRect.width/10) +
                                                      (entry.contentRect.height/10)) + 'px';
    }
  }
});

resizeObserver.observe(document.querySelector('div'));

“但是您可以使用带百分比的 border-radius”，我听到您在喊。是的，有点像。但这很快就会导致难看的椭圆形角，而上面的解决方案则为您提供了随着框大小缩放的漂亮的方形角。

另一个稍微复杂一点的例子是以下示例（resize-observer-text.html，另请参见源代码）

if(window.ResizeObserver) {
  const h1Elem = document.querySelector('h1');
  const pElem = document.querySelector('p');
  const divElem = document.querySelector('body > div');
  const slider = document.querySelector('input');

  divElem.style.width = '600px';

  slider.addEventListener('input', () => {
    divElem.style.width = slider.value + 'px';
  })

  const resizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
        if(entry.contentBoxSize) {
            h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
            pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
        } else {
            h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
            pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
        }
    }
  });

  resizeObserver.observe(divElem);
}

在这里，我们使用 resize observer 来更改标题和段落的 font-size，因为滑块的值正在更改，导致包含 <div> 更改其宽度。这表明您可以响应元素大小的更改，即使这些更改与视窗大小的更改无关。

总而言之，Resize Observer 开辟了大量新的响应式设计工作，这些工作仅使用 CSS 功能很难完成。我们甚至正在使用它来实现 我们新 DevTools JavaScript 控制台的响应式版本！。

微任务

Microtask API 提供了一种方法 — <a href="https://mdn.org.cn/en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask">queueMicrotask()</a>。这是一种低级方法，使我们能够在微任务队列上直接调度回调。这将调度代码在控制权返回到事件循环之前立即运行，因此您可以确保可靠的运行顺序（例如，使用 setTimeout(() => {}, 0)) 会导致不可靠的结果）。

语法与其他计时函数一样简单

self.queueMicrotask(() => {
  // function contents here
})

用例是微妙的，但在您阅读 规范中的解释部分 时会变得有意义。这里最大的受益者是框架供应商，他们喜欢对调度进行更低级的访问。使用此功能将减少黑客攻击，并使框架在跨浏览器方面更具可预测性。

69 中的开发者工具更新

69 中的 DevTools 有各种有趣的添加，因此请务必查看它们！

JS 调试器中的事件断点和异步函数

JavaScript 调试器 有一些很酷的新功能，用于逐步执行和检查代码

• 事件监听器断点
• 异步函数的逐步执行

新的远程调试

在全新的 about:debugging 页面中，您会找到用于远程调试设备的选项分组，未来还将添加更多选项。在 69 版本中，我们启用了一种新机制，允许您远程调试同一台机器或同一网络上的其他机器上的其他版本的 Firefox（请参阅网络位置）。

控制台消息分组

在控制台中，我们现在将类似的错误消息分组在一起，目的是使控制台更整洁，减少对开发者的垃圾邮件，并使他们更有可能关注这些消息。反过来，这会对安全性/隐私产生积极影响。

新的控制台消息分组在初始关闭状态下如下所示

单击箭头打开消息列表时，它会显示所有分组的单个消息

最初，分组发生在 CSP、CORS 和跟踪保护错误上，未来还将添加更多类别。

选择器信息栏中的 Flex 信息

接下来，我们来看看 页面检查器。使用选择器或将鼠标悬停在 HTML 面板中的元素上时，元素的信息栏现在会显示它是否是 Flex 容器、项目或两者。

请参阅此页面 以了解更多详细信息。

辅助功能检查器中的文本标签检查

最后要提到的一个很棒的功能是 辅助功能检查器 中新的文本标签检查功能。

从辅助功能检查器顶部的下拉框中选择检查问题 > 文本标签时，如果辅助功能树中的节点缺少描述性文本标签，则会用警告符号标记所有这些节点。右侧的检查面板会提供问题的描述，以及一个了解更多链接，该链接会带您到 MDN 上提供更详细的信息。

WebExtensions 更新

最后但并非最不重要的是，让我们提一下 WebExtensions！进入 Firefox 69 的主要功能是 用户脚本 — 这些是一种特殊的扩展内容脚本，注册后会指示浏览器将给定的脚本插入与给定 URL 模式匹配的页面中。

另请参见

在这篇文章中，我们回顾了 Firefox 69 中添加的主要 Web 平台功能。您还可以了解 Firefox 浏览器的主要新功能 — 请参阅 Firefox 69 版本说明。