Remote Debugging on Firefox for Android

NOTE: since this article was published, the Firefox remote debugging functionality has changed somewhat. For up-to-date information, you should read Remote Debugging on MDN.

A month ago we introduced the Debugger and other new developer tools introduced in Firefox 15. Our new Debugger lets you connect Firefox Desktop to Firefox on Android so that you can use your nice, roomy desktop monitor to troubleshoot JavaScript that is running on your mobile device. 95% of Android devices are running a Firefox-compatible version of the operating system (Android 2.2 and higher). Firefox won’t run on all of these devices, but there are certainly many millions of devices that you can pick up and begin remote debugging on.

We will now explain how to remote debug Firefox on your Android device. The following screencast also shows you how to setup and run the Remote Debugger:

Set up your desktop

First of all, make sure you’re running Firefox 15 at least. At the time of this article, Firefox 15 is in the beta channel.

Next, type about:config into the Firefox location bar so that you can change a setting in the browser. The browser will display a warning, but don’t worry… we’ll be careful.

In the search box at the top of about:config, type “remote-en“. The only setting that should match is “devtools.debugger.remote-enabled“. Set that to true by double clicking it.

Finally, restart your browser. After you do, you’ll spot “Remote Debugger” in the Web Developer menu (either in the main Firefox menu or in the Tools menu on Macs).

Set up your Firefox for Android

For this to work, you need to use Firefox 15 on your Android device as well, and you can get that by downloading Firefox Beta from the Google Play store.

Now, fire up Firefox Beta on your phone. As on Desktop, you’ll need to go to about:config to change settings. Search for “debugger” and

  1. toggle devtools.debugger.force-local to false
  2. toggle devtools.debugger.remote-enabled to true

To get the remote debugging server started, you’ll need to restart Firefox. Tap the home button to exit Firefox.

On a Galaxy Nexus running Jelly Bean you can force Firefox to restart by opening the task switcher and sliding the Firefox Beta task off to the right.

Extra note: if you’re uncomfortable with the idea of having your Firefox listening for connections on the network, you can leave force-local set to true and follow Mark Finkle’s instructions for getting remote debugging running over USB.

Find your IP address

Before we’ll be able to connect to the device, we need to know its IP address. To find the address of your phone:

  1. open the Settings app
  2. tap Wifi
  3. tap the network that you are currently connected to

The display you’re presented with will include your IP address.

Your IP address on an Android phone

Make the connection

You’re now all set for remote debugging!

On your mobile device, browse to a page that you want to debug. Fire up the Remote Debugger on your desktop Firefox. The Remote Debugger appears as a new window and it will prompt you for the address to connect to. Replace “localhost” with the IP address of your phone. By default, the remote debugging server on your mobile device will be running on port 6000, so leave the “:6000” there in the connection address.

You should see a dialog on your phone warning you about a new incoming connection. You should only accept connections that you start as otherwise someone might be trying to hijack your browser. In this case, we’ve started the connection, so go ahead and allow it.

Once you’ve connected successfully, you’ll be able to inspect the scripts loaded in the page, set breakpoints and so forth.

Let us know what you think!

Give it a try and let us know what you think of this feature and what more you’d like to see. You can respond in the comments below or email us on the dev-apps-firefox mailing list.


7 comments

  1. Gerry

    I love that so much! How am I the first person commenting on this!

    I hope you are planning on adding a remote version of the Inspector too so I can interact directly with css properties instead of having to change them through javascript. Anyway that’s a fantastic addition and I’m so glad you added it. Others will be too as soon as they realise. :)

    August 19th, 2012 at 07:28

  2. Gerry

    Damn, I was thinking I would have had a JS console at least so that I could run statements easily, but sadly it just seems to be for stepping through code. I could probably hack something to make it work, but I hope you add this along with the Inspector in future editions.

    August 19th, 2012 at 09:59

    1. Kevin Dangoor

      Yeah, we definitely want to make more of the tools connect remotely. Some of the work for the Web Console is already underway:

      https://bugzilla.mozilla.org/show_bug.cgi?id=768096

      August 20th, 2012 at 06:05

  3. Brian LePore

    I’m running Firefox Nightly on my desktop and my Galaxy Nexus running ICS on Verizon. I keep on getting a pop-up on my phone that I hit accept on, but the remote connection never seems to connect. If it was a firewall issue wouldn’t it never have displayed the incoming mesage in teh first place.

    August 28th, 2012 at 13:10

    1. Robert Nyman

      I think the best way is if you would be so kind to file a bug on that behavior so we can follow up.

      Thank you!

      August 28th, 2012 at 13:54

  4. Brian LePore

    Was just about to and then saw that I had not updated my Nightly build of Firefox mobile from 17 to 18 like I thought I had. Once it was updated it worked flawlessly.

    Very glad to see this in here. I literally just blogged about remote debugging in mobile browsers just over a month ago and I could only find the about:config settings. Looks great. :)

    August 28th, 2012 at 14:15

  5. Nemanja Cosovic

    Is there a way to do something similar to HTML or CSS?

    March 7th, 2013 at 21:23

Comments are closed for this article.