You can use the Firefox developer tools on your desktop to debug code running remotely: in a different process on the same device or on a completely different device. To do this you use Firefox to attach the Toolbox to the remote process, and the Toolbox is then launched in its own window. At the moment the following tools support remote debugging:
- Page Inspector (new in Firefox 26)
- Style Editor
- Web Console
- Network Monitor
This guide explains how to get set up to debug code running in Firefox for Android over USB. The other main application for remote debugging is to debug code running in the Firefox OS Simulator, but that's covered separately, in the Firefox OS Simulator documentation.
This guide's split into two parts: the first part, "Prerequisites" covers stuff you only need to do once, while the second part, "Connecting", covers stuff you need to do each time you connect the device.
First, you'll need:
- a desktop or laptop computer with Firefox running on it
- an Android device capable of running Firefox for Android with Firefox for Android running on it
- a USB cable to connect the two devices
Next, you'll need to get the desktop and the Android device talking to each other using the adb command-line tool.
On the Android device
- Enable USB debugging (step 2 of this link only).
- Attach the device to the desktop via USB.
On the desktop
- Install the correct version of the Android SDK for your device.
- Using the Android SDK, install the Android Platform Tools.
- Android Platform Tools installs adb in the "platform-tools" directory under the directory in which you installed the Android SDK. Make sure the "platform-tools" directory is in your path.
To check it worked, open up a command shell on the desktop and type:
You should see some output like:
List of devices attached 51800F220F01564 device
(The long hex string will be different.)
If you do, then
adb has found your device and you've successfully set up ADB.
Enable remote debugging
Next, you need to enable remote debugging on both the Android device and the desktop.
Firefox for Android 24 and earlier
To enable remote debugging on the device, you need to set the
devtools.debugger.remote-enabled preference to
about:config in Firefox for Android, type "devtools" into the search box and press the Search key. You'll see all the devtools preferences. Find the
devtools.debugger.remote-enabled preference, and press "Toggle".
Firefox for Android 25 and later
On Firefox for Android 25 and later, there's a menu item to enable remote debugging. Open the menu, select "Settings", then "Developer tools" (on some Android devices you may need to select "More" to see the "Settings" option). Check the "Remote debugging" box:
The browser will display a notification reminding you to set up port forwarding, which we'll do later on.
On the desktop
If you're using a version of Firefox older than 27, you'll need to restart the browser for the setting to take effect.
You'll then see a new option in the Web Developer menu labeled "Connect...":
Now you can connect the remote debugging tools to the device. First, attach the device to the desktop with a USB cable, if you haven't already.