Debugging JS

1. Console.log():

   1. Output messages to the console for quick insights into code execution.
   2. Syntax: console.log(message)

2. Debugger:

   1. Halts code execution at a specific point for manual inspection.
   2. Syntax: debugger

3. Breakpoints

   1. Set specific points in code where execution should pause.
   2. Set them in the browser developer tools.

4. Source Maps

   1. Map minified code back to its original source for better debugging.
   2. Enabled in browser developer tools.

Example:

function sum(a, b) {
  return sum + a + b; // Error: sum is not defined
}
console.log(sum(1, 2));

Debugging Steps:

1. Open browser developer tools.
2. Set a breakpoint at the line return sum + a + b;.
3. Run the code.
4. When the breakpoint is hit, use console.log() to inspect variables.
5. Identify the typo (sum is undefined and should be a) and fix it.