Testing Sqlite on Cordova or Phonegap

SQLite cannot be tested directly from a browser, so when you will be developing your own PhoneGap or Cordova app, you will be faced with a huge issue which is… How to test SQLite in your Chrome browser if you cannot test the results of each query?

Good question!

You may have worked it out by now(after struggling for days) that SQLite is only on your Mobile app and is very difficult to access. Some may use Android studio when they work with a native app platform while others like us, the PhoneGap / Cordova Geeks are left in the dust.

After days and days of scratching my head on this, I decided to create a solution to solve the issue, and it works pretty well!

Be warned, the trick is so stupid that many of us will not even think about it right away….

First lets setup your PhoneGap / Cordova Android testing workflow:

1)Build Your PhoneGap APK using the below command:

phonegap build android

2)You need to connect your phone with a USB cable to your Windows operating system and type the below command in your command prompt screen:

phonegap run android

Make sure you are in your project folder. In my case, using Laragon, I will be in :

C:\\laragon\www\myproject

This command should send your PhoneGap APK file to your Android phone and install it.

If instead a third party emulator starts, close it, unplug the USB cable from your phone and plug it again one more time, finally, retype the above command, it should work.

Remember that the next time you want to test your new APK file, you just need to run:

“phonegap run android” directly, this will build the APK and send it across your mobile device all at once(no need to retype each time “phonegap build android”).

3)Instead of messing around trying to figure out how to access your SQLite database, why not output its content instead?? Well yes! This was so stupid that it took me days to work this one out(duh!).

What I did is create a button in my app navbar called “Show db”, this, of course only shows when I debug the app and will be removed when the app is live…

The show DB button triggers a jquery click function that starts my db transaction as:

Show Database

The triggered code:

$(".show-database").click(function () {


db.transaction(function (tx) {
var query = "SELECT id, data1, data2, data3 FROM table_name";
tx.executeSql(query, [], function (tx, result) {
for (var i = 0; i < result.rows.length; i++) {
console.log(result.rows.item(i).id);
console.log(result.rows.item(i).data1);
console.log(result.rows.item(i).data2);
console.log(result.rows.item(i).data3);
}
},
function (tx, error) { //Query Error
console.log(error.message);
});
}, function (error) { //Transaction Error
console.log('fetch table error: ' + error.message);
}, function () { //Transaction OK
console.log('table fetched ok');
//alert("table fetch transaction ok");
});
});

Ok now you will tell me, ok this is good but what do I do with this???

Here is the magic

4)Keep your mobile connected to your computer via the USB cable and start your app. While your app is running, open Chrome on your computer and type this in the browser:

chrome://inspect/devices

You should now see something like that:

WebView in com.myappn (Version/4.0 Chrome/30.0.0.0)

My App
file:///android_asset/www/index.html
inspect

Click on "Inspect", it will open the Chrome debug tool.

Now in the debug tool click on "Network" tab and right at the bottom left, the "console" button which starts with this sign ">" and 3 horizontal bars next to it.

While in the console, click on the "show database" in your app and Voila! You will be able to see all the data in your SQLite through the console.

This was a life-saving trick for me!

Please leave us a message if this tip helped you