Objective : Evaluation of different Android debugging tools
and selecting one which can be used to debug our apps on mobile and tabs.
Analysis : We have experimented with different debugging
tools present for android debugging and following is the analysis:
1) ADB :
Limitation : Only applicable for chrome browser
issues. Not suitable for debugging issues with default browser on mob or tab.
Remarks : Very tricky installation and can take hours
of time. But we will document the steps we took for installation which may
help. (A separate blog post will be dedicated to this).
Evaluated platform : Samsung s2 mobile and google
nexus 7
2) JSConsole :
Limitation : Only suitable to debug javascript
related issues.
Remarks : Simple installation and easy to use.
Evaluated platform : Samsung s2 mobile and google
nexus 7
3) Firebug Lite :
Limitation :
a) Very
inconsistent behavior shown. Sometimes the firebug frame is visible, sometimes
its not.
b) Need
usb support on the device (mob or tablet) to attach a mouse for smoothly
navigating through DOM shown in the firebug toolbar.
Remarks : Simple installation but
very difficult to debug.
Evaluated platform : Samsung s2 mobile and google
nexus 7
4) Weinre :
Limitation :
1) Javascript
issues can be debug only using console.log but not using breakpoint techniques.
2) Server
is tightly bound with IP, so there needs to be static ip where the weinre
server can be run.
3) The
web page that needs to be debug needs to include a javascript file which needs
to be loaded from the server url hence same limitation as 1
4) The
network tab does not display any information about the request/response cycle.
Remarks : Simple installation and
can be used to debug DOM /CSS related issues.
Evaluated platform : Samsung s2 mobile.
5) Other Techniques :
The other techniques like About:debug are also less
developer friendly and lack community support.
Useful links:
This document
provides plenty of solutions
I like the
"4. USB Remote-Debugging" but "This is only possible with Google
Chrome, not the default browser. (Chrome is available for Android 4+)."
There is an
alternative even better
This is a google
Play app, that give access to the JS LOG
Firebug lite
Conclusion
: Weinre is the most suitable tool for debugging in default android/stock browser. However, before we jump to debug any issue we should test if the issue is reproducible in chrome so that we can make use of adb remote debugging which provides the ability to debug in chrome inspector on the desktop and can save plenty of time.
Environment : Windows 7
These steps can be followed to setup weinre which can be
used for mobile debugging. Links are mentioned for further assistance.
1) Install node (preferably v0.8.19 or above as the
subsequent steps may fail with other versions)
2) Open command prompt and check if node is
installed by executing the command “node -v” (without inverted commas). If
setup correctly, it will output version of the node that was installed.
Tips : Add to your path environment variable if its
not updated immediately after node installation.
3)
Open command prompt and check if npm is
installed by executing the command “npm -v”. (npm gets installed along with
node)
4)
Open command prompt and Install weinre
using npm (node package manager).
npm –g install weinre
5)
Start weinre server by following these steps:
a) Modify
the file attached and replace the boundHost parameter to your ip
b) Create
a directory named “.weinre” in your home directory (execute the following
command on the command prompt to find it)
echo %HOMEPATH%
c) Create
a file server.properties with the contents from the file attached with the
email.
d) Execute
the command
start weinre
6) Copy following line in your web page html.
7)
Load the web page in your device. This will set
your device as debugging target.
8)
Open browser and go to the address
<your-ip>:8000/client
Note : This the window where we can see debug the
page loaded in the target device.
Important Links :