Debugging an Android Cordova/Phone Gap App

This post is a guide to debug a Cordova / Phonegap App on Android.

I use DevExtreme for Mobile (Cordova / Phonegap) Development. Regardless if you use Inoic or some other Phonegap related framework the basic steps are the same.

I. Get The Tools: You will need either the Android Debug Bridge (ADB). You do not require the  Android Development Kit for Cordova Development.  Just install the Minimal ADB Fastboot. Use this download link and read more about it on XDA Developers. 

After you install the ADB Fastboot you have to start the server. First run a command window as an Admin and start the ADP Server.

cd C:\Program Files (x86)\Minimal ADB and Fastboot
adb start-server

II. Creating a Debuggable App:  In Visual Studio while using DevExtreme you must tick the checkbox for Debuggable, the build the app.  Note: You cannot publish an debuggable app to an app store. 

Create your mobile app and deploy it to your device.  You must have Debugging option enabled on your device.  After the install start the app up.

III. Chrome Remote Debugging:  Using the Chrome Browser and Remote Debugging Tools you can debug your Mobile App.

A. Dev Tools: In Chrome go to More Tools > Developers Tools.  When the console comes up go into More Tools > Remote Devices. 

B. Your Device: You should now see your device. In this case I am debugging a Meditation App I wrote called "Meditation Mind Machine." 

To start debugging click Inspect.

After clicking Inspect you will see any messages in the Console Area. You can access the features of your app in the browser, or by using the features on your device. 

Load Content to HTML Page from an External File

This is an example of loading an HTML page with content from an external file. This is a technique I have used on some sites and in some Word Press sites.

This script will read the contents from file1.html on the web service and load it to the content of a DIV on a page.

$(function() 
{	
	$.get( "file1.html", function( data ) {
		//$( "#Content" ).html( data ); //This Replaces  
		$( "#Content" ).append( data );   //This Appends  
 	}); 
});	

Click here for a link to the full working sample.

Scroll to Top of Bootstrap Modal / Panels

When opening a Boostrap Modal Window (or switching Boostrap Panels) and you scrolled the content previously, it will retain the position. Here are two methods to scroll the content back to the top after opening the modal again.

There was change in boostrap where you need to use: on shown.bs.modal or use a function call.

<div id="HelpScreenModal" class="modal fade" role="dialog">
    <div id="HelpDialog" class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 id="HelpScreenModalTitle" class="modal-title"></h4>
            </div>
            <div id="HelpScreenModalContent" class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
//call a function when you show the modal window (I opted for this method)
<button onclick="showSMSSummary(); return false;" data-toggle="tooltip" title="Click To iew Summary" class="btn btn-primary btn-sm">SMS Summary</button>

function showSMSSummary()
{    
     $('#HelpScreenModal').modal('show');            
     $('#HelpScreenModalContent').animate({ scrollTop: 0 }, 'fast');
 }