Firefox 58 新功能:开发者版

Firefox Quantum 让 Firefox 重新变得快速,但速度只是故事的一部分。大量的努力已经投入到让 Firefox 成为一个用于创建网页的出色工具。让我们深入了解 Firefox 58 中即将发布的更改,目前可在 Firefox 开发者版 中预览。

为 CSS 作者提供更多控制

继 Firefox 功能强大的 CSS Grid Inspector 成功之后,我们很高兴地推出一个针对具有 clip-path 属性的元素的 Shape Path 编辑器

您可以自己尝试 Chris Coyier 在 这个 CodePen 上的代码。

我们还实现了 CSS font-display 属性,允许作者指定浏览器应等待 Web 字体多长时间,以及何时应在字体加载后将其替换为另一个字体。

Firefox Quantum 还引入了 全新的 CSS 引擎(“Quantum CSS”),它修复了 Firefox 中 CSS 的许多 错误和不一致问题。例如,calc() 现在可以在规范规定的所有地方工作。

更好的调试器

我们一直在使用标准 Web 技术 重写我们的开发者工具。在开发者版中,控制台、调试器、网络监视器和响应式设计模式都是使用纯 HTML、JavaScript 和 CSS 在 React 和 Redux 等通用库之上实现的。这意味着您可以使用您现有的 Web 开发技能来修改 DevTools。debugger.html 的源代码在 GitHub 上,我们尽力标记 好的入门问题 并指导新贡献者。

我们在重写过程中实现了 大量新功能,但调试器值得特别提及。首先,源代码映射终于可以在所有地方工作,甚至包括对 JSX 等标记的适当语法高亮显示

调试器屏幕截图,显示了对 React 组件的 JSX 语法高亮显示 您可能还会注意到调试器识别了 Webpack,并在源树中对其进行了适当的标记。

类似地,调试器可以识别两打常见的 JavaScript 库,并在调用堆栈中对它们的堆栈帧进行分组。这使得在跟踪错误时可以轻松地将您编写的代码与框架提供的代码区分开来

屏幕截图显示了调试器中的调用堆栈。新的调试器不是一个没有区别的列表,而是根据库对堆栈帧进行了分组,显示了 React 调用 Redux 调用 Lodash。 我们甚至实现了“粘性”断点,当您重构或重新排列文件中的声明时,它们会智能地随着您的代码移动。

其他工具也得到了改进:控制台组 现在可以折叠,网络监视器 可以暂停,等等。

发现新 DevTools 的最佳方法是 下载开发者版 并亲自试用。

WebVR、FLAC 和其他细节

Firefox 正在推动 Web 的新基本功能。Firefox 55 引入了对 Windows 上 WebVR 的支持,并包含了 对 macOS 的实验性支持。在 Firefox 58 中,WebVR 现在默认情况下在 Windows 和 macOS 上都受支持。

如果您有兴趣在 Web 上创建虚拟现实体验,请查看 A-Frame 库,或者阅读我们关于 Firefox Quantum 如何以 90 fps 的速度提供流畅的 WebVR 性能 的文章。

在其他首创方面,Firefox 51 是第一个支持 FLAC(无损音频格式)的浏览器。到目前为止,这种支持仅限于桌面平台上的 Firefox(Windows、macOS 和 Linux),但 Firefox 58 将 FLAC 支持带到了 Android。这意味着 Firefox、Chrome 和 Edge 都支持除 iOS 之外的所有平台上的 FLAC

我们还做了一些更改,以帮助衡量和改进 Firefox 的性能

  • PerformanceNavigationTiming API 提供对与页面加载相关的性能指标的访问。
  • 非主线程绘制(“OMTP”)已在 Windows 上默认启用,通过减少主线程的工作量来提高 Firefox 的响应能力。
  • 我们启用了 基于预算的后台超时节流,它会减慢在后台标签中运行的脚本的速度,以节省更多 CPU 资源。

最后,内容安全策略 (CSP) 现在支持 worker-src 指令。

WebExtension API 添加

Firefox Quantum 删除了对传统附加组件的支持,并添加了数十个 新的 WebExtension API。Firefox 58 添加了 更多 API,包括:

例如,Tree Style Tab 现在可以从像 VivaldiFox 这样的 WebExtension 中采用主题颜色。

Animated screenshot of Tree Style Tab adopting dynamic theme colors from VivaldiFox

我们目前正在为 2018 年规划额外的 WebExtension 功能,包括研究 隐藏单个标签或整个标签栏 的可能性。

