大家好！六个星期过去了，进步的步伐仍在继续… 进步… 越来越快。这意味着我们有了一个全新的 Firefox 可以分享，其中包含大量的错误修复、性能改进，以及（特别是）很棒的开发者工具！所以准备好你的餐巾纸，享受一下 Firefox 62 中一些新特色的试吃菜单。

塑造你的浮动元素

CSS Shapes 使得浮动元素能够塑造周围内容的流动，超越了我们一直受到限制的经典矩形边界框。例如，在上面的截图和链接的演示中，文本围绕着葡萄的形状而不是图像的边框进行换行。它提供了从基本形状到复杂多边形的各种属性。当然，有关于所有这些的很棒的文档，但 Firefox 62 还包括新的工具，既可以检查又可以可视化地操作 CSS Shapes 值。

你可以从昨天 Josh Marinacci 关于新 CSS Shapes 工具的帖子中了解更多信息。

可变字体来了！

没有双关语，我只是很兴奋！OpenType 字体变体允许单个字体文件包含同一字体的多个实例，对实例之间的差异进行编码。除了在一个文件中之外，字体创建者还可以公开任意数量的变体轴，这些轴可以让开发者对字体的渲染方式进行细粒度控制。这些可以是标准的变体，比如字体粗细（字体粗细 536 看起来不错吗？没问题！），或者以前无法通过 CSS 获得的变体（x 高度！serif 大小！）。除了为排版狂热者提供糖果店的可能性外，能够用多个变体提供单个文件可以显著节省页面大小。Dan Callahan更深入地探讨了可变字体带来的可能性以及 Firefox 如何让您轻松调整这些新的自定义值。

开发者工具命令

开发者工具栏是 Firefox 开发者工具中除 Web 控制台之外的另一个命令repl 输入。我说“是”，因为从 Firefox 62 开始，它已经被移除。它一直很难找到，并且没有得到应有的宣传，但它确实包含了一些强大的命令。这些命令中的大多数已经逐渐迁移到开发者工具的其他地方，并在 Firefox 62 中完成，因此我们完全删除了工具栏。

最后迁移的命令之一是screenshot，它是开发者工具 UI 中“截图”按钮的强大版本。screenshot 命令现在在 Web 控制台中以:screenshot 的形式提供！ 例如，您是否曾经需要为打印提供页面高分辨率截图？您可以通过命令指定更高的像素密度来进行截图

:screenshot --dpr 4

还有很多其他选项，比如指定输出文件名、捕获延迟和选择器裁剪的截图。Eric Meyer 在他的博客上写了一篇关于:screenshot 功能的精彩介绍，它将改变您的页面捕获方式！

🌠 您知道吗：除了:screenshot 之外，Web 控制台中还有许多其他有用的命令和魔法变量可用？您可以在MDN Web 文档上了解它们。

更多像素，更多面板

您有 4K 显示器吗？您的浏览器窗口是否沐浴在充足的屏幕空间中？让您的开发者工具在页面检查器的新3 列模式中伸展四肢。您现在可以将 CSS 规则视图弹出到它自己的列中，以便您可以并排查看样式信息和出色的网格工具或动画面板。

简化 MediaStream

如果您使用过 WebRTC 的getUserMedia API，您可能熟悉将 MediaStream 对象附加到<video> 或<audio> 标签时的分支逻辑

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(function(stream) {
  if ("srcObject" in video) {
    videoEl.srcObject = stream;
  } else {
    videoEl.src = URL.createObjectURL(stream);
  }
});

的确，早期对 WebRTC 的支持需要使用URL API，但这是非标准的，不再需要。Firefox 62 移除对将 MediaStream 传递给createObjectURL 的支持，因此请确保您使用的是上面的适当的兼容性检查。

为什么止步于此？

我已经向您展示了 Firefox 62 中一些新奇的功能，但还有更多值得学习和热爱的东西！请务必查看产品发行说明，了解面向用户的功能以及在MDN 上面向开发者的更完整的更改列表。

祝您开发愉快！