Channels ▼
RSS

Mobile

Debugging Mobile Apps with HTML5 and Intel XDK


Next, it is necessary to make some changes to the sample app started in the previous article with Intel XDK. The following lines show the new code for the callbacks in the www/js/app.js file.

function accelerometerSuccess(acceleration) 
{
    "use strict" ;
    var accelerationX = Math.round(acceleration.x * 10) / 10;
    var accelerationY = Math.round(acceleration.y * 10) / 10;
    var accelerationZ = Math.round(acceleration.z * 10) / 10;

    var leftButton = $("#left");
    var rightButton = $("#right");
    var upButton = $("#up");
    var downButton = $("#down");
    var moveX = "";
    var moveY = "";
    
    if (accelerationX > 0) {
        leftButton.text("Left");
        rightButton.text("");
        moveX = "left";
    }
    else if (accelerationX < 0) {
        leftButton.text("");
        rightButton.text("Right");
        moveX = "right";
    }

    if (accelerationY > 0) {
        upButton.text("");
        downButton.text("Down");
        moveY = "down";
    }
    else if (accelerationY < 0) {
        upButton.text("Up");
        downButton.text("");
        moveY = "up";
    }

    $("#accelerometer").val(
        "X: " + accelerationX + "\n" +
        "Y: " + accelerationY + "\n" +
        "Z: " + accelerationZ + "\n");
    
    var paramX = "";
    var paramY = "";
    var prefix = "?";
    if (moveX) {
        paramX = "?x=" + moveX;
        // Prefix for the next parameter
        prefix = "&";
    }
    if (moveY) {
        paramY = prefix + "y=" + moveY;
    }
    // Replace 192.168.2.6 with the IP of the computer
    // that is running Node.js
    var url = "http://192.168.2.6:1337/move" + paramX + paramY;

    var apiCall = $.get(url, function(response) {
        moveCallback(response);
	});
}

function moveCallback(response) {
    "use strict" ;
    // response is a JSON response
    // The response header specified a JSON response
    // Thus, response has already been parsed from JSON content and I can work with the properties
    if ((response.message) && (response.message == "Moved OK")) {
        app.consoleLog("Robot delta X: " + response.X + "; delta Y: " + response.Y);
    }
}

function accelerometerError() {
    "use strict" ;
    alert("Accelerometer Error");
}

Now, the accelerometerSuccess callback calls an HTTP GET method to the REST API with the necessary values for the x and y parameters to make the robot move in the desired direction. The code uses the $.get method to make an asynchronous call that will execute the moveCallback callback with the JSON response as its argument.

The move method in Node.js returns a response header with a Content-Type equal to application/json, so the response argument in the moveCallback callback is already parsed from JSON content and the code can access the properties: message, X, and Y. The code within moveCallback calls the app.consoleLog method to send information to the console log about the delta X and delta Y for the robot's position, retrieved from the REST API call response.

Save changes, go to the EMULATE tab, and the selected device will render the view. Move the accelerometer and check the Node.js window. You will notice the window will display messages once every second, such as Moving X: -1; Y: -1.

Debugging the App with the Built-in CDT Emulator

Intel XDK allows you to use built-in Google Chrome Developer Tools (CDT) to debug the app when you use the EMULATE tab. Thus, you can take advantage of your existing Web development experience to debug your app.

However, before you can use the console logs, you must make some minor changes to the code. Go back to the DEVELOP tab and open the xdk/init-dev.js file. Change the value set to dev.LOG in the following line from false to true:

dev.LOG = false ;

Now, open the js/init-app.js file and change the value set to app.LOG in the following line from false to true:

app.LOG = false ;

Sadly, you cannot set breakpoints in the editor and start the app in the emulator. You must use CDT to set the breakpoints in the JavaScript files after you launch a debugging session.

Save all the changes and go to the EMULATE tab. Click the Launch Debugger icon, located at the right of the reload button. The IDE will launch the CDT window. Click Console within the CDT window and notice that the app displays information about the device, Apache Cordova, and different events. Those logs appear because you changed the dev.LOG and app.LOG values from false to true. After you move the accelerometer, the console will start displaying the line with information about the robot movement, which is retrieved from the REST API call response. For example: Robot delta X: -1; delta Y: -1.

Click Network and you will see information about the HTTP GET requests to the REST API. If you click on one of the requests, you can check its headers, preview, response, and timing (see Figure 1).

HTML5 and IntelXDK
Figure 1: Gathering details about the HTTP GET requests made in the app with CDT.

