Sqlite Browser - How to test Sqllite with Phonegap on Android






Sqlite cannot be tested directly from a browser but....

When 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 the browser itself is not compatible with Sqlite? Good question!

You may have worked 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. In case the use of an emulator was not great as it slowed down the computer a lot or crashed.

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


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.

Remember that the next time you want to test your new APK file, you just need to run: "phonegap run android" directly, this will will build the APK and send it across your mobile device all at once(no need to retype each time "phonegap build android").


Ok, till there, you have an easy way to send your app to you mobile phone. Let's go to the next step.

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 studid 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 remove it when the app is live..
The show DB button triggers a jquery click function that starts my db transaction as:


<a href="#" class="button show-database">Show Database</a>

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