WoofWoof gave me a great idea a few months ago, and I’ve been thinking about it over the weekend.
He said that we should have a tutorial on using the built-in debugger in MakeCode.
So, here it is!
This won’t be a tutorial like those that you see on the MakeCode home page, because you cannot activate the debugger from inside of the tutorial tool.
Instead, you will follow along with instructions here. You’ll need to open MakeCode in a separate window – preferably on a different screen. After learning about the built-in debugger, you will have a series of exercises that you can try to debug on your own.
The instructions should work for any of the MakeCode editors. The exercises, though, will be for MakeCode Arcade.
Let’s begin!
Using the built-in debugging tool
Let’s use a simple project to learn about the debugger. Open one of the projects below in a new window or on a separate device.
The button for entering Debug Mode is beneath the simulator with an image of a bug. It is highlighted in the screenshow above.
Play around with debug mode using the steps below.
Playing with debug mode
- Switch MakeCode into Debug Mode by pressing the button with the bug icon in the simulator toolbar.
- When MakeCode is in Debug Mode, you cannot edit your code, so the toolbox is replaced with the Debug Mode controls and the variables list.
- The → Step button runs the current block and then highlights the next one to run. This is called stepping through your code.
- The play/pause button runs your code when the play (triangle) button is showing. MakeCode will stop at the next breakpoint (the red dots that appear on the left side of your blocks in Debug Mode) or when you select the pause button.
- The restart button runs your program from the beginning.
- The slo-mo button switches the playback speed between full speed and slow speed. When Debug Mode is running your program in slo-mo, you can watch the highlight and the variables list update as your code runs.
- When you enter Debug Mode, your program is restarted and then paused. Notice the yellow highlight around the first block in the on start container. This is the next block that Debug Mode will run.
- Select the → Step button in the Debug Mode controls. Debug Mode runs the first block, updates the variables list, and then moves the highlight to the next block that will run.
- Select the restart button in the Debug Mode controls. Then, select the play button. Notice how quickly your program runs.
- Enable slo-mo mode and then restart your program again. Notice that your program runs much more slowly now.
- Enable the breakpoint on the if block by selecting the small circle next to the word if. Notice that the circle turns red, indicating that the breakpoint is enabled. Disable slo-mo mode and then restart your program. Notice that your program restarts, and then Debug Mode automatically pauses on the if block. If you enable multiple breakpoints, then Debug Mode will pause at any that it encounters. You can disable a breakpoint by selecting the breakpoint circle again.
- Use the button in the top-right corner to exit Debug Mode.
Debug Mode helps you to visualize what the computer is doing as it runs your code. Explore MakeCode’s Debug Mode on your own.
When you are ready, try this activity with the sample project:
Debugging activity
- Place MakeCode in Debug Mode if it is not already.
- Clear any breakpoints that you have set and then enable the breakpoint on the if block.
- Restart the project and then select the play button to run the code. Debug Mode will run the first block and then it will pause at the if block.
- Review the variables list. Which block will run next?
- Select the → Step button to see if you were correct.
- Play the game a few times. See if you can correctly predict each time.
Debugging exercises
Now that you have learned a little bit about Debug Mode in MakeCode, you can try debugging code on your own. Time to squash some bugs in MakeCode Arcade! Note: Some of these are really tough!
Answers are provided at the end. If you have any questions, feel free to post them below.
Do you have any debugging exercises that you would like to share? Or ideas for other debugging exercises? Feel free to post those, too!
Exercise 1
A friend shares their project with you seeking help. MakeCode Arcade generates an error, and the simulator does not run the project. Can you help?
Exercise 2
A friend shows you the project that they are working on. The player’s sprite moves around the screen just fine, but why is there an extra sprite on the screen?
Your friend wanted the player to be a cat at first, but then changed their mind and wants the player to be a fish instead.
Also, the player can move their sprite off the screen, and your friend does not want that. Can you fix this?
Exercise 3
A friend was playing with some of the sprite blocks, but now their project is broken and is generating a strange error. Can you help?
Exercise 4
A friend shows you the project that they have just started. The player can move their sprite around the screen, but something strange happens when the duck touches food.
Can you explain what is happening, and can you fix the code?
Exercise 5
One of your friends is trying to get their game, Guess My Number, to work. They inserted some blocks to deal with data validation because they heard that you always should validate user input. Their code isn’t quite working correctly. Can you help?
Exercise 6
Your friend shows you a game that has different sizes of coins that the hero is collecting. The coins appear randomly … somewhat. Only the large coins seem to be distributed randomly. The other coins don’t really seem to be appearing.
A coin should disappear once the player picks it up.
Your friend also wants to assign different values to the different coin sizes.
Can you help them accomplish what they are seeking?
Exercise 7
One of your friends is trying to understand their code. It works … but they do not really understand why. What they really want is a row of asteroids … but right now, they have something different. Can you explain their own code to them? Can you fix the code to show a row of asteroids instead?
Exercise 8
Another friend is working on arranging a series or enemies. They want a grid of asteroids, four by four. Right now, they have a diagonal line of asteroids … sorta? Can you help?
Exercise 9
One of your students has taken a programming course in the past. They want to place sprites in a row. They know that they can do this with a for loop. For example, in a BASIC-like language, you would write something like this:
For xCoord = 10 to 150 step 100
create enemy sprite
set sprite’s x coordinate to xCoord
Next xCoord
In a C-based language, you might write something like this:
for (xCoord = 10; x <= 150; x += 10) {
create enemy sprite;
set sprite’s x coordinate to xCoord;
}
Your student also recalls something about writing any for loop as a while loop. Right now, the simulator does not seem to do anything … at all. (If you let the simulator run long enough, then it eventually will encounter an out-of-memory error.) Can you fix this code?
Exercise 10
Your friend shows you a project where the player is trying to capture stars. The stars all originate at the center of the screen, which is fine … but they always move to the bottom-right. That does not seem … “random” enough. Also, your friend wants the stars to stay on the screen, and maybe change direction when they hit the side of the screen. How can you help?
Exercise 11
It’s Rock, Paper, Scissors, but it’s broken! Can you fix it? Review the comments throughout the program to help you understand it.[1]
Exercise 12
A friend created a program for their younger siblings to help with their addition facts. It has some bugs, though. Can you help?[1][2]
Footnotes
[1] From Usborne’s Practice Your BASIC. Usborne provides several of their programming books from the 1980s in PDF format at their website:
https://usborne.com/us/books/computer-and-coding-books
[2] This project uses the Text Sprite extension. Search the forum if you haven’t used this extension before!
Answers
- Exercise 1 https://makecode.com/_aaXfqCJ0KX7f
- Exercise 2 https://makecode.com/_UqR0k0YhsLoo
- Exercise 3 https://makecode.com/_huEFjbLMb76e
- Exercise 4 https://makecode.com/_iY30KXicT2FL
- Exercise 5 https://makecode.com/_HMMhP8azUEs4
- Exercise 6 https://makecode.com/_MA3d795z9CY1
- Exercise 7 https://makecode.com/_9osPa57prTwx
- Exercise 8 https://makecode.com/_PdAY94M962vw
- Exercise 9 https://makecode.com/_X8jDCX3hqKRa
- Exercise 10 https://makecode.com/_hw36370bC46j
- Exercise 11 https://makecode.com/_8yJiY8fxrgUK
- Exercise 12 https://makecode.com/_VE4atPYW9i0d