Nuru Salihu Nuru Salihu - 5 months ago 25
iOS Question

How to debug onDeviceReady in a hybrid app -- cordova

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 ?

Answer

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.