Hello there! 🤝

Ready for Day 3? Not a lot of people get that far, so be proud of yourself 🎉

Today’s lesson is value-packed, you will learn everything you need to know to debug any problem that you might encounter in your Roku application. For this project, and all your future ones.

Let’s dive right into it!

Debugging your application

No matter how skilled you are as a developer, you're bound to run into bugs eventually. This is just the nature of our work. So far we've tried to keep the code samples 100% bug free, but as you grow as a Roku developer and wander into new concepts and ideas by yourself, you will eventually hit a snag in your smooth sailing.

That's your cue for debugging. It's all about finding those little gremlins in your code and showing them the door. Without it, users might get frustrated with those glitches and leave your application, and we don't want that.

Now, trying to debug a Roku application without the right tools is like trying to find your way in the dark without a flashlight. You might use print statements to guess what's happening, but it's a shot in the dark. It's tedious, and honestly, it can drive you a bit nuts, especially when you're dealing with complex user interactions or observer-based changes.

Using the Debug Protocol

The debug protocol is part of our modern toolstack for Roku development. It's an addition to the VSCode plugin that allows us to bind a debugger to our launch session and get into the nitty-gritty of your app's behavior. With it you can:

• Stop at the right time: Set breakpoints to freeze your code at crucial moments and see exactly what's going on.
• Step Through the Mystery: Move through your code line by line, or jump over functions, to trace where things might be going sideways.
• Peek Behind the Curtain: Check out the values of your variables in real-time. Sometimes the bug is just a silly mistake with a variable.
• Understand how you got there: In most cases you can inspect the call stack of methods that were called until the problem happened, and check the variables of those scopes too.

To exemplify the features of the debug protocol, we'll temporarily increase the complexity of our app by adding a new method to increase the counter

sub increase()
    currentCounter = m.counter
    m.counter += getPlusOne(currentCounter)
    m.label.text = `The counter is: ${m.counter}`
end sub

function getPlusOne(value as integer) as integer
    return value + "1"
end function

As you can see, the getPlusOne() method has a typo: It's adding a string to an integer value. This will result in a Type mismatch exception.

Before running our application, to enable the debug protocol you must go to .vscode/launch.json and add the following field to the first configuration:

{
	"enableDebugProtocol": true
}

If you run the app and press the Increase! button, the app will crash after a moment and you will see something like this: