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 of RhoMobile apps right from your Mac or Windows development machine.


1-remote-debug-banner.png

 

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. And it's super-easy to set up in just a few quick steps.


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 but which is hidden by default. If you haven't already done so, unhide Developer Options by going to Settings>>About Phone>> and scroll all the way to the bottom and tap the "Build Number" box seven times. Then 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:


2-Detect_USB.png


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 for instructions and driver links.


4. Configure WebView

WebView debugging has to be enabled from within the app. Fortunately, RhoMobile developers can skip this step because the WebView components used by the RhoMobile Suite are configured for debugging automatically then deployed to 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 shown below, with your device and a link to its debug-enabled WebViews. To begin debugging, click an inspect link.


3-chrome-inspect-devices.png

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).


4-webview-debugging.png


For more details, visit the Google Remote Debugging page.


Alternatives

A capable alternative to Google Remote Debugging is 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.