Use JQuery Mobile’s Tools Suite to help you debug and improve your JQuery Mobile application

If you’ve worked on a JQuery Mobile project that contains any significant amount of complexity, you will inevitably run across many occasions where you want to scream at the top of your lungs one or more of the following:

• “What is going on!”
• “Why isn’t this working!”

Typically you (hopefully) dig through the JQuery Mobile documentation, and even the source code (right?) to try and piece together what is going on, and perhaps you try and step your way through a debugger session full of various functions, events, callbacks, and so on. Or perhaps you simply throw up your arms and post your issue on Stack Overflow or JQuery Mobile’s forums. All of these options contain varying degrees of validity and usefulness – so don’t let me stop you from doing any/all of these things, but I believe many developers are not aware of an additional resource that is at your disposal – a set of debug pages and scripts within JQuery Mobile itself. In many instances, these tools can save you significant time and effort on the sleuthing trail. So let’s look at them already!

We have 3 main “out of the box” tools at our disposal, which I’ll cover in sections, but here’s a list of what we’ll cover so you can optionally skip to a particular section you might be especially interested in:

Configuration Properties
Page Events
Page Change Times

These tools can be found here, under the JQuery Mobile git repository, which I would encourage you to clone if you wish to use JQuery Mobile and/or the tools referenced in this article. While the tools in their ‘out of the box’ state can be rather useful (as I’ll try and show), you may find that you can get even more out of them by customizing their output. You may even decide to add your own tools, and hopefully contribute them back to the project if you believe others would find them useful! So pull down the code, and use the overview below as your primer to look into the files/scripts referenced to see what exactly they are doing.

Configuration Properties

The ‘Configuration Properties tool is an html page (config-props.html) which dumps out the values within JQuery Mobile’s $.mobile and $.support objects. Discussion of these values can be found on JQuery Mobile’s website here , so please leverage this documentation to become familiar with when these values can be set and ensuring that you are viewing this page after they have been set and JQuery Mobile has been initialized. These global config objects contain properties that are at the core of how JQuery Mobile gets configured to function for a particular user’s environment, and you should become familiar with these properties and their various possible values to understand how your JQuery Mobile app can be made to function differently when it is setup with different global config property values. An example default output from JQuery Mobile 1.2 (final) for these settings is shown below:

Configuration Properties (1 of 2)
Configuration Properties (2 of 2)

Log Page Events

When you load a JQuery Mobile page, several events and subsequent actions occur. Depending on whether that page is navigated to directly (say via manually typing in a url), or via navigating from one JQuery Mobile page to another (either via a link or invoking $.mobile.changePage()), different JQuery Mobile page events are fired. Via either including the ‘log-page-events.js’ file in your app, or using the js bookmarklet included in the ‘log-page-events.html’ file (which ultimately loads the aforementioned javascript file), you can get insight into what page events are firing, and a minimal amount of data along with them, for various JQuery Mobile page loading/transitioning use cases. Example output for a ‘direct’ page load is shown below:

mobileinit (1351047613999)

pagebeforechange (1351047614053)
page: div
data-url: /example/1

pagebeforecreate (1351047614059)
element: div

pagecreate (1351047614140)
element: div.ui-page.ui-body-a

pageinit (1351047614182)
element: div.ui-page.ui-body-a

pagebeforeshow (1351047614186)
page: div.ui-page.ui-body-a
data-url: /example/1

pageshow (1351047614213)
page: div.ui-page.ui-body-a.ui-page-active
data-url: /example/1

Page Change Times

As mentioned above, when you change from one JQuery Mobile page to another, typically either through clicking on a link to another JQuery Mobile page that already exists in the DOM, or by manually calling $.mobile.changePage, several events and subsequent actions occur. At a high level the following actions occur:

• A page change process is begun
• A new page is loaded
• The content for that page is “enhanced” (styled)
• A transition (slide/pop/etc) from the existing page to the new page occurs

The ‘Page Change Times’ tool gives you a breakdown for how long each part of this “changePage” process takes. An example output is shown below.

load + processing: 3
enhance: 45
transition: 604
totalTime: 670

These values are in milliseconds.

One thing I do not like about the script (page-change-time.js) is that it outputs these times in an alert box, so each “change page” is going to show you this data by halting the app. If this also bugs you, you should feel free to alter this script for your own use case, to probably output these values to the console instead.

JQuery Mobile provides a set of 3 “out of the box” scripts to help you gain insight and understanding into current global configuration values, page events, and page change timings in your application. Using these scripts as part of your development process should provide you insight into what is happening “under the covers” in your application, reducing frustration and increasing your understanding of how your application functions. I encourage you to give these scripts a try, and customize them as you see fit to help you increase the efficiency of your development efforts.

One thought on “Use JQuery Mobile’s Tools Suite to help you debug and improve your JQuery Mobile application

Leave a Reply

Your email address will not be published. Required fields are marked *