Wednesday, January 29, 2014

Remote debugging on Android with Chrome developer tools

One of the major and time consuming issue while developing and testing an application is its support on hand held devices. The major stake holders for such devices are iOS safari for Apple devices, stock browser and Chrome for Android devices. For developing cross platform applications these devices and browers plays a key important role. And we invest most of our time in testing, verification and specially resolving issues that occurs only in special cases like some element gets not aligned or get extra space when we run application on one of these device. Or in some cases client sided scripting code stops working.
To save developement time and to encounter such issues Google and Apple works and invest alot on devloping some handy tools that boost application development process. One of such tool is Chrome developer tool for Google Chrome and similar for desktop version of Apple Safari. Such tools are very popularly used for investigating CSS  issues,JavaScript debugging & performance profiling and validateing request - response cycle.
These tools works great on desktop and for emulating some devices. But on actual mobile devices we have lots of limitations for debugging and we genrally goes with some remote debugging tools like JsConsoleweinre or others which are difficult to configure and use. But now with the release of latest version of chrome things become easy. 
Remote debugging is equipted with great features that not investigate CSS, debuf and profile JavaScript and see request response but also replicate device screen on desktop. and even it will display Page Paint Time and GPU usage as : 

Now Steps to configure Chrome Remote Debugging,

I have configured that for Samsung mobile with Android 4.2. 
  • Install the USB driver for your device, which seems very difficult to find the exact supported version so, instead of that use device connectivity suit provided by the vender like KIES for Samsung, Or use developer edition of the devices.
  • Connect the device and Enable USB debugging on the phone.- Settings > Developer options > check USB Debugging
Add ADB extension in the Google Chrome on Desktop or just about:inspect in the address bar of the desktop chrome. 

Click the View Inspection Targets to view the connected target and list of tab you have opened in the the Android Chrome just as 

No on the Tab you want to debug just click "Inspect" for that and there you go. I opens a new chrome window for debugging the tab you have opened in chrome on your Android device. For further details and features you can refer this .

The same feature is provided by the Apple Safari but for that you need a Mac machine for debugging.


There are also slide carousel design results for numerous queries which are positioned actually higher and produce a whole new degree of interaction. Onsite IT Support

Post a Comment