Mobile App Debugging

MobileTogether is a tool for building highly complex, elegant, cross-platform solutions. Developers need mobile app debugging tools to troubleshoot during development and understand app behavior. The MobileTogether Designer offers full-featured debugging of app execution flow inside action trees and debugging of XPath/XQuery functions. These features are provided in two mobile app debugging views integrated into a single tool.

The Actions Debugger view allows developers to debug the Actions of a Control event or a Page event. This view is available when an Action that has been selected for debugging is encountered during processing. The XPath Debugger view opens the XPath/XQuery evaluator window for in-depth tracing and debugging of expressions.

Developers can set breakpoints at various locations and the app, then execute one step at a time, pausing in either view to allow examination of the complete execution environment.

Let’s see mobile app debugging in action:

In an earlier post on programming techniques for mobile development, we used an Air Quality app to illustrate a subroutine in a mobile app. The subroutine, implemented as a MobileTogether action group, calculated the local time of an air quality reading from data returned by an API, delivered as GMT time and an adjustment value. We can debug the subroutine to make sure our calculations are valid.

First, we’ll set a breakpoint at the top of the Calc local time action group to pause execution when the subroutine is called:

Setting a breakpoint for mobile app debugging

You can add as many breakpoints as you need, and you don’t have to worry about finding them later. They are managed from the main Debug menu:

Options on the main debugging menu

We also used the menu to set the Stop at next breakpoint option. Now we can run our app in the Simulator, and it will execute normally until the Calc local time action group is called.

The image below shows the Simulator display  when the app paused at the breakpoint. The user selected a city report for London, the app called the API, and now it wants to calculate the local time from the returned data:

Debugging view when execution pauses at the breakpoint

Two debugger panes are open on the left side of the screen. At the top we see the actions about to be performed, with the red breakpoint and a green arrow marking the current step. In the pane below we see the callstack of actions leading up to the action group.

The plus buttons in the callstack display the values of the parameters provided when the action group was called. We can click the Step into action button at the top to continue execution one step at a time:

Viewing the the parameters sent to the subroutine

Wait a minute, isn’t London in the same time zone as Greenwich, UK and shouldn’t need an adjustment from GMT? I asked all my smart assistants and all my search engines–they told me London and Greenwich both use British Summer Time, which is one hour forward of GMT.

In any case, that’s the data the API gave us, so we can continue. Stepping through the comments, we come to the first Update Node action:

The first action perfromed by the subroutine

The localDateTime node is set to the $time parameter.

Step again:

Modification of the dateTime string

The letter T is inserted between the date and time to match the syntax we need for the add-hours-to-dateTime( ) function.

Step again:

Add hours from the adjustment

The adjustment hours are added.

Step again:

Check for minutes to adjust

Are there any minutes to adjust? No.

Step again:

Remove letter T from the dateTime

Replace the T with a space.

Step again:

The end of the subroutine has been encountered

The comment line marks the end of the Action group. Now we can use the green arrow Run button at the top to continue normal execution of the app. A sub page opens to report the air quality index:

A view of the sub page with the air quality report

So the mobile app debugging by actions view proved our logic was correct.

But it’s pretty tedious and unnecessary to save the intermediate result each step of the way. We should combine the steps into a single expression:

Performing the dateTime adjustment in a single step

The three original actions are disabled and replaced by one action that includes a complex expression. We can use the XPath debugger view to test this expression.

We could have switched seamlessly between views, but we stopped the first debugging session to edit the expression. Now we’ll run this new version in the simulator. This time when it stops at the breakpoint, we’ll use the Step into XPath button to start mobile app debugging in the XPath/XQuery Debugger view:

Mobile app debugging in the expression view

The XPath/XQuery evaluator window opens and the debugger starts to evaluate the expression:

Evaluating an expression during mobile app debugging

Now we’ll use the Step into button in the XPath window, continuing to walk through the expression:

Evaluating the expression from the inside out

The panes at the bottom of the image identify the contents of the parameters provided when the action group was called. The source of $time was a JSON node s containing string data that was returned by the API.

Step again:

Preparing the string for the add-dateTime( ) function

Inside the expression, we still need T to obey the syntax of the add-hours-to dateTime( ) function.

Step again:

Now we’ve really stepped into it and completed the expression. On this run the original $time parameter was 2020-08-03 07:00:00 and the $adj value for adjustment was -07:00. At this point our result is 2020-08-03T00:00:00.

The next action will be the test to see if we need an adjustment for minutes. The $adj parameter ends in 00, so that test fails, the T is replaced, and the sub page is displayed:

Display of the new air quality report

If you’re doing cross-platform development, you need a tool with mobile app debugging! Check out our MobileTogether video demos, more sample apps, or even the online manual for a deep dive into all the info. When you’re ready to jump in and build your own cross-platform mobile apps in the fastest time, download the MobileTogether Designer to get started.

Tags: , , ,