Tuesday, September 16, 2014

How to debug cordova javascript deviceready event

Debug cordova deviceready javascript event is not possible without making some change in cordova.js, as you cannot attach the desktop browser to the device uiwebview before the html file is loaded, but once it is loaded, the deviceready event is already fired and it is too late to attach the debugger.

In order to debug deviceready event, you can make a small change to do not call the deviceready event handler, until the debugger is attached. The following steps can be used to do so:

1.  In index.html's body element, add a button to manually fire mydeviceready event after the debugger is attached,    


<br><br><button onclick="document.dispatchEvent(new Event('mydeviceready'));">fire deviceready</button>

2. in Index.js and any other js files that listen on "deviceready" event,  change the event name from deviceready

document.addEventListener('deviceready', function 
to mydeviceready:
document.addEventListener('mydeviceready'

3. launch the app, and after attaching the desktop browser, click the "fire deviceready" button to debug device ready event handle.

It is also helpful to wrap cordova callbackFromNative function within setTimeout, so when debugging the cordova js callback, it will not hang in safari.

No comments:

Post a Comment