Debugging Cordova Apps, My Way

Cordova is hard to debug. There are millions things that can go wrong and it hard to separate the easy to debug stuff from the rest once you start working with native. That’s why its important to make the parts that don’t depend on native functionality work in the browser first. Get it working, then when it’s finished, bring it into the native app and work from there. Here’s a quick video showing you what I mean:

If you’re interested in my grunt file here it is:

[pastacode lang=”javascript” message=”” highlight=”” provider=”manual”]

module.exports = function(grunt){

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        exec:{
        	prepare:{
        		command:"cordova build",
        		stdout:true,
        		stderror:true
        	}
        },
        copy: {
                main: {
                        expand: true,
                        cwd: 'www/',
                        src: ['*', '**/*'],
                        dest: 'browser/'
                },
                cordovasrc: {
                        expand: true,
                        cwd: 'cordova-browser-src/',
                        src: ['*', '**/*'],
                        dest: 'browser/'
                }
        },
        watch:{
        	files:['www/**/*.*', 'cordova-browser-src/**/*.*'],
        	tasks:['exec:prepare', 'copy']
        }
    });
        
        // watch the www folder and build cordorva
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-exec');
        // copy www to browser and load in cordova.js to test in browser
        grunt.loadNpmTasks('grunt-contrib-copy');

    grunt.registerTask('default', ['watch']);

};

[/pastacode]

And here’s the cordova.js file:

[pastacode lang=”javascript” message=”” highlight=”” provider=”manual”]

var cordova = { 
    init: function() {
        app.initialize();
        var event = new Event('deviceready');
        document.dispatchEvent(event);
    },
    plugins: {
        notification: {
            local: {
                on: function(listener, callback, context) {
                    document.addEventListener(listener, callback, context);
                },
                getAll: function(callback) {
                    var notifications = [];
                    callback(notifications);
                },
                hasPermission: function(callback) {
                    callback(true);
                },
                schedule: function() {
                    
                },
                cancel: function(id, callback) {
                    var notification = {
                        stuff: 'things',
                        id: id
                    };
                    callback(notification);
                },
                registerPermission: function(callback) {
                    callback(true);
                }
            }
        }
    },
    InAppBrowser: {
        open: function(url) {
            window.location = url;
        }
    }
};

var StatusBar = {
    hide: function() {
        return true;
    }
};

setTimeout(function() {
    cordova.init();
}, 1000);

[/pastacode]

It will fire a “deviceready” event to kick the whole thing off!