Firefox Add-on Enables Web Development Across Browsers and Devices

Developing across multiple browsers and devices is the main issue developers have when building applications. Wouldn’t it be great to debug your app across desktop, Android and iOS with one tool? We believe the Web is powerful enough to offer a Mobile Web development solution that meets these needs!

Enter an experimental Firefox add-on called the Firefox Tools Adaptor that connects the Firefox Developer Tools to other major browser engines. This add-on is taking the awesome tools we’ve built to debug Firefox OS and Firefox on Android to the other major mobile browsers starting with Chrome on Android and Safari on iOS. So far these tools include our Inspector, Debugger and Console.

Nothing can replace on-device testing. But developer tools on devices have been cumbersome and vendor-specific. Cross-platform development involved learning and switching between all the different browsers developer tools.

This add-on allows you to use your desktop environment to work on several small screen devices without using up precious screen space. You simply use the device and find out what is going wrong on your computer – regardless of platform and browser engine on the device.

How the Add-on Works

Now Try it Out

This project is still in the early stages, but we put together a preview for developers who are curious or want to contribute. All it takes is the latest copy of Firefox Nightly and the add-on. Follow the Firefox Tools Adapter instructions to get started.

This preview works with Chrome 37 on Android, currently available as Chrome Beta, and Safari on iOS. Some parts work pretty well, some parts need some work. Give it a try and let us know what you think!

So What’s Under the Hood?

This add-on is a new implementation of the Firefox Developer Tools Protocol. Rather than interfacing directly with content, it speaks to the remote debugging protocol surfaced by Chrome and iOS. This implementation is hosted inside the Firefox process, and used internally by the Firefox Developer Tools.

When Will It Be Ready?

What we’re showing today is an early preview release. We’ll be actively developing it in the coming months, directed in large part by your feedback. We’ll keep you posted on new updates when they happen!

How to Contribute

The GitHub project page has instructions for getting involved with the code. Your feedback is also helpful: Talk to us on Twitter at @FirefoxDevTools, GitHub issues or UserVoice.

About Chris Heilmann

Evangelist for HTML5 and open web. Let's fix this!

More articles by Chris Heilmann…

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…


