Mozilla发布火狐76 包括音频工作包、开发人员工具和其他更新

本周著名浏览器火狐发布最新版本Firefox 76。在该版本中，增加了括音频工作包，加强了开发者工具箱JavaScript方面增加了一些很棒的新功能，例如Audio Worklets和Intl改进功能。请追随虫虫，大家一起来学习一下。

安全功能

在Firefox 76版本中，通过在此关键时刻管理帐户的创新方法来增强对在线帐户登录名和密码的保护：

当网站被破坏时，Firefox在Lockwise密码管理器中会显示严重警报。

如果一个帐户所涉及某个网站违规，并且和其他网站上使用了相同的密码，现在会提示更新密码。钥匙形图标标识哪些帐户使用该易受攻击的密码。

自动为更多网络上的新帐户生成安全，复杂的密码，这些密码可以轻松保存在浏览器中；

已经可以在主菜单下的"登录名"和"密码"下轻松访问并查看保存的密码。如果的设备碰巧是在家人或室友之间共享的，则最新更新有助于防止随便窥探。如果没有为Firefox设置主密码，则Windows和macOS现在需要登录到的操作系统帐户，然后才能显示保存的密码。

开发人员工具

在Firefo x76版本中每个面板都有有趣的DevTools更新。

JavaScript生产力技巧

Firefox JavaScript调试变得更好。

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

通常，调试工作只需针对可能的特定文件。使用"黑箱化"，可以让调试器忽略不需要调试的文件。新版本中调试器的源代码窗格中增加了文件数菜单，可以选择文件和目录，右键弹出菜单中执行黑箱化操作。

可以对所选文件夹内部或外部的文件选择 "黑箱化"忽略，并与"设置目录根"的功能结合使用，这样可以在需要调试目录中进行操作。

折叠输出

在控制台的多行编辑器模式可以让迭代上更长的代码片段。根据调查统计用户不想在控制台输出中重复代码，以免造成混乱。新版本中多行代码段可以通过折叠，并在需要时候展开。

复制调用堆栈中的完整URL

通过在调试器中复制堆栈，可以在单步调试中共享快照。这可以帮助我们更好的发现错误，并将其共享给协作者。新版本中调用堆栈窗格的"复制堆栈跟踪"菜单复制完整的URL，可以共享整个堆栈的上下文环境。

JSON预览中提供"全部展开"

JSON文件的内置预览使搜索响应和浏览API端点变得很容易。该功能也适用于大型文件，在大型文件中可以根据需要扩展数据。"全部展开"选项现在始终可用。

网络监视器

Firefox 76通过网络监视器提供了对网络信息的更轻松访问和调试。

WebSocket Action Cable消息格式化

WebSocket库使用多种格式来编码其消息。需要对其解析，并格式化以便可以读取。之前版本增加了对Socket.IO，SignalR和WAM WebSocket消息检查的支持。新版本中也增加了Action Cable消息的格式化。

隐藏WebSocket控制框

服务器和浏览器使用WebSocket控制框架来管理实时连接，但不包含任何数据。新版中默认情况下跳入隐藏控制帧，从而减少了调试产生的噪音。如果需要查看它们，可以在已发送/已接收下拉列表中启用它们。

调整网络表列的大小以适合显示

当从扫描实时更新转向关注特定数据点时，网络请求和响应数据可能会不堪重负。通过自定义可见的"网络"面板列，可以使输出适应当前的问题。之前只能通过拖放来调整窗体大小。新版本中，支持通过双击该表的大小调整手柄以缩放列的宽度以适应其内容。

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

新版本中网络细节的"响应"部分已实现现代化，可以更快，更可靠的方式呈现，从而使检查和复制更加轻松。

音频工作包

音频工作集提供了一种运行自定义JavaScript音频处理代码的有用方法。音频工作集与前身ScriptProcessorNodes之间的区别在于通过主线程运行的，从而解决了性能问题。

基本思路是：定义一个custom AudioWorkletProcessor，用它来进行处理。接下来，注册它。

// white-noise-processor.jsclass 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平台功能。

画中画

画中画功能可以在不同的应用程序甚至工作空间中执行多任务，即小型视频窗口，无论您在计算机上进行什么操作。在新版本中，可以通过双击切换画中画状态，双击使小窗口进入全屏状态。再次双击以减小尺寸。

Intl 改善

该numberingSystem和calendar的选项Intl.NumberFormat，Intl.DateTimeFormat以及Intl.RelativeTimeFormat构造函数现在默认情况下启用。示例：

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));

浏览器扩展

在Firefox的Profiler扩展是用于帮助分析并改善网站性能的工具。现在，当网络请求被扩展的阻止webRequest处理程序暂停时，它将显示标记。对于内容程序扩展的开发人员特别有用，能够确保Firefox保持高速访问。

Firefox Profiler的屏幕截图如下：