Click Sources and then click on the Show navigator button located in the upper-left corner of the CDT window (below the Elements buttons). Click on the Sources button within the navigator and you will see all the source files under localhost and a port number, such as localhost:49202, and http-services/emulator-webserver/ripple/userapp…

Go to js/app.js and double click on the line number for the following line within the moveCallback function:

if ((response.message) && (response.message == "Moved OK")) {

If you cannot set a breakpoint, you need to use the magic hotkey to reload the app: Ctrl + R for Windows and Linux, or Command + R for Mac OS X. After the app restarts and CDT reloads, you will have the updated source code and you will be able to set a breakpoint.

Once the breakpoint is hit, you can check the values for the Scope Variables, watch expressions, run the code step-by-step, and use the JavaScript Console (see Figure 2).

HTML5 and IntelXDK
Figure 2: Checking the values for the Scope Variables after a breakpoint has been hit in the moveCallback function.

You can also click on the Elements button and see the HTML for the current view and its styles in the same way you would when you develop and debug Web applications.

Remove the breakpoint, click on the Resume Script Execution button, close the CDT window, and click on the Stop Emulator button. Notice that this procedure sometimes causes Intel XDK to display a blank dialog box or report an unexpected issue. In some cases, it is necessary to restart the IDE.

Using In-Device Debugging with Weinre and CDT

Debugging the app in the webview based on the Apache Ripple Emulator is really useful. However, some problems appear only when you run the app on the real device. Intel XDK includes tools that simplify debugging with Android devices connected through a USB cable. However, in this example, I want to develop an app that targets multiple mobile platforms and I don't want to focus only on Android devices. In fact, I want to debug the app while it is running on an iPad, an iPhone, a few Android devices, and a Windows Phone device.

You can generate a remote debugging Weinre script URL, add it to the www/index.html page in the app, and use the Intel App Preview app in your device to debug your app while it runs in the webview within the device. Any device that can execute the Intel App Preview app supports remote debugging with the Weinre script, and you can check the messages sent to the console. This way, you can easily verify whether the accelerometer values provided in either an iPad or an iPhone are as expected. In fact, you can debug iOS devices without a Mac. (You still need a Mac developer program to publish your app, but that's another story.)

Go to the TEST tab and click the MOBILE button in the upper-left corner. Copy the code for the Weinre debug script tag located within the ON DEVICE DEBUGGING section below EMBED THIS WEINRE TAG IN YOUR HTML FILES. The following line shows an example of a Weinre script tag:

<script src="http://debug-software.intel.com/target/target-script-min.js#xCCLL8lTppFtsJ5bSQ2qko8I93RTpM-YP-qQLR4-mrI"></script>

Go to the DEVELOP tab, open www/index.html, and search for the following line:

<!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work below -->

Paste the Weinre debug script tag code after the found line, save the changes, and go back to the TEST tab. Of course, you always have to make sure that you remove this script and any other debugging settings before you build your release version.

Click PUSH FILES on the PUSH TO TESTING SERVER section. Then, launch the Intel App Preview app on your device and go to Server Apps. The app will display a list with the projects that were pushed to the testing server. Tap RobotController and then tap Launch This App.

Next, go to the Intel XDK IDE in the TEST tab and click BEGIN DEBUGGING ON DEVICE.

After a few seconds, the TEST tab will display new contents with the Weinre debugging session and the following buttons or tabs:

  • Remote
  • Elements
  • Resources
  • Network
  • Timeline
  • Console

The buttons work in the same way they do with CDT, but with a slower response time (and some features won't be available). If you make changes to DOM elements in the Elements tab, the app will render these changes, but you will experience a short delay.

Click Network and you can see information about the HTTP GET requests to the REST API. If you click on one of the requests, you can check its headers, preview, response, and timing (see Figure 3).

HTML5 and IntelXDK
Figure 3: Gathering details on the HTTP GET requests made in the app with the remote debugger.

Click Console and you will see the messages sent to the console. You can also use the JavaScript console to evaluate expressions and run scripts in the device's webview.

Conclusion

If you target multiple mobile platforms and you've decided to work with HTML5, JavaScript, and Apache Cordova, the Intel XDK can really increase your productivity. The additional features added to each tool in the IDE make it easy to use, and you can quickly switch between tabs to work on the various tasks you need to address. There is still a lot of room for improvement in this IDE, but you will definitely enjoy some of the features I've covered in these two articles, especially if you have previous experience with Web development and want leverage that knowledge for work targeting mobile platforms.


Gastón Hillar is a senior contributing editor at Dr. Dobb's specializing in exploring emerging developer tools and technologies.

Related Article

Developing Cross-Platform Mobile Apps with HTML5 and Intel XDK


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.