Main content
Computer programming - JavaScript and the web
Course: Computer programming - JavaScript and the web > Unit 1
Lesson 12: Debugging programsMore debugging tips
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
print()s or 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 debug() to send the output to your browser's JavaScript console, if you know how to use that.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:
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
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.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.
Want to join the conversation?
What is the difference between prints()s and println()s? Is there any at all?(121 votes)
Hi there,
Whenever you use a print() statement, it will print every sentence in the same line. However when you use println, it will print the command in a new line.
For example:
print("ritap1092 likes ");
print("chocolates");
So, you will get the output as:
ritap1092 likes chocolates
However, when the same statement is written as:
println("ritap1092 likes ");
println("marshmallow");
Now you will get the output as follows:
ritap1092 likes
marshmallow
Notice the ln in println. It simply changes the line. Memorize it as line(ln).
Upvote if you find the explanation useful :)
cheers!(1351 votes)
are we learning processingjs or java script?(66 votes)
You could say both. ProcessingJS is a JavaScript library.(164 votes)
Is JavaScript used normally for drawing and animation? Or could it be used to make a website for example?(46 votes)
Gmail was written in javascript!(answer your question?)(123 votes)
What is the difference between print() and println()? Please explain simply, but thoroughly.(36 votes)
print() prints everything in one line.
Though println() seems to do the same, it actually writes the text an then shifts the typing cursor to the next line.(13 votes)
- I know that there have been similar questions regarding this, but I need some clarification. Can one obtain a JavaScript IDE or use a Java IDE to test one's JavaScript programs? Or, is better to use notepad (notepad++) and attach it to an HTML program and test it on a website?(18 votes)
Eclipse has a JavaScript version.
It can be found here: https://www.eclipse.org/downloads/packages/release/2018-09/r/eclipse-ide-javascript-and-web-developers(20 votes)
how would i explain my code line by line if i have some programs with 500 lines!?(12 votes)- By using the baby-steps method.
Often a longer project consist of several sub-functions and a main program. So start by one function at the time.
Then separate your main program in sections, and make an overview, and then go into details for each section.
Usually you start with the most obvious parts and expand from there until you find the bug.(33 votes)
Why can't i delete things in the video(9 votes)
Jimmy,
If you pause the video, you should be able to edit the code. Once you restart the video, the original code will be restored, without your changes.(31 votes)
ive got this question that when i code in processing.js in the processing.org website they have a different syntax, why is that like for example in khan academy we write
var x = 5;
there we have to write
int x = 5;
so why do they have a different syntax(13 votes)- Because it's a different language. The Processing.js library is a port of the Java Processing library to Javascript. The porters merely copied the Java documentation. Thus, the examples are not written in Javascript. They are written in Java.(20 votes)
- Hmm what's the difference between println() and print() ? Also I have no idea how to use print() in fact... I try but it shows nothing T.T(10 votes)
printsaves the code toprintln, but doesn't actually display anything untilprintlnis called. You can useprintin places where you want to check for something, but you don't wantprintlnto show up right away.
Try this example code:print("Hello ");println("world!");(20 votes)
On my "Magic 8 Ball" program, It was working perfectly for about 2 weeks 4 days.
Then, My screen said (eerily) "Error 503 Service Unavailable" with the Khan Academy Loading symbol (you know what it looks like, right?) hovering above those words. Since then, my "Magic 8 Ball" program has failed to work! What should i do to fix this?(10 votes)
Maybe you should try debugging it yourself! Use the println(); command and maybe you'll come up with something!(12 votes)