There are many ways to debug your programs! Here's a list to get you started:
Print debugging
As we just showed, you can insert $ \text{print()} $s or $ \text{println()} $s into your code to help you figure out which code is being called and with what values. Both of these functions output values in a console that pops up over the canvas. You can also use $ \text{debug()} $ to send the output to your browser's JavaScript console, if you know how to use that.
Screenshot of using the print console in a program
Rubber-duck debugging
Sit a rubber duck next to your computer—or whatever duck-like object you have handy—and explain your program and problem to it, line by line. Many programmers find that just the process of putting the problem in words helps their brains realize what's wrong. You can also ask a friend or teacher to be your rubber duck, sitting and listening to you explain it. Sometimes they might even think of a solution for you, but regardless, they're doing you a service by just listening to the explanation.
Here's the closest thing we have to a rubber duck in the Khan Academy office:
Photo of stuffed Oh Noes guy next to a laptop
Exaggerate your output
Since you're making programs in ProcessingJS, you're dealing with lots of fill colors and strokes. When I'm not seeing the visual output I expect, sometimes it helps to use really big or extreme values for the fill and strokes—like $ \text{strokeWeight(30)} $. Since our environment is realtime and includes the number scrubbers, it's really easy to change up the numbers in your program to see what effect the change has on the output. For example, it might help you figure out where a missing shape went.
Screenshot of program with exaggerated strokeWeight()
It's a good idea to get comfortable with all your options for debugging programs so that you can use whichever one works the best in a particular situation.