Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Debugging for Dummies

Debugging WebWorks for Dummies

I'm frequently answering this question so thought I'd provide a decent guide as to how to discover why you app breaks

Please note that this, first, article is aimed at the before you need the debugger audience so you can freely skip this one if you know how to debug a basic app before you get to the device

We all do it, forget the odd quote here, semi-colon there or whatever and working out why it happens can be a nightmare

Please note that I'm using no libraries - e.g. JQuery - just straight JavaScript to simplify these demos

Let's start off with a fully broken app and fix it

<html>
<head>
<script type="text/javascript">
function wondow.onload = function () { // Deliberate mistake
    var txt = document.GetElementById('helloWorld'); // And another
    txt.HTML = "Hi There";
    }
</script>
</head>
<body>
<div id="helloworld">
You won't see this text
</div>
</body>
</html>

Can you see how this will break?

The first case is a situation where the debugger is of no use as the code is incorrect - there's no wondows object so the JavaScript compiler will fail

The best way to track this kind of error is to simply try opening your app in Chrome then right click and select Inspect Element then hit the Esc key and see what you get told is wrong

What fixes wondow so change it to window

It's still broken and once again, without going near a device, you can find out that there is no ID called helloWorld - change this to helloworld and the app works

This is very basic stuff but a very common cause of things not going as expected so before you result to doing proper debugging make sure your code compiles properly

It is suggested that while developing you preface your code with something that lets you know it actually loaded properly. This is as simple as adding an alert("I'm alive"); at the end of your JavaScript. If you don't get the alert the JavaScript is broken.

We end up with this

<html>
<head>
<script type="text/javascript">
function window.onload = function () { // Fixed
    var txt = document.GetElementById('helloworld'); // Fixed
    txt.HTML = "Hi There";
    }
    
alert("I'm alive"); // Remove this line from published application
</script>
</head>
<body>
<div id="helloworld">
You won't see this text
</div>
</body>
</html>

So far this all seems obvious - we're still not getting to the actual debugger yet as there is another very common mistake that can completely mess your code up

Welcome to the semi-colon and brace issue

There is still a symantic issue with the above code and it's a very common error - there is no semi-colon at the end of the onload

You should religiously make sure you end every command with a semi-colon as not doing so can make your code do what you say, rather than what you mean

Just MAKE SURE you end every line with a semi-colon

Next - braces, this problem is similar to the semi-colon issue

Take this callback...

function broken_callback(call_something(some parameter) (some_data) {
        alert(some_data);
        };

On the surface this looks OK but once again it won't compile

You need to close anonymous function calls so we need an extra bracket at the end to make this work as we want

This will happen to you often so watch out for it. The example is a very simple case of how not to do it.

Next time I'll actually get to the debugger but before I finish this piece I'll show you how to use a callback with parameters as this involves scope and have been asked to explain this kind of thing in more detail

Lets say you want to open a dialog and pass some information to it. This is a good real case example.

You might think that many ways will expose the <something> variable inside your callback (if life were that simple)

To explain properly look at this

var a;

function bad_idea(a) {
    return a * b;
    }

function broken() {
    var b;
    
    a=2;
    b=3;
    
    bad_idea(a);
    
    }
    
Everything knows about a but only broken() knows about b so bad_idea will break

This may seem obvious - would that it were...

Let's take a proper example (sorry Karel)

function setOnclickDelete(paramID) {
    document.getElementById('overflow-btn-delete').onclick = function() {
        standardDialog();
    };
}

function dialogCallBack(paramID){
    alert(paramID);
}

function standardDialog() {
   try {
      blackberry.ui.dialog.standardAskAsync(
      "Are you sure you want to permanently delete this item?",
      blackberry.ui.dialog.D_DELETE,
      function() { dialogCallBack(paramID); },
      {title : "Delete?"});
   }catch (e) {
      alert("Exception in standardDialog: " + e);
   }
}

This LOOKS like it should work but it doesn't

Before reading further can you see why?


[Blank space]
























function dodelete(opt, param) {
    alert("Dialog returned " + opt + "\nParam = " + param);
    }
    
function dlgdemo(param) {
        if(!wwloaded) { alert('No WW'); return 0; };
    try {
        blackberry.ui.dialog.standardAskAsync("Delete Item " + param + "?",
            blackberry.ui.dialog.D_DELETE,
            function(opt) { dodelete(opt.return, param); },
            {title : "Delete Dialog"});
        } catch (e) {
        alert("Exception in standardDialog: " + e);
        }
    }

The returned option from the dialog is unknown to the function that needs it as it is only in dodelete scope so the first example never gets opt.return

In such cases, and it's far from obvious, scope (what can see what) comes into play so dodelete never gets param in the broken version

This topic will be discussed in more detail when I get to actually debugging something

[Thanks to karelvuong for a good example of something hard to work out the solution to]










































Click the like button if you find my posts useful!