Wednesday, November 27, 2013

Using jshybugger to debug HTML, CSS and javascript on native Android browser


Debugging web applications on android device as been a challenging issue. This becomes further challenging when the debugging is to be done on native browser of Android.
The debugging tools provided by native android browser are insufficient to perform detailed analysis of the problem. (In case you're not aware about these tools and wish to check em out type "about:debug" in your native browser's address bar and then check your settings menu for debug options).
While looking for solution of one of my problems on native android browser i came across this tool which does the job brilliantly! Its name is jsHybugger (https://www.jshybugger.com/#!/).

When you use jsHybugger App, jsHybugger runs on your device and provides two things:
  • a proxy between the native Android browser and the web server where your mobile web pages are hosted
  • a communication endpoint for the debugging frontend on your development machine
Using this very simple and straight forward. Steps for it are as follow:

  1. Download and install the APK file for jsHybugger App, either through a direct download on your device or from your development machine using ADB.
  2. Start jsHybugger App on your device and adjust the configuration (see parameters below).
  3. Open the native Android browser via Open browser. The browser automatically navigates to the specified URL.
  4. Connect to jsHybugger.
  5. Set port forwarding to enabled in ADB interface. For more information on how to use ADB extension please refer to my earlier blog post (http://anirudhprabhu.blogspot.in/2013/08/debugging-website-or-web-application.html)

Parameters
  • Remote host: IP address or hostname of the remote web server
  • Remote port: HTTP port of the remote web server (usually 80)
  • URI: URI of the start page, e.g. /index.html
Control
  • Stop service: Stop service on device
  • Start service: Start service on device
  • Open browser: Start the Android browser with the configured URL
  • Clear cache: Clear jsHybugger cache
  • Log viewer: Display HTTP access log

Happy Debugging!!!