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

我们最喜欢的浏览器的每个新版本都充满了期待，而 Firefox 76 也不例外！此更新为 Web 平台支持带来了许多令人兴奋的新功能，包括 音频 Worklets 和一些针对 JavaScript 的 Intl 增强。

此外，我们还在开发者工具中添加了一些很棒的新功能，使使用 Firefox 进行开发变得更加轻松快捷。

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

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

开发者工具新增功能

在本版本中，我们发现开发者工具的所有面板都有令人兴奋的更新。

此外，未来的功能也可以在 Firefox Developer Edition 中抢先体验。

更多 JavaScript 生产力技巧

在 Firefox 中调试 JavaScript 变得更加容易。

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

通常，调试工作会集中在特定的一组文件中，这些文件很可能包含错误的根源。

通过“黑盒化”，我们可以告诉 调试器忽略我们不需要调试的文件。

现在，由于 Stepan Stava 在调试器源面板中新增的上下文菜单，操作整个文件夹变得更加容易。

您可以选择将忽略功能限制在所选文件夹内或外的文件。

现在，您还可以将此功能与“设置目录根目录”结合使用，以获得如同外科手术般精准的调试体验。

针对大型控制台片段的折叠输出

多行编辑器模式 非常适合处理更长的代码片段。

早期反馈表明，用户不希望在控制台输出中重复代码，以避免信息超载。

感谢 thelehhman 的贡献，多行代码片段可以干净地折叠起来，并且可以根据需要进行扩展。

在调用堆栈中复制完整 URL

在调试器中复制堆栈使您能够在每个步骤中共享快照，从而更容易地定位错误并帮助您的同事。

为了向您的合作者提供错误的完整上下文，调用堆栈面板 中的“复制堆栈跟踪”菜单现在会复制完整的 URL，而不仅仅是文件名。

在 Firefox 中始终显示 JSON 预览中的“展开全部”

JSON 文件的内置预览使查找答案和探索 API 端点变得更加容易。

对于大型文件，此功能也非常有用，您可以根据需要展开数据。

感谢 zacnomore 的贡献，“展开全部”选项现在始终可见。

更多网络检查技巧

Firefox 76 通过 网络监控器 使访问网络信息变得更加容易。

在 WebSocket 检查中支持 Action Cables

WebSocket 库使用多种不同的格式来编码其消息。

我们希望确保您的负载能够正确地格式化，以便您可以阅读它们。

在早期版本中，我们添加了对 检查 WebSocket 消息 的支持，用于 Socket.IO、SignalR 和 WAMP。

感谢 Uday Mewada 的合作，Action Cable 消息现在也会以正确格式显示。

隐藏 WebSocket 控制帧

服务器和浏览器使用 WebSocket 控制帧来管理实时连接，但它们不包含任何数据。

感谢 kishlaya.j 的贡献，现在默认情况下可以隐藏控制帧，从而减少调试时的干扰。

如果需要查看控制帧，则可以在已发送/已接收下拉菜单中启用它们。

调整网络表格列的大小以适应内容

当使用网络面板时，在实时查看更新时，我们可能会遇到大量有关请求和响应的信息，从而需要关注特定的数据点。

自定义网络面板中的可见列可以根据问题调整输出。

过去，这需要大量拖放操作。

现在，感谢 Farooq AR，您只需双击表格大小调整控件即可将列的宽度调整为适合其内容，类似于现代数据表格。

改进网络响应的详细信息和复制功能

我们已经收到了一些反馈，认为复制网络数据的各个部分以供后续分析应该更加容易。

因此，我们更新了网络详细信息中的“响应”部分，以简化检查和复制操作，使这些操作更快、更可靠。

我们将在不久的将来继续添加更多改进，以简化网络分析的使用，感谢您的支持。

社区贡献

• Laurențiu Nicola 修复了网络请求菜单中的 “复制为 cURL”，并通过将 --globoff 添加到生成的命令使其更加可靠。
• Patricia Lee 将“在检查器中显示”选项添加到控制台上下文菜单中，作为从注册的 DOM 元素跳转到其在树中的位置的另一种方法。
• sankalp.sans 改进了 检查器中的“更改”面板 中的复制格式。

  现在，“复制 CSS 规则”会在规则之间插入空行，以便更容易地在编辑器中重用它们。

• Basavaraj 修复了一个问题，该问题会导致包含“+”的 网络查询参数 不显示。
• Aarushivij 修复了 网络性能分析 的渲染方式，使其更好地适应较小的尺寸。

Developer Edition 新增功能：CSS 兼容性面板

Developer Edition 是 Firefox 的预发布渠道，它提供对新工具和平台功能的抢先访问。

它的配置还默认情况下为开发者提供了更多功能。

我们很高兴能够将新功能快速发布到 Developer Edition，以便我们可以获得您的反馈，例如以下亮点。

首先，在 Developer Edition 77 发布中，我们正在征求对我们新兼容性面板的反馈。

此面板将报告任何可能与其他浏览器不兼容的 CSS 属性，并且可以在检查器中访问。

我们邀请大家尝试一下并使用提供的“反馈”链接告诉我们您的想法以及我们如何进一步改进它。

Web 平台更新

让我们看看 Firefox 77 在 Web 平台更新方面为我们带来了什么。

音频 Worklets

音频 Worklets 提供了一种有用的方法来执行自定义的 JavaScript 音频处理代码。

音频 Worklets 与其前身 ScriptProcessorNode 有什么不同？Worklets 以类似于其他 Web Worker 的方式在主线程中运行，从而解决了我们之前遇到的性能问题。

基本思想是定义一个自定义的 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(&apos;white-noise-processor&apos;, 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 进行后台音频处理 指南中找到更多信息。

其他更新

除了 Worklets 之外，我们还为 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 Profiler 是一款帮助分析和改进 Firefox 中网站性能的工具。

现在，当网络请求由于 webRequest 的 阻塞控制器 而被挂起时，它将显示标记。

这对内容拦截器扩展的开发者来说特别有用，因为它可以确保 Firefox 以最佳速度运行。

这是一张 Firefox Profiler 运行时的屏幕截图：

总结

这就是最新版 Firefox 的全部内容。

希望您喜欢这些新功能！像往常一样，请随时在评论中分享您的反馈和问题。

结尾摘录：Firefox 76 在 JavaScript 方面为 Web 平台支持带来了大量精彩更新，例如音频和 Intl 的 worklet。

此外，我们还对 Firefox 开发者工具进行了大量重大的改进，使 JavaScript 的调试和开发变得更加容易和快速。