JavaScript Debugging

Introduction to Debugging

Debugging is the process of identifying and fixing errors in your code.

What is Debugging?

Debugging is the process of identifying and fixing bugs (errors) in your code. JavaScript offers several ways to help debug:

Common Debugging Techniques:

• Using console.log() to output values
• Using browser developer tools
• Setting breakpoints
• Using debugger statements

Using console.log()

Log variable values or messages to understand your code’s flow:

let user = "Shyam";
console.log("User name is:", user);
            

Other console methods:

• console.warn() – Show warnings
• console.error() – Show errors
• console.table() – Display objects in table format

Chrome DevTools

Right-click → Inspect → Console tab to view logs and errors.

• Elements: View/edit HTML/CSS live
• Console: View output & errors
• Sources: Debug JS with breakpoints

Chrome DevTools

Right-click → Inspect → Console tab to view logs and errors.

• Elements: View/edit HTML/CSS live
• Console: View output & errors
• Sources: Debug JS with breakpoints

Tips for Debugging

• Start with console.log() for quick checks
• Use browser DevTools for step-by-step tracking
• Check error messages carefully
• Keep code simple & readable for easier debugging

Practice Task

Find the bug in this code and fix it using DevTools:

function calculateTotal(price, tax) {
  let total = price + tax;
  console.log("Total:", total);
  return tota1; // ← Bug: typo in variable name
}

calculateTotal(100, 20);