Firefox 扩展程序实现跨浏览器和设备的网页开发

在开发应用程序时,跨多个浏览器和设备进行开发是开发者面临的主要问题。如果能够使用一个工具跨桌面、Android 和 iOS 调试应用程序,那不是很好吗?我们相信 Web 足够强大,可以提供满足这些需求的移动 Web 开发解决方案!

Firefox Tools Adaptor 是一个实验性的 Firefox 扩展程序,它将 Firefox 开发者工具连接到其他主流浏览器引擎。此扩展程序将我们为调试 Firefox OSAndroid 上的 Firefox 而构建的强大工具扩展到了其他主流移动浏览器,包括 Android 上的 Chrome 和 iOS 上的 Safari。目前,这些工具包括 Inspector、Debugger 和 Console。

没有什么可以取代设备上的测试。但设备上的开发者工具一直很繁琐且特定于供应商。跨平台开发涉及学习和在所有不同浏览器的开发者工具之间切换。

此扩展程序允许您使用桌面环境来处理多个小屏幕设备,而不会占用宝贵的屏幕空间。您只需使用设备,然后在您的电脑上找出问题所在,无论设备上的平台和浏览器引擎如何。

扩展程序的工作原理

立即试用

此项目仍处于早期阶段,但我们为好奇或想要贡献的开发者提供了一个预览版。您只需要最新版本的 Firefox Nightly 和扩展程序。请按照 Firefox Tools Adapter 说明 开始使用。

此预览版适用于 Android 上的 Chrome 37(当前可作为 Chrome Beta 获取)和 iOS 上的 Safari。某些部分运行良好,而其他部分则需要改进。请试用并告知我们您的想法!

幕后故事

此扩展程序是 Firefox 开发者工具协议的新实现。它不是直接与内容交互,而是与 Chrome 和 iOS 提供的远程调试协议进行通信。此实现托管在 Firefox 进程内部,并由 Firefox 开发者工具内部使用。

何时发布正式版?

我们今天展示的是一个早期预览版。我们将在未来几个月积极开发它,很大程度上取决于您的反馈。我们将及时通知您有关新更新的信息!

如何贡献

您可以访问 GitHub 项目页面 获取参与代码的说明。您的反馈也很有用:您可以在 Twitter 上与我们交流,地址为 @FirefoxDevTools,或通过 GitHub 问题UserVoice 向我们反馈。

关于 Robert Nyman [荣誉编辑]

Mozilla Hacks 技术布道师和编辑。发表演讲和撰写博客文章,主题涉及 HTML5、JavaScript 和开放 Web。Robert 是 HTML5 和开放 Web 的坚定支持者,自 1999 年以来一直从事 Web 前端开发工作,在瑞典和纽约市都有过工作经历。他还定期在 http://robertnyman.com 上发表博客文章,喜欢旅行和结识新朋友。

更多 Robert Nyman [荣誉编辑] 的文章…

关于 Chris Heilmann

HTML5 和开放 Web 布道师。让我们一起修复它!

更多 Chris Heilmann 的文章…


