Remote Debugging Intex Cloud Fx. (Firefox OS) using ADB and WebIDE on Firefox

Recently Mozilla's Firefox OS came to India with the brands Intex and Spice. If you are a developer and trying to test apps or debug your phone using ADB then you might have had a hard time. The official tutorial on Mozilla Developer Network just have listed the basic steps, but to make our Intex device work we need to get our hands somewhat dirty in code.

This guide is meant for Windows users only. Alternatively you can use the vendor ID for the Intex Device if you are on another system and just need the vendor ID.

Before we start, we need to have the following things:
  1. ADB and Fastboot - ADB is included in the official Android SDK, but it is about 800mb, and for one simple application downloading the whole heavy SDK wouldn't be a nice idea. So download this 15 Seconds ADB Installer from the link and install on your system.
  2. Mozilla Firefox 35+ - Currently Mozilla Firefox 35+ is a Nightly Build. But if you don't want to download an 80mb thing again, you can alternatively use the latest Mozilla Firefox which has the App Manager.
  3. ADB Helper Addon - Install the ADB Helper on your Mozilla Browser.
For now we just need these two things in order to get start. 

You need to learn a little bit about using Windows Command Line and ADB. If you know about how to use them you are all set to go!

Connect Your Device

Connecting your device is more than just plugging the USB cable. We need to make some changes on our device so it works without any problem.

Disable Screen Lock

If you have screen lock enable on your device, simply disable it by going to  Settings > Screen Lock (Under "Privacy and Settings")

Enable Remote Debugging

Disable USB Storage in your devices' settings before you enable remote debugging.

Now you need to enable remote debugging in the settings of your phone. Go to Settings >  Device Information > More Information > Developer > And under "Remote Debugging" choose "ADB and Devtools"

We Need USB Drivers for our Device

For ADB to detect our device Intex Cloud Fx. it needs its OEM USB Driers, but the problem is that Intex doesn't provide it, so bad.

But we have got a workaround. By specifying the vendor ID in the adb_usb.ini file in the ADB application directory we can get our device connected to ADB. Here's how:

The vendor ID of our Intex Cloud Fx. Device: 0x1782

Download this file: adb_usb.ini (Dropbox) 

Where to save it? C:// drive > Users > {username} > .android > Paste the adb_usb.ini file there.

Start ADB

Open the "RUN" window by pressing 
Window + R then type "cmd" and hit enter to open the command prompt window.

Now you must connect your device using an USB cable with all the settings mentioned above.

We are now ready to see if the devices is connected to ADB or not. Run the following command and see what it returns:
adb devices

If successful it will show something like:

If not, then you must try unplugging and then plugging the USB cable. Also try it on different USB ports too and check if you have done everything mentioned in the "Connect Your Device" section above.

Now we need to tell ADB to forward the port to the WebIDE or App Manager on Firefox browser to actually get started with debugging. To do that run this command:

adb forward tcp:6000 localfilesystem:/data/local/debugger-socket

You are done! Continue to the final step.

Open Firefox Browser (with either App Manager or WebIDE)

First let's clear the confusion between App Manager and WebIDE, on Firefox 33 and prior App Manager is the default app to manage and debug apps on Firefox OS, and in later version WebIDE replaced the App Manager.

    WebIDE Documentation
    Using the App Manager

I am going to provide instructions for both application. The overall functionality of both the apps are similar, except for that WebIDE is newer it has more updates than the previous App Manager,

Connecting your device with WebIDE

Open your Firefox browser. Go to Tools > Web Developer > WebIDE or simply hit Shift + F8.

Now in the WebIDE Interface, click on the dropdown on the right that says "Select Runtime", if you can see "Cloud Fx." under the USB Devices, then simply click on it and it will get connect.

Else click on "Remote Runtine" and enter the port as localhost:6000 and the WebIDE will be connected to the device. If it succeeds the icon will turn blue and you can access the apps in your devices on the left pane of the user interface.

Now you can debug apps, install your own apps on the device remotely.

Connecting with App Manager

The process is pretty much the same. Connect your device with the adb command prompt first. Then open Firefox browser.

Go to Tools > Web Developer > App Manager 

At the bottom of the screen, you will see the device id in the list of connections available. Click on it and the device will be connected to the app manager.

When connected you will see something similar to this:

Yay! We are done. Now debug the way you want, but just don't damage your phone ;)

Fun things to do!

You can debug system apps like Gallery, Camera etc. And you can edit the HTML, CSS or JS of those apps live and can see the result on the device screen.

If you know HTML/CSS/JS you can really have fun tweaking things on your device. That wouldn't be permanent, as once you close and re-open it will go into its original state.

But you can create your own apps and install it on the phone.