又一个版本发布了：欢迎 Firefox 71 登场！这次我们带来了大量的新开发者工具功能。包括 WebSocket 消息检查器、控制台多行编辑模式、事件监听器日志以及网络面板全文搜索！

除此之外，还提供了重要的 Web 平台新功能，比如 CSS 子网格、列跨度、Promise.allSettled 以及媒体会话 API。

继续阅读以了解更多亮点信息，以及下方链接提供的完整新增功能列表。

• Firefox 71 for developers
• Site compatibility for Firefox 71

Developer tools

让我们从新开发者工具功能开始！其中许多功能最初在 Firefox Developer Edition 中提供，并在早期用户反馈的基础上进行了改进。感谢大家提供帮助！

持续的速度和可靠性改进

Firefox 71 中的改进继续践行我们提供 稳定快速 DevTools 体验 的承诺。

我们知道 DevTools 的快速加载至关重要。我们已实施了自动化流程，以确保我们能够持续缩短加载时间。在 71 版本中，我们从 JavaScript 团队获得了帮助，他们对启动时缓存脚本的改进不仅使 Firefox 启动速度更快，还使 DevTools 加载速度更快。一项控制台测试的速度提高了惊人的 40%，而所有面板的速度都提高了 8-15%！

与格式化代码的交互得到了很多关注。在过去的几个版本中，我们已经改进了断点处理和暂停操作。在 71 版本中，指向脚本的链接（例如，来自 检查器中的事件处理程序工具提示 或控制台中的堆栈跟踪）能够可靠地将您带到预期的行，并且 调试通过 eval() 加载的源代码 现在也能按预期工作。

WebSocket 消息检查器

网络面板 新增了一个 消息 选项卡。您可以查看通过 WebSocket 连接发送和接收的所有消息。

已发送的帧带有绿色向上箭头图标，而已接收的帧带有红色向下箭头图标。您可以点击单个帧查看其格式化数据。

要了解更多关于 WebSocket 的信息以及如何使用此工具，请参阅这篇文章：Firefox 的新 WebSocket 检查器。非常感谢 Heng Yeow Tan，他作为 Google Summer of Code (GSoC) 实习生 开发了此功能。

网络全文搜索

有时您需要找到定义颜色的 CSS 文件，或者确定哪个文件生成了页面上的按钮标签。全文搜索让您能够搜索 网络监视器 中的所有资源，从而实现这一目标。与其他 DevTools 相似，您可以通过点击工具栏中的新“搜索”图标或使用快捷键（Windows：Ctrl + Shift + F，Mac：Cmd + Shift + F）打开新面板。全文搜索将突出显示请求/响应主体、标题和 cookie 中的匹配项。

提示：您可以使用网络面板中现有的 URL 和类型过滤器来限制搜索匹配的请求。

非常感谢 lloan Alas，他作为 Outreachy 实习生 开发了此功能。

网络请求阻止

模拟 阻止请求 使您能够测试页面在没有特定文件（例如 CSS 或 JavaScript）的情况下如何加载和运行。该面板位于新的全文搜索旁边。

您可以整体切换请求阻止功能，或输入单独的模式进行实验。为了简化列表输入，您可以粘贴多行模式，这些模式将被拆分为单独的规则。

请注意，阻止的请求将以红色显示，旁边有一个红色的“禁止进入”图标。

控制台多行编辑模式

Firefox 71 中的另一个出色开发者工具功能是新的多行控制台。它将 IDE 中编写代码的优势与在页面上下文中反复执行代码的工作流程相结合。

如果您打开常规控制台，您将在提示行末尾看到一个新的图标。

点击此图标将切换控制台到多行模式。

在这里，您可以输入多行代码，在每行代码之后按回车键，然后使用 Ctrl + Enter 运行代码。您还可以使用下一个和上一个箭头在语句之间移动。编辑器包含您期望的常规 IDE 功能，例如打开/关闭括号对突出显示和自动缩进。

目前，我们只提供了一个小而简单的功能集。我们将根据我们正在收集的反馈添加更多功能。

调试器中的内联变量预览

JavaScript 调试器 现在提供内联变量预览，这在逐步执行代码时非常有用。以前，您需要滚动浏览作用域面板才能找到变量值。或者，您可以在源代码窗格中将鼠标悬停在变量上。现在，当执行暂停时，您可以在源代码中直接查看相关的变量和属性值。

使用我们基于 babel 的源代码映射，预览功能也适用于那些在构建步骤中被重命名或缩短的变量。请确保通过在作用域面板中勾选 映射 来启用此强大功能。

如果您希望减少输出，可以在源代码窗格中的新上下文菜单选项中关闭预览功能。

非常感谢 Dhyey Thakore，他作为 GSoC 实习生开发了此功能。

事件监听器日志

最后，我们想谈谈 71 版本中 事件监听器断点 的更新。现在提供了一些不错的改进。

事件监听器日志使您能够探索哪些事件处理程序正在按什么顺序触发，而无需暂停和逐步执行。这是受 Firebug 的 记录 DOM 事件功能 启发的，但由于其与事件断点的结合，您可以更好地控制哪些事件会被监控。