28 条评论

  1. Chris H

    看起来很棒,感谢您已经为这项工作做出的努力!
    我猜调试 iOS 上的 Safari 只能在 Mac 上进行?

    2014 年 9 月 11 日 下午 09:17

    1. Robert Nyman [编辑]

      调试 Safari 可以在 Mac OS X 和 Linux 上进行。详细信息请参阅 文档

      2014 年 9 月 11 日 下午 09:35

      1. Luke

        我不知道 Windows,但这个功能之前在我运行的 Linux 上是可以正常使用的
        https://github.com/google/ios-webkit-debug-proxy

        2014 年 9 月 12 日 下午 21:24

        1. Jeff Griffiths

          没错,它在 Linux 上可以正常使用,但(据我所知)在 Windows 上则不行。

          2014 年 9 月 13 日 下午 00:53

  2. Avicenna

    在 Windows 上调试 Android 有什么需要注意的吗?

    2014 年 9 月 11 日 下午 10:47

    1. Jeff Griffiths

      这是一个功能预览版,因此我确定存在一些错误,并且文章中提到了某些限制。我们的目标是发布对 Inspector、Debugger、Console 和 Netmonitor 工具的支持,但我们还没有完全实现。

      2014 年 9 月 12 日 下午 01:22

  3. Jonas

    这是一个值得参与的项目,但只有在 Firefox 的 UI 修复之后,并且只有在 Firefox 的性能和内存消耗可以与 Chrome 相媲美或优于 Chrome 之后,我们才会考虑。

    Firefox 正在失去越来越多的用户,因为你们一直无视 Firefox 用户的真实需求,而是在 Firebug 的有限重新实现和调试之类的功能上浪费时间。

    拜托,我们需要修复 Australis 带来的损害。我们需要提高 Firefox 的性能,并降低其内存使用量。这些才是我们的真实需求!

    如果这些问题得不到解决,我们其他人将被迫迁移到 Chrome。Chrome 将为我们提供与 Firefox 当前提供的 UI 相同的 UI,但运行速度更快,内存使用量更少。

    - Jonas

    2014 年 9 月 11 日 下午 15:11

    1. Robert Nyman [编辑]

      您好 Jonas,感谢您的想法。让我逐一进行解答。
      性能

      Firefox 在许多声誉良好的测试中被评为最佳网页浏览器

      - 最佳 Windows 8.1 浏览器:Chrome 与 Firefox 与 Internet Explorer
      - 2014 年最佳互联网浏览器软件评论
      - Softonic 的浏览器比较:Chrome、Firefox、IE 和 Opera 的正面交锋
      - Chrome 27、Firefox 22、IE10 和 Opera Next 基准测试 - Tom's Hardware

      “Firebug 的有限重新实现”

      Firefox 开发者工具拥有 Firebug 不具备的大量功能。请阅读 Hacks 上的文章MDN 上的更多信息。

      关于调试各种设备和平台上的多个网页浏览器:这是数百万网页开发人员最迫切的需求之一(如果不是最迫切的需求)。为了让 Web 成为尽可能强大和有效的平台,我们需要为网页开发者提供尽可能简便的开发方式。当然,Firefox 的改进和 Firefox 开发者工具的开发是同步进行的,它们并非互斥的。

      2014 年 9 月 12 日 下午 00:50

      1. Tim Riggs

        Robert,恕我直言,这并非一个有效的回答。

        Firefox 的性能问题是真实存在的,而且非常严重。我本人已经迁移到 Chrome,因为在我的 MB Pro 上,Chrome 的内存使用量是 Firefox 的 1/8。基准测试现在已经变得毫无意义。

        Firefox 无法通过最重要的测试,即“飞机测试”。换句话说,当我运行 Firefox 时,我的笔记本电脑是否会发出飞机起飞的声音。Firefox 的答案是:是。Safari/Chrome 的答案是:否。在虚拟机中运行 Windows 7 和 IE 的答案是:否(大多数情况下)。

        2014 年 9 月 12 日 下午 09:26

        1. Robert Nyman [编辑]

          我很难理解,为什么由独立第三方测试人员进行的具体数字测试不能算是回应。如果您遇到了问题,欢迎您向 Firefox 支持 提供反馈或 提交错误报告

          2014 年 9 月 14 日 下午 11:08

      2. M. Edward (Ed) Borasky

        就性能而言,我认为 Firefox 在 Linux 系统上的性能已经赶上了 Chrome,并且在内存管理方面表现得 *更好*。几个月前,我放弃了 Chrome/Chromium。

        2014 年 9 月 29 日 下午 16:02

        1. Robert Nyman [编辑]

          很高兴听到您对 Firefox 满意!

          2014年9月30日 凌晨1:32

    2. netguy

      作为被迫离开 Firefox 的用户,我可以说浏览器的性能和内存使用量对大多数用户来说不是问题。总之,所有现代浏览器都已达到一个阶段,性能和内存仅在一些特定且不常见的设备上才重要。

      Firefox 的 UI/UX 让我对其缺点感到恼火(在我看来,会话和标签管理非常缺乏),而所有浏览器都提供相同 UI 的趋势在我看来很愚蠢,为什么不提供选项来使用预设切换到以前的 UI 呢?但再说一次,我属于那种同时打开 40 到 80 个标签的重度用户。

      我第一次被迫离开 Firefox 是在它本应完全可移植且无需安装运行的时候。然后是当我不得不安装和维护 12 个扩展才能获得 Opera 出厂即用的现代浏览器基本功能时。我在 Debian 闹剧后再次离开了 Firefox。现在我仍然使用 Opera 作为我的主要浏览器,Firefox 作为我的次要浏览器,直到 Opera 发布他们重新设计的基于 Google 的浏览器的 Linux 版本,那时我将再次使用 Firefox。

      Chrome 从来不是一个选项,我不是傻瓜,我知道 Google 在他们的免费产品上做了什么,我不会成为其中的一部分。对不起,这里有个聪明人。

      这是我对 Firefox 的主要担忧,它的大部分收入仍然来自 Google,直到现在它还没有找到其他方式来为自身融资。如果它与用户的受欢迎程度无关(即不是基于广告[2]),那就更好了。

      我更愿意使用一个可以成为重建我们失去的网络[1]努力的一部分的浏览器,而不是一个来自那些导致我们失去网络的浏览器,即使它提供了更好的性能体验。

      [1]: http://dashes.com/anil/2012/12/the-web-we-lost.html
      [2]: http://www.theatlantic.com/technology/archive/2014/08/advertising-is-the-internets-original-sin/376041/?single_page=true

      2014年9月12日 上午10:22

    3. former firefox fanboy

      经典主题恢复器可能会解决您在 Australis 中遇到的大多数问题。

      然而,不可否认的是,Australis *确实* 去掉了某些自定义功能。我很久以前将一些视障用户迁移到 Firefox 4,但他们不得不迁移到 Chrome、Safari 和 Opera,仅仅是因为 Firefox 不再允许您自定义大而易于访问的停止、刷新和前进按钮的位置。

      听起来像个小问题,但这对这些人来说是个很大的痛点。几周后,即使是我也越来越恼火于在想要点击刷新按钮时经常点击其他按钮,而不是刷新按钮。我并没有视力或运动技能问题。但我确实有固执的肌肉记忆,它迫切希望刷新按钮很大、独立并且位于工具栏的最左侧。但这显然是过分的要求。

      经典主题恢复器解决了这个问题,但当它的开发者转向更美好的事物时会发生什么?我怀疑 Mozilla 会正式支持它。

      2014年9月12日 下午6:13

  4. Lachlan Ford

    您能够使用一个视图同步调试多个平台吗?

    我认为这将是一个非常有用的功能;这是我一直想要的东西 :)

    2014年9月11日 下午4:57

    1. Jeff Griffiths

      现在还不可能 - 连接是工具箱与设备或运行时之间的 1:1 连接。但这是一个很有意思的想法 - 您认为您可以将它用于什么目的呢?

      2014年9月12日 凌晨1:21

  5. me

    看起来有很多步骤,没有人会去执行。插件“用户代理切换器”更容易使用,您只需将浏览器缩放到设备的大小即可。这个新方法很糟糕,工作量太大。

    2014年9月11日 下午5:45

    1. Robert Nyman [编辑]

      切换用户代理/分辨率与实际调试在其他设备/网络浏览器上运行和呈现的内容是两件截然不同的事情。用户代理嗅探是一种很少使用的实践,并且不建议使用,但即使您这样做,它也只会以相同的网络浏览器运行它。真正的强大之处在于它在不同的网络浏览器引擎的上下文中运行。

      2014年9月12日 凌晨0:16

    2. former firefox fanboy

      在真实设备上测试之前,您不会遇到很多错误。

      我在 iOS 模拟器中使用 iOS Safari 构建了一个界面。没有错误。第二天我收到了来自客户及其员工的 200 封电子邮件,指出错误。我需要在 body 中添加一个毫无意义的 3D 变换来强制硬件加速,以解决他们遇到的问题。我在模拟器中从未见过这个问题。

      有时,Android 版 Chrome 拒绝渲染小于一定尺寸的文本。因此,我认为会很小的文本最终比段落文本更大。唯一的查看方法是在设备上查看。

      我认识一些人,他们浪费了一个星期来添加一个“很酷的”地理位置功能。他们不知道所有公司发放的手机都没有 GPS。如果他们只在公司手机上使用该功能 30 秒以上,他们本可以在那个星期修复差点让他们被解雇的错误。

      2014年9月12日 下午6:27

      1. Robert Nyman [编辑]

        我同意,文章中也提到了这一点:“没有什么可以取代在设备上的测试”。这更像是朝着这个方向迈出的一步,以简化它并将它整合到一个工具集中。

        2014年9月14日 上午11:04

  6. Chetan

    这与http://people.apache.org/~pmuellr/weinre-docs/latest/ 有什么不同吗?

    2014年9月12日 凌晨0:43

    1. Jeff Griffiths

      它实现了相同目标,但采用了不同的实现方式。Weinre 已经存在一段时间了,人们发现它很有用 - 我认为我们的目标是让从 Firefox 的工具连接到人们今天使用的移动浏览器变得尽可能简单。

      2014年9月12日 凌晨2:51

  7. Mark Johnson

    它可以与 Internet Explorer 配合使用吗?IE 的开发工具在最好的情况下也是一种灾难,能够使用 Firefox 的工具将会是一件天大的好事。

    2014年9月12日 凌晨1:58

    1. Robert Nyman [编辑]

      简短回答:还没有。我们将看看它将如何发展。:-)

      2014年9月12日 凌晨2:09

      1. Filip Dabrowski

        如果您能让这个工具与 IE 配合使用,我将把我的半个肝脏和 6 升血献给您 ;-)

        出色工作,伙计们!期待将其作为不那么稳定的 weinre 应用程序的替代方案进行测试。

        顺便说一句,UI 都是个人喜好,谈论这个问题与这个开发工具无关。

        顺便说一句 2,我在调试我的项目时每天都要在 ff 和 chrome 之间切换数百次。根据我的个人经验,ff 的性能在最近几个版本中得到了大幅提升。不能确定,但至少在两个浏览器中都打开了原生开发工具的情况下,ff 比 chrome 运行得略好。

        2014年9月16日 下午3:12

        1. Robert Nyman [编辑]

          感谢您的反馈!希望事情不会发展到那种地步。:-)
          关于如何改进这些工具的任何其他想法,请告知我们

          2014年9月17日 凌晨0:04

  8. Alireza Behrooz

    它可以在本地 iOS 或 Android 应用程序中的嵌入式 webview 上使用吗?

    2014年9月17日 凌晨3:35

    1. Panos Astithas

      通过初步搜索,似乎可以实现,如果应用程序使用 WebKitDeveloperExtras 或相应的 Android 选项。我们还没有实际尝试过,因此可能需要一些调整。如果您尝试过它但它不起作用,请在 GitHub 上提交一个问题。

      2014年9月17日 下午11:46

本文的评论已关闭。