28 comments

  1. Chris H

    Looks amazing, thanks already for your work on this!
    I’m guessing debugging Safari on iOS will only work on a Mac?

    September 11th, 2014 at 09:17

    1. Robert Nyman [Editor]

      Debugging Safari will work in Mac OS X and on Linux. Details outlined in the documentation.

      September 11th, 2014 at 09:35

      1. Luke

        I don’t know about Windows but this was working for me earlier for Linux:
        https://github.com/google/ios-webkit-debug-proxy

        September 12th, 2014 at 21:24

        1. Jeff Griffiths

          That’s correct – it works on Linux but ( as far as I know ) not on Windows.

          September 13th, 2014 at 00:53

  2. Avicenna

    Are there any gotchas on debugging android on windows?

    September 11th, 2014 at 10:47

    1. Jeff Griffiths

      This is a preview of this feature, so I am certain there are bugs and the post mentions some limitations. The intent is to release support for the Inspector, Debugger, Console and Netmonitor tools but we’re not quite there yet.

      September 12th, 2014 at 01:22

  3. Jonas

    This would be a good project to work on, but only after Firefox’s UI is fixed up, and only after Firefox’s performance and memory consumption are comparable to or better than Chrome’s.

    Firefox keeps on losing more and more users because you guys keep on ignoring the real needs of Firefox users, and instead play around with stuff like your limited reimplementation of Firebug and this debugging stuff.

    Please, we need the damage done by Australis to be repaired. We need Firefox’s performance to improve, and its memory usage to decrease. Those are our real needs!

    If these problems aren’t addressed, the rest of us will be forced to move to Chrome. It will give us pretty much the same UI that Firefox now gives us, but it runs a lot faster and it uses a lot less memory.

    – Jonas

    September 11th, 2014 at 15:11

    1. Robert Nyman [Editor]

      Hi Jonas, thanks for your thoughts. Let me address them in order.
      Performance:

      Firefox has been deemed the best web browser by a number of reputable tests:

      Best Windows 8.1 Browser: Chrome vs. Firefox vs. Internet Explorer
      2014 Best – Internet Browser Software Review
      Softonic’s Browser Comparison: Head-to-head with Chrome, Firefox, IE and Opera
      Chrome 27, Firefox 22, IE10, And Opera Next, Benchmarked – Tom’s Hardware

      “Limited reimplementation of Firebug”:

      The Firefox Developer Tools has a vast array of features not available in Firebug. Please read more in the articles on Hacks and on MDN.

      On debugging multiple web browsers on various devices and platforms: it’s one of – if not the – highest wish for millions of web developers out there. To make the web as powerful and valid as a platform as possible we need to make developing as easy as possible for web developers. Naturally Firefox improvements and Firefox Developer Tools work go in parallel, they aren’t mutually exclusive.

      September 12th, 2014 at 00:50

      1. Tim Riggs

        Hate to put it this way Robert, but that’s not a response.

        The performance issues in Firefox are real and damaging. I myself have already moved over to Chrome because on my MB Pro, it uses 1/8th of the amount of memory that Firefox does. Benchmarks are a joke anymore.

        Firefox doesn’t pass the most important test, the airplane test. In other words, does my laptop sound like an aircraft taking off when I run it. Firefox: yes. Safari/Chrome: no. Windows 7 running IE inside of virtual box: no (most of the time).

        September 12th, 2014 at 09:26

        1. Robert Nyman [Editor]

          I have a hard time seeing how tests with concrete numbers by independent 3rd party testers isn’t a response. If you experience issues, you are more than welcome to give that feedback to Firefox Support or to file a bug.

          September 14th, 2014 at 11:08

      2. M. Edward (Ed) Borasky

        As far as performance is concerned, I think Firefox has caught up with Chrome on Linux systems and is *better* in memory management. I gave up on Chrome / Chromium a few months ago.

        September 29th, 2014 at 16:02

        1. Robert Nyman [Editor]

          Glad to hear that you are happy with it!

          September 30th, 2014 at 01:32

    2. netguy

      Allow me to chime in, as someone who has been “forced” to move away from firefox I can tell that performance and memory usage of the browser are not a concern for most users. Anyways all modern browsers have reached a point where performance and memory only matters on some specific uncommon devices.

      UI/UX in firefox annoy me with their shortcomings (session and tab management lacks terribly imho), and this trend of all offering the same UI is dumb imho, why not offer choice to switch to the previous ui using preset? But once again I’m the kind of power user with anywhere between 40-80 tabs opened at all times.

      First time I was forced away from firefox, it was back when it was meant to be fully portable and run without installation. Then it was when I had to install and maintain over 12 extensions to have the basic features of a modern browser that opera offered out of the box. I left firefox again after the debian debacle. Now I still use opera as my main browser and firefox as a second browser, until opera release the linux version of their revamped google based browser then it will be firefox again.

      Chrome has never been an option, I’m not a fool I see what google is doing with their gratis product and I won’t be part of this. Sorry, smart guy here.

      And this is my main concern about firefox, most of its revenue still comes from google and until now has failed to find another way to finance itself. Better if it was unrelated to its popularity among users (read not advertising[2] based).

      I’d rather use a browser which could be a part of the effort to rebuild the web we lost[1] than one that gives a better feel of performance and comes from those instrumental to losing it.

      [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

      September 12th, 2014 at 10:22

    3. former firefox fanboy

      The classic theme restorer is likely to solve most of your issues with Australis.

      However, it cannot be denied that Australis did *remove* some customizability. A family of visually impaired customers who I moved to Firefox 4 so long ago had to move to Chrome, Safari, and Opera simply because Firefox no longer allows you to customize the location of big, easily accessible buttons for stop, refresh, and forward.

      It sounds like a tiny problem, but it was a huge pain point for these people. And after a few weeks even I had grown painfully annoyed with how often I hit everything but the refresh button when I wanted to hit the refresh button. I don’t have vision or motor skill problems. But I do have stubborn muscle memory that desperately wants refresh to be big, isolated, and to the far left of my toolbar. But that is apparently too much to ask for.

      Classic theme restorer fixed by problem, but what happens when its developer moves on to better things? I doubt Mozilla will officially support it.

      September 12th, 2014 at 18:13

  4. Lachlan Ford

    Are you able to synchronously debug multiple platforms at the same time with one view?

    I think this would definitely be a very useful feature; Something I’ve wanted for a while :)

    September 11th, 2014 at 16:57

    1. Jeff Griffiths

      It’s not possible at this point – connections are 1:1 from a toolbox to a device or runtime. It’s certainly an interesting idea though – what do you think you would use this for?

      September 12th, 2014 at 01:21

  5. me

    Looks like a lot of steps that no one is going to go through. the addon “user agent switcher” is much easier and you just shrink the browser to the size of the device. this new thing is lame and too much work.

    September 11th, 2014 at 17:45

    1. Robert Nyman [Editor]

      Switching user agent/resolution vs. actually debugging what’s being run and rendered on the other device/web browser are two very different things. User agent sniffing is a practice seldom used and not recommended, but even if you do that it would just run it in the same web browser. The true power here is running it in context with different web browser engines.

      September 12th, 2014 at 00:16

    2. former firefox fanboy

      There are lots of bugs you just will not encounter until you test on a real device.

      I built an interface in ios safari with the ios simulator. zero bugs. The next day I had 200 e-mails from the client and their employees point out bugs. I needed to add a meaningless 3d transform to the body to force hardware acceleration to fix the issue they were seeing. I never saw that problem in the simulator.

      Sometimes chrome for android refuses to render text below a certain size. So text I thought would be small wound up being bigger than paragraph text. The only way to see that is to look at it on a device.

      I know people who wasted a week adding a “that would be cool to have” geo location feature. They had no idea that all the company issued phones lacked gps. They could have spent that week fixing the bugs that almost got them fired if they had only *used* the thing on a company phone for more than 30 seconds.

      September 12th, 2014 at 18:27

      1. Robert Nyman [Editor]

        I agree, and it’s also mentioned in the article: “Nothing can replace on-device testing.”. This is more a step in that direction, to ease it and collate it into one tool set.

        September 14th, 2014 at 11:04

  6. Chetan

    is this different from http://people.apache.org/~pmuellr/weinre-docs/latest/ ?

    September 12th, 2014 at 00:43

    1. Jeff Griffiths

      It accomplishes the same goals, but with a different implementation. Weinre has been around for a while and people find it useful – I think our goal here is to make it as simple as possible to connect from Firefox’ tools to the mobile browsers people are using today.

      September 12th, 2014 at 02:51

  7. Mark Johnson

    Does it work with Internet Explorer? IE’s dev tools are a travesty at the best of times, being able to use Firefox’s instead would be an abosolute godsend.

    September 12th, 2014 at 01:58

    1. Robert Nyman [Editor]

      Short answer: not yet. We’ll see how this evolves. :-)

      September 12th, 2014 at 02:09

      1. Filip Dabrowski

        If you will make this tool work with IE I will give you half of my liver & 6L of blood in return ;-)

        Excellent work guys! Looking forward to test it as alternative to not-so-stable weinre app.

        BTW. if it comes to UI – its all about personal taste & talking about that here is a bit offtopic when it comes to this dev tool.

        BTW2. I am switching between ff & chrome hundreds of times a day while debugging my projects. From my personal experience ff performance improved greatly in last few versions. Can’t say for sure but at least while native dev tools are switched “on” in both browsers, ff works slightly better than chrome.

        September 16th, 2014 at 15:12

        1. Robert Nyman [Editor]

          Thanks for the feedback! And let’s hope it doesn’t have to come to that. :-)
          Any additional thoughts on how to make the tools better, just let us know!

          September 17th, 2014 at 00:04

  8. Alireza Behrooz

    Does it work on an embedded webview inside a native iOS or Android app?

    September 17th, 2014 at 03:35

    1. Panos Astithas

      From a cursory search it appears that this can be made to work, if the app uses WebKitDeveloperExtras or the corresponding Android option. We haven’t actually tried it yet, so it may need some tweaking. Please open an issue on GitHub if you try it and it doesn’t work.

      September 17th, 2014 at 23:46

Comments are closed for this article.