Debugging Tabris.js

In this tutorial we will show you how to debug a Tabris.js application running on your Android phone using the Over the Air debug protocol. To get started you will need:

• A Tabris.js account
• The Tabris.js developer app deployed on your Android phone
• Eclipse and Eclipse Chrome Dev tools plugin

1. Create a Tabris.js Account

Tabris.js is a platform for writing Native Mobile Apps, entirely in JavaScript. If you haven’t signed up for an account, why not? It’s free, just head to tabrisjs.com and sign-in with your GitHub credentials.

After you’ve signed in, you can start writing Tabris.js apps directly in your browser using the on-line editor provided.

2. Download the Tabris.js Developer App

The Tabris.js Developer App allows you to deploy your scratch pad, or any GitHub project, directly to your phone over-the-air. This cycle is one of the fastest development / deployment cycles in the mobile industry. Once you install the Developer App you can login with your GitHub credentials. Finally, choose My Scratchpad under My Scripts to execute your first Tabris.js app.

3. Install the Tooling

To debug your Tabris.js app, you need to install Eclipse and Chrome Dev Tools for Eclipse. If you don’t have Eclipse installed, you can download an Eclipse package from our website. Choose Help->Install New Software and add the following update site to your list.

https://chromedevtools.googlecode.com/svn/update/dev/

And choose Chromium JavaScript Remote Debugger

4. Debug your App

To get you started, we will debug the following Tabris.js App.

// Create a top-level "Page" that contains our UI
var page = tabris.create("Page", {
  title: "Hello, World!",
  topLevel: true
});

var counter = 0;

// Create a push button and add it to the page
var button = tabris.create("Button", {
  text: "Start",
  layoutData: {centerX: 0, top: 100}
}).appendTo(page);

// Create a text label and add it too
var label = tabris.create("Label", {
  font: "24px",
  layoutData: {centerX: 0, top: [button, 50]}
}).appendTo(page);

function updateCounter() {
  counter++;
  label.set("text", "Counter: " + counter);
}

// Start the timer when the button is pressed
button.on("selection", function() {
  taskId = setInterval(updateCounter, 1000);
  label.set("text", "Counter:");
});

page.open();

This app starts a counter once the ‘Start’ button has been pressed. You will notice that if you press the Start button a second time, a second timer will start and they will both access the same counter variable.

4.1 Connecting to your device

To connect to your device, ensure that your app is currently running. With the Eclipse Tooling installed, choose Run->Debug Configurations, choose Standalone V8 VM and create a new Configuration. Enter the IP of your device and the port 20001. The IP of your device can be found on the Wi-Fi settings page under the ‘Advanced’ menu option.

Once connected, the source code will be downloaded from your device and displayed in Eclipse.

4.2 Breakpoints

If you edited your sources using the Scratchpad, your Application will be called app.js. Open this file in the navigator. Breakpoints can be set by double clicking in the margin.

The variable view can also be used to see the current value of any variable accessible from the current function.

5. Conclusion

Thank you for reading about how to Debug Tabris.js apps using the over-the-air debug protocol. As always, if you have any questions or comments, please don’t hesitate to contact us. For further readings on Tabris.js, check out How To Build a Tabris.js App in 10 minutes.

For more Tips and Tricks with Tabris.js follow us on Twitter.