Monday, August 3, 2015

Phonegap (or Cordova) Android App debugging with Chrome

Phonegap (or Cordova) Android App  debugging with Chrome

Short steps:

1. Enable developer options in phone device (enabling is specific to device manufacturer).and then set USB Debugging set to on. (checkbox).

2. connect usb device to the host (either windows or linux).
2a. on windows usb drivers to be installed (as per device manufacturer)
2b. on linux, procedure is enabling usb udev rules

3. navigate to chrome://inspect (usb device shall be listed/available if device connected and developer option enabled).

4. Now launch the phonegap application from your device. you shall see update like below, selecting inspect shall launch the Chrome developer tool where you can debug like a web application (html,css, javascript).

Nexus 5 xx
#xxxx2015
:8080
WebView in com.test.cordovatest (33.0.0.0)
GetRegID Page
file:///android_asset/www/index.html
at (0, 0)
size 720 × 1280
inspect

Enabling usb on linux 

[arun@ .android]$ pwd
/home/arun/.android

[arun@ .android]$ more adb_usb.ini 
# ANDROID 3RD PARTY USB VENDOR ID LIST -- DO NOT EDIT.
# USE 'android update adb' TO GENERATE.
# 1 USB VENDOR ID PER LINE.
0x2717

[arun@ .android]$ more /etc/udev/rules.d/51-android.rules
# Xiaomi Hongmi WCDMA - MTP Mode
SUBSYSTEM=="usb", ATTR{idVendor}=="2717", ATTR{idProduct}=="1240", MODE="0666", OWNER="you"
# Xiaomi Hongmi WCDMA - MTP Mode with USB Debug
SUBSYSTEM=="usb", ATTR{idVendor}=="2717", ATTR{idProduct}=="1248", MODE="0666", OWNER="you"

# Xiaomi Hongmi WCDMA - PTP Mode
SUBSYSTEM=="usb", ATTR{idVendor}=="2717", ATTR{idProduct}=="1210", MODE="0666", OWNER="you"
# Xiaomi Hongmi WCDMA - PTP Mode with USB Debug
SUBSYSTEM=="usb", ATTR{idVendor}=="2717", ATTR{idProduct}=="1218", MODE="0666", OWNER="you"

# Xiaomi Hongmi WCDMA - USB Mode == Built-in CD-ROM Mode!
SUBSYSTEM=="usb", ATTR{idVendor}=="2717", ATTR{idProduct}=="1220", MODE="0666", OWNER="you"
# Xiaomi Hongmi WCDMA - USB Mode with USB Debug
SUBSYSTEM=="usb", ATTR{idVendor}=="2717", ATTR{idProduct}=="1228", MODE="0666", OWNER="you"
[arun@ .android]$
[arun@ .android]$


with usb connected & set, Android device logs can be viewed using
$adb logcat

Further details see:

https://developer.chrome.com/devtools/docs/remote-debugging#debugging-webviews

http://en.miui.com/thread-24059-1-1.html

No comments:

Post a Comment