jQuery Mobile log all events, to fix blank page

Question

I have a multipage jquery document. All is working smoothly, except that every now and again, while navigating between pages, a page will simply display as a white screen. The footer and header will display, but nothing in between.

My guess is that a specific event, is causing the error, or will at least point me in the right direction. How can I get jQuery to write out every event as it's happening to the browser console.log?

score 2 · Answer 1 · answered Jun 16 '13 at 21:30

I was digging around for something similar and almost rolled out my own before finding this:

http://view.jquerymobile.com/master/tools/

Basically, one can use the page event logger bookmarklet to dynamically inject this script into the DOM and have events logged to the standard console.log. If one wants to see all of the events (such as "mobileinit") just include the script in your pages. I do something like this typically:

{% if debug %}
    <script src="http://view.jquerymobile.com/master/tools/log-page-events.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.js"></script>
{% else %}
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
{% endif %}

It's worth noting that not all events are logged (e.g. orientationchange) but most of the events are. It's saved me quite a bit of time with debugging and understanding the framework.

score 1 · Accepted Answer · edited May 23 '17 at 11:52

jQuery Mobile does not have a built in switch to enable debugging on all JQM events. The site recommends the uncompressed scripts for use with debugging, but that doesn't exactly make it easy for logging everything in the console.

It may help to bind to every event on the page or at least the $.mobile.base object. Check out this post for how to do that: How can I bind all events on a DOM element?

jQuery Mobile log all events, to fix blank page

2 Answers2