diff --git a/client/src/pages/learn/javascript-algorithms-and-data-structures/debugging/index.md b/client/src/pages/learn/javascript-algorithms-and-data-structures/debugging/index.md
index 4dfd153e59..679299853e 100644
--- a/client/src/pages/learn/javascript-algorithms-and-data-structures/debugging/index.md
+++ b/client/src/pages/learn/javascript-algorithms-and-data-structures/debugging/index.md
@@ -6,6 +6,41 @@ superBlock: JavaScript Algorithms and Data Structures
## Introduction to the Debugging Challenges
Debugging is a valuable and (unfortunately) necessary tool for programmers. It follows the testing phase of checking if your code works as intended, and discovering it does not. Debugging is the process of finding exactly what isn't working and fixing it.
-After spending time creating a brilliant block of code, it is tough realizing it may have errors. These issues generally come in three forms: 1) syntax errors that prevent a program from running, 2) runtime errors when code fails to execute or has unexpected behavior, and 3) semantic (or logical) errors when code doesn't do what it's meant to.
Modern code editors (and experience) can help identify syntax errors. Semantic and runtime errors are harder to find. They may cause your program to crash, make it run forever, or give incorrect output. Think of debugging as trying to understand why your code is behaving the way it is.
Example of a syntax error - often detected by the code editor:
function willNotWork( {
console.log("Yuck");
}
// "function" keyword is misspelled and there's a missing parenthesis
function loopy() {
while(true) {
console.log("Hello, world!");
}
}
// Calling loopy starts an infinite loop, which may crash your browser
function calcAreaOfRect(w, h) {+After spending time creating a brilliant block of code, it is tough realizing it may have errors. These issues generally come in three forms: +1. syntax errors that prevent a program from running +2. runtime errors when code fails to execute or has unexpected behavior +3. semantic (or logical) errors when code doesn't do what it's meant to. + +Modern code editors (and experience) can help identify syntax errors. Semantic and runtime errors are harder to find. They may cause your program to crash, make it run forever, or give incorrect output. Think of debugging as trying to understand why your code is behaving the way it is. +Example of a syntax error - often detected by the code editor: + +```js +funtcion willNotWork( + console.log("Yuck"); +} +// "function" keyword is misspelled and there's a missing parenthesis +``` + +Here's an example of a runtime error - often detected while the program executes: + +```js +function loopy() { + while(true) { + console.log("Hello, world!"); + } +} +// Calling loopy starts an infinite loop, which may crash your browser +``` + +Example of a semantic error - often detected after testing code output: + +```js +function calcAreaOfRect(w, h) { + return w + h; // This should be w * h +} +let myRectArea = calcAreaOfRect(2, 3); +// Correct syntax and the program executes, but this gives the wrong answer +``` + Debugging is frustrating, but it helps to develop (and follow) a step-by-step approach to review your code. This means checking the intermediate values and types of variables to see if they are what they should be. You can start with a simple process of elimination.
return w + h; // This should be w * h
}
let myRectArea = calcAreaOfRect(2, 3);
// Correct syntax and the program executes, but this gives the wrong answer