注意：本文亦提供以下语言版本：简体中文 (Chinese (Simplified))，繁體中文 (Chinese (Traditional))，Español (Spanish).

大家好，希望大家一切安好，保持安全。

您最喜欢的浏览器的全新版本总是值得期待，现在 Firefox 76 来了！此版本中，Web 平台支持增加了许多新功能，例如在 JavaScript 方面有 音频工作线程 和 Intl 方面的改进。此外，我们还为 Firefox 开发者工具添加了许多不错的改进，使开发变得更加容易快捷。

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

• 面向开发者的 Firefox 76
• Firefox 76 的网站兼容性
• Firefox 76 的最终用户发行说明

开发者工具新增功能

此版本中每个面板都包含有趣的开发者工具更新。您可以现在在 Firefox 开发版 中预览即将推出的功能。

更多 JavaScript 生产力技巧

Firefox JavaScript 调试变得更加出色。

在调试器中忽略整个文件夹

通常，调试工作只关注可能包含罪魁祸首的特定文件。使用“黑盒化”，您可以告诉 调试器 忽略不需要调试的文件。

现在，由于 Stepan Stava 在调试器的源代码面板中添加了新的上下文菜单，因此更容易对文件夹执行此操作。您可以将“忽略”限制为选定文件夹内或外部的文件。将此与“设置目录根目录”结合使用，获得更精准的调试体验。

为较大的控制台代码段折叠输出

控制台 的 多行编辑器模式 非常适合对较长的代码段进行迭代。早期反馈表明，用户不希望在控制台输出中重复代码，以避免混乱。由于 thelehhman 的贡献，具有多行的代码段会整齐地折叠起来，并可以根据需要展开。

在调用堆栈中复制完整 URL

在调试器中复制堆栈可以使您在逐步执行时共享快照。这有助于您提交更完善的错误报告，并促进与同事的交接。为了为协作者提供错误的完整上下文，调用堆栈面板 的“复制堆栈跟踪”菜单现在会复制完整 URL，而不仅仅是文件名。

在 Firefox 的 JSON 预览中始终提供“全部展开”

针对 JSON 文件的内置预览功能可以轻松地搜索响应和探索 API 端点。这对大型文件也很有效，其中数据可以根据需要展开。由于 zacnomore 的贡献，“全部展开”选项现在始终可见。

更多网络检查技巧

Firefox 76 通过 网络监视器 提供了更轻松地访问网络信息的方式。

在 WebSocket 检查中支持 Action Cable

WebSocket 库使用各种格式来编码其消息。我们希望确保正确解析和格式化它们的有效负载，以便您可以阅读它们。在过去的发行版中，我们添加了对 Socket.IO、SignalR 和 WAMP WebSocket 消息检查 的支持。由于贡献者 Uday Mewada，Action Cable 消息现在也得到了很好的格式化。

隐藏 WebSocket 控制帧

WebSocket 控制帧由服务器和浏览器用于管理实时连接，但它们不包含任何数据。贡献者 kishlaya.j 加入进来，默认情况下隐藏控制帧，从调试中剔除了一些额外的噪音。如果您需要查看它们，可以在发送/接收下拉列表中启用它们。

调整网络表列大小以适合内容

当您从扫描实时更新转向关注特定数据点时，网络请求和响应数据可能会不堪重负。自定义可见的网络面板列可以让您根据当前任务调整输出。以前，这需要大量的拖动和调整大小。由于 Farooq AR，您现在可以双击表格的调整大小手柄，以将列的宽度按比例缩放以适合其内容，就像在现代数据表格中一样。

更好的网络响应详细信息和复制

我们收到了反馈，应该更轻松地复制网络数据的某些部分以供进一步分析。

现在，网络详细信息的“响应”部分已实现现代化，通过更快的渲染速度和更高的可靠性，使其更易于检查和复制。在不久的将来，我们将为网络分析添加更多易用性改进，感谢您的反馈。

社区贡献

