Loading lesson path
Concept visual
Start at both ends
Many beginners quit because they cannot debug. This page shows you how to find out why code does not work. Debugging means finding and fixing mistakes (bugs) in your code. Bugs are normal. The skill is learning how to locate them quickly.
Programming code might contain syntax errors, or logical errors. Many of these errors are difficult to diagnose. When code fails, beginners often guess what is wrong. Debugging is the opposite: you check facts.
→
→
→
Then fix it. Often, when programming code contains errors, nothing will happen. There are no error messages, and you will get no indications where to search for errors.
Searching for (and fixing) errors in programming code is called code debugging.❝ Errors can and will happen, every time you write computer code.
Formula
Debugging is not easy. But fortunately, all modern browsers have a built - inJavaScript debugger.
Formula
Built - in debuggers can be turned on and off, forcing errors to be reported to the user.With a debugger, you can also set breakpoints (places where code execution can be stopped), and examine variables while the code is executing.
Debugging is the process of testing, finding, and reducing bugs (errors) in computer programs. The first known computer bug was a real bug (an insect) stuck in the electronics.
The browser console shows errors and messages from JavaScript. If your code "does nothing", the console often tells you why. Normally (otherwise follow the steps at the bottom of this page), you activate debugging in your browser with the F12 key, and select Console in the debugger menu. If you do only one thing: always check the console when something fails. Step 2: Use console.log()
In JavaScript console.log()prints values to the console. This helps you to see what your code is doing.
<!DOCTYPE html> <html> <body>
Formula
< h1 > My First Web Page </h1 ><script>
console.log("Hello!");</script> </body> </html> Print variables to find what is wrong:
let price = 50;
let quantity = 3;
let total = price * quantity;
console.log("Total:", total);Log the value before and after the line you suspect. That can tell you where things start going wrong.
Many bugs happen because you assume a value is something, but it is not. Check the value. Check the type.
let x = 5;
let y = "5";
console.log(x + y); // 55 (string!)
console.log(x + Number(y)); // 10 (number)
Reading Error Messages (Beginner Friendly)Error messages look scary, but they usually mean one of a few common things.
Means: This name does not exist. Often a misspelling or variable not declared.
console.log(myValue);// ReferenceError: myValue is not defined
Means: You tried to use a value in an impossible way. Often undefined or null.
let x;
console.log(x.length);// TypeError: Cannot read properties of undefined In the console window, the error usually includes a line number. Click it in the console to jump to the exact line.