robert dougan

So, you downloaded Sencha Touch 2. You want to make an amazing mobile application. You use the awesome SDK Tools to generate your first Hello World application. Everything is going well until, BAM! - shit isn't working. What do you do?

Let me guide you.

Web Inspector

This really is JavaScript debugging 101, but maybe you don't even know what the Web Inspector is. Well, it is this glorious tool which is part of Webkit (so part of Chrome and Safari) which allows you to:

• Read/modify the DOM
• Read/modify CSS
• View resources on the page
• Track network activity on the page
• Debug scripts
• Run performance tests on your page
• Directly run JavaScript

In Chrome, you can open the Web Inspector by selecting: View > Developer > Developer Tools

In Safari, you must enable it first by opening preferences and selecting Show Developer menu in menu bar under the Advanced tab. Then you can select: Develop > Show Web Inspector

Using the Console

The console allows you to access the JavaScript engine on your page. You can directly run JavaScript/Sencha code from there. This can be incredibly useful when testing or debugging your application.

Open up the Web Inspector and select the Console tab. Click right where the little arrow blue arrow is and type the following:

alert('Testing!');

Yay! An alert. Now lets run some Sencha Touch code:

Ext.Msg.alert('title', 'a message');

Tada! A Sencha Touch message box should appear on the screen.

Browser and JavaScript warnings and errors also appear in the console:

Oh look at that; an Unexpected identifier on line 14 of Main.js. I'm such a n00b. Missing , on line 13.

ComponentQuery

Now that you're a Console pro, it's time to learn about ComponentQuery. It allows you to search and find components in your application using CSS-like selectors. It's incredibly powerful.

Lets look at the following example:

Assume we want to change the active item of this tabpanel. We both write amazing code, so we don't have any dirty global variables on the page so we can't access it from the console directly. This is where ComponentQuery comes in.

Type the following in the console:

Ext.ComponentQuery.query('tabpanel');

Which gives us:

As you can see, we simply pass the tabpanel xtype and it returns an array of all tabpanel instances on the page (one in this example). Now we can directly call methods on that tabpanel:

Ext.ComponentQuery.query('tabpanel')[0].setActiveItem(1);

Simple.

And of course you can use this to access and modify any components on the page:

Ext.ComponentQuery.query('tab')[1].setText('Hello');
Ext.ComponentQuery.query('toolbar')[0].getUi();
Ext.ComponentQuery.query('toolbar')[0].setUi('light');

Script Debugger

The Scripts tab in the Web Inspector is the next step on our journey. The console is great for viewing errors and warnings, and can be very useful when you want to dynamically change something in your application, but often you want to stop your application when an error happens and look around. This is where the debugger comes in.

The debugger in the Web Inspector is much like any other debugger in other programming languages, so you may be familiar with many aspects of it.

Lets assume we have this code in our application:

Ext.define("Sencha.view.Main", {
    extend: 'Ext.Container',

    config: {
        items: [
            {
                xtype: 'button',
                text: 'Tap me!'
            }
        ],

        control: {
            'button': {
                tap: 'onButtonTap'
            }
        }
    },

    onButtonTap: function() {
        this.doSomething();
    }
});

If you run this, you'll get the following error in your console:

In other words; it is not finding the doSomething function. What if we expect that function to exist?

Lets open up the Web Inspector and select the Scripts tab. What we then want to do is ensure the pause button is in its purple state. This means it will stop JavaScript execution when an exception (error) happens:

Now if we tap the button again, it will stop execution right on that line:

An important thing to remember at this point is that anything you type in the console now will be within the scope of the current line of JavaScript. So in the above case, we are inside the onButtonTap function in our Main view.

Now of course we know that the doSomething function doesn't actually exist in this example, but this type of debugging is incredibly useful at times when the scope may be accidentally incorrect.

debugger;

debugger; is a way to stop JavaScript execution in your application when you want. Lets say we have the following code:

onButtonTap: function() {
    var test = "one",
        bar = 10,
        foo = (bar * 9) + ' one';

    this.doSomething(foo);
}

We're running our application but for some reason the code is returning the wrong value. Lets type debugger; right above the doSomething() call:

onButtonTap: function() {
    var test = "one",
        bar = 10,
        foo = (bar * 9) + ' one';

    debugger;
    this.doSomething();
}

Now when we tap the button, the debugger will stop at that line:

And we can then inspect our values right from the console:

Getting more out of the Web Inspector

I recommend you watch this video by Paul Irish. It goes over some quick tips on how you can get the most out of the Web Inspector has got to offer:

What's Next?

Next in this series of posts I'll be talking about specific components in Sencha Touch, what common issues people have when dealing with them and how to efficiently debug when are having issues.