How to debug onDeviceReady in a hybrid app -- cordova

Question

Please i have my react app hybrid app which i am adding cordova framework to. I added the cordova project , built, release , emulate my app on emulators all successfully. The cordova project added an index.js in my app which i referenced in my index.html below.

</head>

<body>

<div id="root" class="root app">
    <div class="mobile-page">
        <img class="spinner" src="img/symbol-logo.svg" />
    </div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="index.js"></script>
<script src="boot.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,Promise,Array.from,Array.prototype.find,Array.prototype.includes,String.prototype.startsWith,String.prototype.includes,Math.sign,Intl.~locale.en,Intl.~locale.id,Intl.~locale.ru,Intl.~locale.fr&unknown=polyfill"></script>
<script async src="app.js"></script>

the app.js above is built using webpack and my app is developed using react js. My index.js above

var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
        document.addEventListener('resume', this.onDeviceResume, false);
    },

'receivedEvent'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        codePush.sync();
    },

    onDeviceResume: function () {
        app.receivedEvent('resume');
        codePush.sync();
    },

    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    },
};

app.initialize();

My problem is , i am not sure if my index.js events are called at all. I want to test/debug if my onDeviceReady event above is being called. I want to be able t print a simple console message and debug . Please how do i do that ?

Try Chrome Inspect Device to check logs of your Mobile. In case if you haven't got this idea. — gsthina, Jun 23 '16 at 07:04

score 2 · Accepted Answer · answered Jun 23 '16 at 07:42

I usually used cordova browser platform.

cordova platform add browser

Then build your app in browser

cordova platform build browser

cordova emulate browser

Your cordova would lunch a localhost and there you can see your console messages . If you put a breakpoint also as noted by the user above. That's how i do mine. Hope it helps.

score 0 · Answer 2 · answered Jun 24 '16 at 06:02

You can try phonegap desktop app too.

It works really easy, just include your project files in it and enter the local url it gives you to the developer app on your mobile device.

Phonegap desktop app has a console that will help you see your logs and because of it you can debug your app simply.

How to debug onDeviceReady in a hybrid app -- cordova

2 Answers2