Tutorial: Remote JavaScript debugging for mobile apps on Android

The use of mobile applications (or short apps) is getting more and more, but it was such a pain to debug mobile versions of a website or an app. In the last time appeared some new possibilities which will make the life of a web developer much more easier.
Getting started with your smartphone
The first thing you need to to is to download Firefox Mobile. The minimum version you need is v15. After the installation open the following URL in Firefox Mobile: about:config
Search for devtools.debugger.force-local
and toogle it to false
, afterwards set devtools.debugger.remote-enabled
to true
. Now restart the mobile browser.

Getting your IP
You need now your internal IP address of you smartphone. You could get it by opening your settings on your phone, tap on Wifi and then on your currently connected Wifi-connection. There you will see your IP address:

Configure your desktop Firefox for mobile debugging
On your desktop workplace you need also at least Firefox 15 to have the remote debugger built-in. Open there also the URL: about:config
. Set there devtools.debugger.remote-enabled
to true
and restart your browser.
Start remote mobile debugging
Now go to the "Extras" menu item on your desktop Firefox and there you'll find "Remote debugger" in the "Web developer" menu. A prompt will appear where you need to change "localhost" to your noticed IP address from your smartphone. The port 6000 will stay the same if you didn't changed it. Now the remote debugger (mostly for JavaScript) will be opened on your desktop workplace after you confirmed the connection on your smartphone.
If it won't open the debugger or simply nothing happened, you don't run the latest needed version of Firefox. Try to install Firefox Nightly or if you are on a Linux machine, run these commands in your terminal:
sudo add-apt-repository ppa:ubuntu-mozilla-daily/ppa
sudo apt-get update
sudo apt-get install firefox-trunk
And now: Happy debugging!