Using Google Remote Debugging With RhoMobile Apps

The RhoMobile 5.x environment provides some great debugging tools, but it's not the only way to fix or fine-tune your WebView apps. For devices running KitKat or higher, Google Remote Debugging offers a slick way to use Chrome to perform live, on-device debugging right from your Mac or Windows development machine.

The tool can debug native Android apps that use WebView, such as those built with RhoMobile, and browser-based apps too. It employs live screencasting from the remote unit to the development host, and through port forwarding and virtual host mapping, also lets the device access a development server, if needed.

System Requirements

The requirements for Google Remote Debugging are fairly minimal. The Mac OS X or Windows development machine just needs to have Chrome 32 or later installed plus a USB cable and available USB port. The device must be running Android 4.4 (Kit Kat) or later and the app must have WebView configured for debugging.

1. Enable Device Debugging

The device itself has to have USB debugging enabled, a feature found within the Developer Options settings panel. If you haven't already done so, you can enable Developer Options on an Android device by tapping the "Build Number" box seven times. The Build Number box is found at the very bottom of the in Settings>>About Phone>> panel. After that, go to Settings>>Developer Options and enable USB Debugging.

2. Discover Device (in Desktop Chrome)

Next is to enable device detection in Chrome and point it to your device. Open a browser window and enter "chrome://inspect" in the URL bar (or go to Chrome Menu>>More Tools>>Inspect Devices). You should see a screen similar the following:

Check the "Discover USB Devices checkbox. If your mobile device is attached to the system via USB, it should appear along with an alerton the device. Tap OK on the device to complete the connection.

3. Install USB Driver (Windows only)

Linux or Mac developers can skip to step 4. For Windows systems, an extra driver is required to make a USB-attached Android device visible. Visit Google's OEM USB Driver page http://developer.android.com/tools/extras/oem-usb.html>

for instructions and driver links.

4. Configure WebView

WebView debugging has to be enabled from within the app. Fortunately, the WebView components used by RhoMobile apps are configured for debugging by default on devices with debug mode enabled.

5. Begin Debugging!

Once your app is deployed and running on the device, the chrome://inspect page should look something like the one below, with your device and a link to its debug-enabled WebViews. To begin debugging, click the inspect link.

Clicking the Inspect link will launch Chrome DevTools, showing your app's code and its real-time rendering and your device (and on your screen if using screencast, shown).

For more details, visit the Google Remote Debugging page https://developer.chrome.com/devtools/docs/remote-debugging>.

Alternatives

A capable alternative to Google Remote Debugging is Weinre https://developer.motorolasolutions.com/community/rhomobile-suite/rhomobile-community/rhomobile-blogs/blog/2013/08/06/save-time-debugging-hardware-js-apis-with-rhomobile-40-and-weinre>, an Apache-hosted project that offers many similar features, including remote debugging of a live app on the device, and the ability inspect callback objects and API syntax.