例如，如果我们选择记录键盘事件，则代码不再在每次触发事件时暂停。

相反，我们可以切换到控制台，然后在每次按下键时，我们会得到一个记录相关的事件触发位置的日志。

这里的一个问题是控制台显示 keypress 事件 在 jQuery 的某个内部被触发。实际上，如果我们显示在自己的应用程序代码中哪个地方调用了触发事件的 jQuery，会更有用。为此，可以在源代码面板中找到 jquery.js，并从其上下文菜单中选择 黑盒源代码 选项。

现在日志将显示在应用程序代码中调用 jQuery 的位置，而不是在 jQuery 中触发事件的位置。

此外，还有一个新的 按事件类型过滤… 文本输入框。当您点击此输入框并输入搜索词时，事件监听器类型列表将按该词进行过滤，使您能够更轻松地找到要中断的事件。

CSS

71 版本中 CSS 的新增功能包括子网格、多列、clip-path: path 以及纵横比映射。

子网格

在经过一段时间在首选项的支持下启用后，grid-template-columns 和 grid-template-rows 的 subgrid 值允许您在网格项内部创建嵌套网格，该网格将使用主网格的轨道。这意味着子网格内的网格项将与父网格的轨道对齐，使各种布局技术更容易实现。

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.subitem {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
}

我们还更新了开发者工具的 网格检查器 以支持子网格！具体来说，我们有

• 允许同时突出显示多个网格。
• 在 HTML 面板 中添加了一个“子网格”徽章，该徽章显示在被指定为子网格的元素旁边，与现有的“网格”和“flex”徽章的工作方式相同。
• 当子网格被突出显示时，父网格也会被微妙地突出显示。

有关更多详细信息，请参阅 MDN 子网格页面。

多列 - 列跨度

随着 column-span 属性在 Firefox 71 中的引入，CSS 多列 支持有了很大进步。这使您可以使元素跨越多列容器中的所有列（使用 column-width 或 column-count 生成）。

article {
  columns: 3;
}

h2 {
  column-span: all;
}

您可以在文章 跨列和平衡列 中找到有关 column-span 的一些有用细节。

裁剪路径：path()

clip-path 属性 的 path() 值现在默认情况下已启用 - 这使您可以使用 path() 函数创建自定义遮罩形状，而不是像圆形或椭圆形这样的预定义形状。

#clipped {
  clip-path: path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z');
}

纵横比映射

最后，<img> 元素 上的 height 和 width HTML 属性现在映射到内部的 aspect-ratio 属性。

这使浏览器能够尽早计算图像的纵横比并在图像加载之前更正其显示大小（如果已应用会导致显示大小问题的 CSS）。

阅读 将媒体容器元素的宽度和高度属性映射到它们的纵横比 以获取完整的故事。

JavaScript 和 Web API

在本版本中，我们还对 JavaScript 进行了一些小的更改：Promise.allSettled()、媒体会话 API 和 WebGL 多视图。

Promise.allSettled()

最重大的变化是支持 Promise.allSettled() 方法，该方法与 Promise.all() 一样，将一个 Promise 对象数组作为参数。

但是，Promise.all() 只有在传递给它的所有 Promise 都已实现时才会实现，而 Promise.allSettled() 则是在传递给它的所有 Promise 都已解决（实现或拒绝）时才会实现。

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).
then((results) => results.forEach((result) => console.log(result.status)));
// expected output:
// "fulfilled"
// "rejected"

媒体会话 API

在 Web API 领域，主要的新增内容是对 媒体会话 API 的部分支持。此 API 为您的内容提供了一种标准机制，用于与底层操作系统共享有关正在播放的媒体状态的信息。例如，它包括元数据，如艺术家、专辑、曲目名称或专辑封面。

if ('mediaSession' in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Unforgettable',
    artist: 'Nat King Cole',
    album: 'The Ultimate Collection (Remastered)',
    artwork: [
      { src: 'https://dummyimage.com/96x96',   sizes: '96x96', type: 'image/png' },
      { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
      { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
      { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
      { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
      { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
    ]
  });

  navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('pause', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('seekbackward', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('seekforward', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ });
}

此 API 的目的是让用户无需打开启动它的特定页面即可了解正在播放的内容并进行控制。

WebGL 多视图

71 还默认公开了 OVR_multiview2 WebGL 扩展。这是 Web 平台的激动人心的新补充，它允许 WebGL 代码使用单个绘制调用在多个目标上进行绘制，从而提高性能。

多视图对 WebXR 代码尤其令人兴奋，在这种情况下，您始终必须绘制两次所有内容！阅读 WebXR 上的多视图 以获取更多信息。

用户功能

您可以在主要 Firefox 71 发行说明 中阅读有关添加到 Firefox 71 中的最有趣的用户功能的信息。

但是，我们想重点介绍画中画 (PIP)。如果您在网页上开始播放视频，但随后想要查看其他内容，您可以激活 PIP 并在继续浏览网页（或其他页面）的同时让视频在小覆盖窗口中继续播放。