• Laurențiu Nicola 修复了网络请求 “复制为 cURL” 菜单，通过在生成的命令中添加 --globoff 使其更可靠。
• Patricia Lee 在控制台中添加了“在检查器中显示”上下文菜单选项，作为从记录的 DOM 元素跳转到 DOM 树中其位置的另一种方法。
• sankalp.sans 改进了 检查器的“更改”面板 中的复制格式。“复制 CSS 规则”现在会在规则之间插入空行，以便更容易在编辑器中重复使用它们。
• Basavaraj 修复了一个导致 网络查询参数 中包含“+”符号无法显示的问题。
• Aarushivij 修复了 网络的性能分析 的渲染效果，使其对更小的尺寸更加响应。

开发版新功能：CSS 兼容性面板

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

首先，在开发版 77 的发行版中，我们正在寻求对新的兼容性面板的意见。此面板将告知您哪些 CSS 属性可能不受其他浏览器支持，并且可以从检查器访问。

请试用它，并使用内置的“反馈”链接报告它的工作效果，以及我们如何进一步改进它。

Web 平台更新

让我们探索 Firefox 76 在 Web 平台更新方面带来了什么。

音频工作线程

音频工作线程提供了一种有用的方法来运行自定义 JavaScript 音频处理代码。音频工作线程与其前身——ScriptProcessorNode——之间的区别在于工作线程以类似于 Web 工作线程的方式在主线程之外运行，解决了以前遇到的性能问题。

基本思路是这样的：您定义一个自定义的 AudioWorkletProcessor，它将处理音频处理。接下来，注册它。

// white-noise-processor.js
class WhiteNoiseProcessor extends AudioWorkletProcessor {
  process (inputs, outputs, parameters) {
    const output = outputs[0]
    output.forEach(channel => {
      for (let i = 0; i < channel.length; i++) {
        channel[i] = Math.random() * 2 - 1
      }
    })
    return true
  }
}

registerProcessor('white-noise-processor', WhiteNoiseProcessor)

在您的主脚本中，您随后加载处理器，创建 AudioWorkletNode 的实例，并将处理器名称传递给它。最后，将该节点连接到音频图。

async function createAudioProcessor() {
  const audioContext = new AudioContext()
  await audioContext.audioWorklet.addModule('white-noise-processor.js')
  const whiteNoiseNode = new AudioWorkletNode(audioContext, 'white-noise-processor')
  whiteNoiseNode.connect(audioContext.destination)
}

阅读我们的 使用 AudioWorklet 进行背景音频处理 指南以获取更多信息。

其他更新

除了工作线程，我们还添加了一些其他 Web 平台功能。

HTML <input>

HTML <input> 元素的 min 和 max 属性现在在 min 的值大于 max 的值时工作正常，适用于值是周期性的控制类型。（周期性值以规律的间隔重复，从末尾绕回开头。）这对于 date 和 time 输入特别有用，例如，您可能希望指定一个时间范围为晚上 11 点到凌晨 2 点。

Intl 改进

Intl.NumberFormat、Intl.DateTimeFormat 和 Intl.RelativeTimeFormat 构造函数的 numberingSystem 和 calendar 选项现在默认启用。

尝试以下示例

const number = 123456.789;
console.log(new Intl.NumberFormat('en-US', { numberingSystem: 'latn' }).format(number));
console.log(new Intl.NumberFormat('en-US', { numberingSystem: 'arab' }).format(number));
console.log(new Intl.NumberFormat('en-US', { numberingSystem: 'thai' }).format(number));

var date = Date.now();
console.log(new Intl.DateTimeFormat('th', { calendar: 'buddhist' }).format(date));
console.log(new Intl.DateTimeFormat('th', { calendar: 'gregory' }).format(date));
console.log(new Intl.DateTimeFormat('th', { calendar: 'chinese' }).format(date));

交叉观察器

IntersectionObserver() 构造函数现在接受 Document 和 Element 对象作为其根节点。在这种情况下，根节点是其边界框被视为观察目的的视窗的区域。

浏览器扩展

Firefox 分析器 是一种工具，可帮助分析和改进您的网站在 Firefox 中的性能。现在，它将在扩展的 阻止 webRequest 处理程序 暂停网络请求时显示标记。这对内容阻止扩展的开发者特别有用，使他们能够确保 Firefox 保持最快的速度。

以下是对 Firefox 分析器运行时的屏幕截图

总结

这就是 Firefox 最新版本的所有内容，希望你喜欢新功能！与往常一样，欢迎在评论中提出反馈和问题。