总结

这些只是亮点。要了解有关 Firefox 58 的更多信息,该版本目前可在 Beta 版开发者版 中获得,请查看 发行说明 和 MDN 的 面向开发者的 Firefox 58

关于 Dan Callahan

Mozilla 开发者关系工程师,前 Mozilla Persona 开发人员。

更多 Dan Callahan 的文章…


41 条评论

  1. 吉姆

    如果能有一个 websocket 监控器或类似的东西来查看 websocket 消息,那就太好了。以前做这个的附加组件现在在 quantum 中不再起作用了。这方面有什么更新吗?

    2017 年 11 月 21 日 下午 2:05

    1. 丹·卡拉汉

      我们希望在明年年初恢复 WebSocket 检查。 Bug 885508 跟踪使之实现的必要工作。

      2017 年 11 月 22 日 下午 4:21

  2. RS

    Mozilla 和贡献者在这个领域做了很多令人印象深刻的工作!

    我发现 WebExtensions 中的权限有一点令人失望,因为虽然我被告知附加组件想要什么,但我对此没有发言权。这种情况有可能改变吗?

    随机附加组件经常请求访问我所有的选项卡和网站。如果我只想允许附加组件在特定网站上运行,或者禁止它在某些页面上运行呢?那会很不错。

    另一件令人失望的事情是,没有附加组件请求互联网访问权限,这意味着任何请求访问我的历史记录或选项卡的附加组件都是隐私风险。Firefox 是推动隐私的领导者;附加组件的互联网访问权限和按站点权限将是对此的一个很好的补充。

    2017 年 11 月 21 日 下午 4:07

    1. 丹·卡拉汉

      选择性权限是一个非常有趣的想法——当附加组件想要被拒绝的权限时,它应该怎么做?您将如何向用户呈现这些选择?有很多棘手的 UX 问题需要解决,但值得考虑。我会将这个想法转达给附加组件团队。

      2017 年 11 月 22 日 下午 4:23

      1. 詹姆斯

        丹,

        很明显,如果附加组件没有权限,那么它要么禁用依赖于该功能的任何功能,要么崩溃。很多附加组件/应用程序往往会请求对与其功能无关的东西的权限。

        确保附加组件编写良好不是 Firefox 的工作,Firefox 的工作是确保用户可以控制附加组件的功能,以及附加组件是否具有执行合理操作的 API。

        2017 年 11 月 30 日 上午 5:50

  3. 罗伯特·阿布

    Firefox 57 和 Quantum 绝对是重大成就。但同时,你也破坏了很多很棒的附加组件,比如 SESSION MANAGER / TAB MIX PLUS。在我解决这个问题(见下文)之前,我将继续使用 Firefox 56(或 Waterfox)。Firefox 将失去很多高级用户。

    你能为 Session Manager / Tab Mix Plus 和其他类似扩展程序的开发人员准备制作 WebExtensions 所需的 API 吗?其中一些开发人员明确表示,只有在 Mozilla 准备好所有 API 后,他们才会准备 WebExtension。所需 API 的清单
    http://forums.mozillazine.org/viewtopic.php?p=14762057#p14762057
    http://forums.mozillazine.org/viewtopic.php?p=14772668#p14772668
    http://forums.mozillazine.org/viewtopic.php?p=14777435#p14777435

    此外,这些会话管理器扩展程序可以很好地与 FF 多帐户容器协作。

    2017 年 11 月 21 日 下午 10:29

    1. 丹·卡拉汉

      嗨,罗伯特,

      感谢您提供错误参考。我们目前正在计划明年优先考虑哪些 API,我会将这些列表转达给您。我知道像标签丢弃这样的功能对于将其他附加组件(如标签组)引入 Firefox Quantum 非常重要,因此应该很容易为它们进行辩护。当然,我不能保证任何具体的事情。我还想提醒您,Tab Mix Plus 的一些化妆功能(例如多行标签栏)可能在近期不会实现,因为我们仍在努力弄清楚如何在 Quantum 中最好地处理 UI 修改。

      如果您必须使用旧版本的 Firefox,请使用 Firefox 扩展支持版本(“ESR”),它仍在接收关键安全补丁。其他旧版本没有。ESR 目前基于 Firefox 52,它支持传统附加组件,但将在明年 5 月升级到 Firefox 59。

      再次感谢,

      2017 年 11 月 22 日 下午 4:33

      1. 罗伯特·阿布

        我更想恢复 SESSION MANAGER。
        我提到了 Tab Mix Plus,因为这个附加组件具有会话管理器功能,它需要与 Session Manager 相同的 API。
        像“Tab Session Manager”或“MySessions”这样的新的 WEs 可能也会从中受益(目前它们没有用,而且仍然有很多错误)。

        您熟悉这份 Google 文档吗?
        https://docs.google.com/spreadsheets/d/1TFcEXMcKrwoIAECIVyBU0GPoSmRqZ7A0VBvqeKYVSww/edit#gid=0
        (在此处找到: https://www.howtogeek.com/333230/why-firefox-had-to-kill-your-favorite-extension/ )
        根据这份文档,Session Manager 将不会移植到 Webextension。

        另一个页面
        https://arewewebextensionsyet.com/
        不包含有关 Session Manager 的任何信息。

        这两个页面上的信息似乎不是最新的。

        2017 年 11 月 22 日 下午 4:55

  4. 萨赫里亚·西卡特

    我需要 http://www.alexa.com/toolbar 回来。没有它我活不下去。请开发者。

    2017 年 11 月 21 日 下午 11:00

    1. 丹·卡拉汉

      我会看看是否可以给他们发封电子邮件。应该很容易 将他们的 Chrome 版本移植到 Firefox

      2017 年 11 月 22 日 下午 4:34

  5. 安德鲁·德·里德

    尽管如此,我仍然无法查看 websocket 帧

    2017 年 11 月 22 日 上午 5:06

    1. 丹·卡拉汉

      不幸的是,WebSocket 检查没有进入 Quantum,但我们希望在明年年初解决它。 Bug 885508 跟踪使之实现的必要工作。

      2017 年 11 月 22 日 下午 4:10

  6. 愤怒企鹅

    伙计们,Linux 的 WebVR 怎么样?

    2017 年 11 月 22 日 上午 6:59

  7. 罗杰·H·托马斯

    您好,我下载了新的 Firefox,但很失望地发现我的视频被损坏。所有视频都带有绿色/粉红色色调。所有其他功能似乎都正常工作。
    您有什么建议来清除图片吗?
    谢谢,罗杰

    2017 年 11 月 22 日 上午 8:50

    1. 丹·卡拉汉

      抱歉,视频有问题!我们错误地识别了一些 AMD GPU,导致您看到的视频损坏。今天应该已经推出了一个修补程序来修复它。您可以通过转到菜单 -> 帮助 -> 关于 Firefox 手动检查更新。

      2017 年 11 月 22 日 下午 4:18

  8. 丹尼尔·洛·尼格罗

    将堆栈帧分组到常见的 JavaScript 库中是一个非常好的功能!我一直想要这个功能 :)。

    2017 年 11 月 22 日 上午 9:35

    1. 丹·卡拉汉

      感谢您的赞美!在 59 中它变得更加出色:我们添加了一个小徽章在每个组旁边,显示隐藏了多少帧。:)

      2017 年 11 月 22 日 下午 4:35

  9. 凯斯

    “Firefox Quantum 移除对传统附加组件的支持,并添加了数十个新的 WebExtension API。”
    如果在 WebExtensions API 中有对它们的替代,我不介意不再支持基于经典 XPCOM/XUL 的附加组件。

    现实情况是,经典附加组件现在确实是传统附加组件(除非用户 *升级* 到 Firefox 52 ESR),由于 WebExtensions API 功能不足,无法进行适当的替换。

    应该有一个计划,确保前 50 个附加组件的功能(基于大约两个月前的经典 XPCOM 列表)在 3-4 个月内出现在 Firefox 中,然后在 6-8 个月后,所有前 100 个附加组件的功能应该完成,然后应该添加对下一批附加组件的缺失功能,直到过去使用的大多数附加组件功能再次可用。

    如果 Mozilla 做好功课,第一步应该很简单,因为大多数功能应该已经作为 WebExtension API 可用——但我担心事实并非如此……

    2017 年 11 月 22 日 下午 12:17

    1. 丹·卡拉汉

      我们做了功课,并在 Quantum 发布之前积极地与尽可能多的附加组件作者合作。我们决定在确信 API 和移植率足够好之后发布,而不是等待完美。目前 AMO 上有超过 6,800 个兼容的附加组件可用,这证明了这项工作的伟大成果。

      但是,我们完全意识到我们还有更多工作要做,我们期待在 2018 年完成这些工作。

      2017 年 11 月 22 日 下午 4:39

      1. 迈克尔

        那么,像 Classic Theme Restorer 这样的广泛使用的附加组件在 2019 年 5 月有工作的机会吗?或者没有计划引入当前缺失的 API 功能?

        2017 年 11 月 28 日 下午 11:44

  10. pjs

    所有关键重新绑定 vim/emacs 的插件都无法正常工作了。我的一位同事尝试了 Quantum 并放弃了,因为它没有他 Surfing Keys 插件的替代方案。我是一个长期使用 keysnail 的用户,我知道该插件的一些其他功能引发了一些隐私问题,但 Quantum 中没有替代方案。所有 pentadactyl 和 vimperator 用户也会错过他们的插件。关键绑定应该在任何地方都能正常工作。emacsy 插件会覆盖 ctrl-n 到下一行。你能想象我为了什么打开了多少个无用的 Quantum 窗口‽

    存在一个 bug。两年前就提交了。
    https://bugzilla.mozilla.org/show_bug.cgi?id=1215061

    2017 年 11 月 22 日 下午 5:05

  11. Patrik Ä

    许多新功能都非常受欢迎。但我不喜欢 Responsive Design Mode 的一些更改,具体来说
    – 我的自定义尺寸被删除了
    – 它不记得上次使用的尺寸
    – 设计、按钮很小,边距很大(我需要尽可能多的空间,我没有 4K 显示器),白色背景也不合适。

    2017 年 11 月 23 日 上午 1:21

  12. Magic Johnson

    您好,要求支持 WebP 图片格式太过分了吗?
    我已经等了好几年了。它将显著减少互联网流量。
    谢谢

    2017 年 11 月 23 日 上午 8:11

  13. Bernie

    最喜欢的顶部网站消失了,无法替换。从原来的 12 个,现在只有 9 个,还有 3 个无法加载的空白。
    我使用的是 Windows 10 专业版。

    以前的版本有 15 个可加载的最喜欢的顶部网站。

    ?????????????????????????????????????

    2017 年 11 月 24 日 上午 11:31

  14. Jesús Cea

    ## Firefox 57 很快,但它对我(Kubuntu 16.04)不起作用。许多网站显示字体渲染损坏/不可见。我书签的 31% 无法使用。发生了什么事,@mozilla @mozilla_hispano @firefox?使用全新配置文件进行测试,没有插件,只是全新的 #Firefox 安装

    一些截图

    https://twitter.com/jcea/status/931720673550065664

    2017 年 11 月 24 日 下午 5:37

  15. Richard

    我的 iSkysoft 视频转换器不再能在 YouTube 上下载 mp3 了..它说它与这个 Firefox 版本不兼容..需要帮助吗?

    2017 年 11 月 24 日 下午 9:09

  16. Alfonz

    您好,

    调试器和控制台消息列表 > 在以前的版本中,能够在代码中找到函数定义。当在控制台中写入函数并点击时。也可以直接点击控制台日志的右侧部分(有页面和行号),在点击后查看消息来自哪里。目前,这在大多数页面上不起作用 > 有时它会打开 viewsource: 这似乎找到了位置。但大多数情况下,它会打开调试器,并在页面的开头/脚本 js 处停止。它不起作用 - 我认为它在 56 或类似版本中被破坏了 - 这种行为存在于当前的 FF 开发者版本 58.0b6 中。最糟糕的是,它在同一个页面上的表现不同。在 Chrome 中它有效,在 FF52 ESR 中它也有效。只是新的 Firefox 坏了。

    我希望你们能够解决这个问题,这比添加新功能重要得多,因为基本功能无法正常工作。

    2017 年 11 月 24 日 下午 11:05

  17. Jkeks

    像 vimperator/fireguesture 这样的扩展无法在任何选项卡(包括 about:、未找到的 URL 等)上工作,但它必须工作,就像在 ff56- 中一样。

    2017 年 11 月 26 日 上午 9:49

  18. Alex

    我认为我们都喜欢更快的 Firefox Quantum。但你们必须知道,我们都讨厌失去使用 10 多年的扩展程序。

    我们需要更多 API 功能。现在它仍然比 Chrome 和其他浏览器更好,但它不再是以前那种特殊的味道。

    我希望你们和团队能够付出很多努力,让 Firefox 恢复那种味道。

    例如
    双击关闭选项卡
    opendownload
    下载管理器 s3

    是的,我非常想念它们!

    2017 年 11 月 26 日 上午 10:03

  19. dave

    你们需要解决这个 DRM 问题... ...我以前很怀疑要不要下载新的 Firefox,因为我通常遵循“如果它没有坏,就不要修它”的原则,但我确实更新到了 Quantum,然后我的 Netflix 立即无法在 Firefox 中运行... ...我在网上搜索后发现,很多人都在遇到问题。因此,我现在下载了 Chrome,我以前从未这样做过,它可以正常使用 Netflix... ...(这就是你们失去用户和捐款的方式)... ...另外,发布关于 bug 的新内容或声明,将有助于挽救用户和捐款,而不是对已知问题和修复时间表只字不提,从而导致用户转向其他浏览器。

    2017 年 11 月 27 日 上午 8:42

  20. Gy. Owen

    无法放大菜单栏、工具栏、选项卡等上的字体。
    主题和字体大小更改器也不再适用于 Quantum。
    字体大小对我们中的一些人来说至关重要。
    请帮忙。

    2017 年 11 月 27 日 上午 11:31

  21. Sara

    我很想看到 Tilt 与 Quantum 兼容。这是一个非常有用的插件

    2017 年 11 月 27 日 下午 12:41

  22. Andrea

    我认为新的 Firefox 没有像预期那样流行,因为它的 UI 很差。如果你们设法改进它,并让它变得美观,除了速度快、功能强大之外,你们还可以说服多年来切换到 Chrome 的用户再次尝试 Firefox(并继续使用它)

    2017 年 11 月 28 日 上午 9:44

  23. Matt Smart

    好消息,而且每次更新都在变得更好。我仍然想念样式编辑器中的颜色/颜色控制,仅仅提供十六进制/rgba 颜色代码没有帮助。在 firebug 中,可以选择打开一个颜色选择器,这太棒了,我很感谢它在检查器中可用,但如果它也能在样式编辑器中使用,那么这将非常完美,满足我在开发过程中规划或更改颜色/颜色时的前端需求。

    2017 年 11 月 29 日 上午 4:33

  24. Rick

    知道私人选项卡什么时候能再次正常工作吗?需要为每种类型的选项卡使用不同的窗口,这是我在 Firefox 57 中遇到的最大的问题。

    2017 年 11 月 29 日 上午 4:37

  25. Rob T

    你们认为它更好,好吧,对我们这些长期使用 Firefox 的用户来说,它并不更好。我失去了所有东西,它看起来很糟糕,我想我老了。我一直在家、在工作中使用 Firefox,永远都是。你们所做的只是让它更像 Chrome。
    我不得不恢复到 56 版本,才能回到原来的状态。
    我再也不会更新 Firefox 了,而且我并不孤单。
    它存在的时间很长,我很感谢它。

    2017 年 11 月 29 日 上午 7:12

  26. voidpointer

    你们知道“全局键盘快捷键”是否/何时会添加到扩展程序中吗?我从 Chrome 中非常想念的一件事是能够将我的媒体键映射到 Google Music,这样我就可以从键盘上暂停、播放、跳过歌曲。

    你们知道这方面有什么更新吗?

    2017 年 11 月 29 日 上午 11:55

  27. Konstantin

    阅读关于所有提到的花里胡哨的功能很有趣,但为什么不将 WebExtension API(在功能上)更接近其前身呢?

    例如,书签 API 仍然可以说是,不完整。相应的 bug,1225916,已经两年没有分配了,但开发人员似乎对此相当平静。

    毫无疑问,将 WebExtensions API 提升到至少部分与 XUL 一样强大的状态,远没有那么有趣,优先级也不高。

    就我个人而言,我认为,如果实用的插件仍然无法正常工作,仅仅因为开发人员放弃了对 API 的开发,那么更快的调试器、对 CSS 作者的更多控制以及以上提到的其他内容等等,这些都毫无优势。请注意,你们已经禁止了旧 API,而没有提供完全可用的新 API。掌声。

    2017 年 11 月 29 日 下午 4:05

  28. rane58

    我想要 Voikko 回来... ...!
    https://addons.mozilla.org/en-US/firefox/addon/finnish-spellchecker/

    2017 年 11 月 30 日 上午 9:16

  29. Martin Gray

    我不懂这些技术问题,但我希望 Firefox 能停止网页冻结和卡顿。它还没有。该怎么做?

    2017 年 11 月 30 日 上午 11:12

  30. Judev5762

    当我创建 DOM 中的动态节点时,是否有可能查看由 javascript/jquery 生成的源代码?Web 开发者工具不再提供此选项。提前感谢您的回答

    2017 年 11 月 30 日 下午 12:31

本文的评论已关闭。