How to Debug Javascript from Google Chrome

Windows/Linux: F12 or Ctrl + Shift + I
Mac: Cmd + Option + I
```

### **Method 2: Right-click Menu**
1. Right-click on the page
2. Select **Inspect** or **Inspect Element**

### **Method 3: Menu**
1. Click **⋮** (three dots) top-right
2. Select **More tools → Developer tools**

---

## **2. Console Tab**

The **Console** is where you can run JavaScript code directly and see errors.

### **View Errors**
```
1. Open DevTools → Console tab
2. Any JavaScript errors appear in red
3. Click on the error to see the file and line number

Windows/Linux: F12 or Ctrl + Shift + I
Mac: Cmd + Option + I
```

### **Method 2: Right-click Menu**
1. Right-click on the page
2. Select **Inspect** or **Inspect Element**

### **Method 3: Menu**
1. Click **⋮** (three dots) top-right
2. Select **More tools → Developer tools**

---

## **2. Console Tab**

The **Console** is where you can run JavaScript code directly and see errors.

### **View Errors**
```
1. Open DevTools → Console tab
2. Any JavaScript errors appear in red
3. Click on the error to see the file and line number

// In your code
console.log("Variable value:", myVar);
console.warn("Warning message");
console.error("Error message");
console.table(arrayOfObjects);

// In your code
console.log("Variable value:", myVar);
console.warn("Warning message");
console.error("Error message");
console.table(arrayOfObjects);

 // Type in Console and press Enter 
5 + 5
 // Output: 10 

document.title = "New Title"
 // Changes page title 

fetch('https://api.example.com/data').then(r => r.json())
 // Test API calls 

 // Type in Console and press Enter 
5 + 5
 // Output: 10 

document.title = "New Title"
 // Changes page title 

fetch('https://api.example.com/data').then(r => r.json())
 // Test API calls 

 // Add this to your code 
debugger;   // Execution pauses here when DevTools is open 

 // Add this to your code 
debugger;   // Execution pauses here when DevTools is open 

function calculateTotal(a, b) {
  let sum = a + b;         // Line 1 - Step into here 
  return sum * 2;          // Line 2 - Step over 
}

let result = calculateTotal(5, 3);   // Pause here with breakpoint 

function calculateTotal(a, b) {
  let sum = a + b;         // Line 1 - Step into here 
  return sum * 2;          // Line 2 - Step over 
}

let result = calculateTotal(5, 3);   // Pause here with breakpoint 

let counter = 0;

for (let i = 0; i < 5; i++) {
  counter += i;  // Watch 'counter' value change
  console.log(counter);
}

let counter = 0;

for (let i = 0; i < 5; i++) {
  counter += i;  // Watch 'counter' value change
  console.log(counter);
}

function testScope() {
  let localVar = 10;
  const globalVar = 20;
  var functionVar = 30;
  
  debugger;  // Pause here and check Scope panel
}

testScope();

function testScope() {
  let localVar = 10;
  const globalVar = 20;
  var functionVar = 30;
  
  debugger;  // Pause here and check Scope panel
}

testScope();

function function1() {
  function2();
}

function function2() {
  function3();
}

function function3() {
  debugger;  // Call Stack shows: function3 → function2 → function1
}

function1();

function function1() {
  function2();
}

function function2() {
  function3();
}

function function3() {
  debugger;  // Call Stack shows: function3 → function2 → function1
}

function1();

fetch('https://jsonplaceholder.typicode.com/users/1')<br>  .then(r => r.json())<br>  .then(data => console.log(data));

fetch('https://jsonplaceholder.typicode.com/users/1')<br>  .then(r => r.json())<br>  .then(data => console.log(data));

function myFunc() {
  let x = 5;  // ← Set breakpoint here
  return x * 2;
}

function myFunc() {
  let x = 5;  // ← Set breakpoint here
  return x * 2;
}

for (let i = 0; i < 100; i++) {
  console.log(i);  // Pause only when i === 50
}
// Right-click line → Add conditional breakpoint → i === 50
```

### **DOM Breakpoint** (Pause when element changes)
```
1. Go to Elements tab
2. Right-click element
3. Break on → Subtree modifications / Attribute modifications / Node removal
```

### **Event Listener Breakpoint**
```
1. Go to Sources tab
2. Right panel → Event Listener Breakpoints
3. Check "Click", "Submit", etc.
4. Pauses when event fires

for (let i = 0; i < 100; i++) {
  console.log(i);  // Pause only when i === 50
}
// Right-click line → Add conditional breakpoint → i === 50
```

### **DOM Breakpoint** (Pause when element changes)
```
1. Go to Elements tab
2. Right-click element
3. Break on → Subtree modifications / Attribute modifications / Node removal
```

### **Event Listener Breakpoint**
```
1. Go to Sources tab
2. Right panel → Event Listener Breakpoints
3. Check "Click", "Submit", etc.
4. Pauses when event fires

let user = { name: "Alice", age: 30 };

 // Basic log 
console.log("User:", user);

 // Styled log 
console.log("%cHello", "color: red; font-size: 20px;");

 // Table format 
console.table([
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
]);

 // Count occurrences 
console.count("myLabel");   // myLabel: 1 
console.count("myLabel");   // myLabel: 2 

 // Timer 
console.time("timer");
 // ... do something ... 
console.timeEnd("timer");   // timer: 123.45ms 

 // Group logs 
console.group("Group Name");
console.log("Message 1");
console.log("Message 2");
console.groupEnd();

 // Assert 
console.assert(user.age > 0, "Age must be positive");

let user = { name: "Alice", age: 30 };

 // Basic log 
console.log("User:", user);

 // Styled log 
console.log("%cHello", "color: red; font-size: 20px;");

 // Table format 
console.table([
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
]);

 // Count occurrences 
console.count("myLabel");   // myLabel: 1 
console.count("myLabel");   // myLabel: 2 

 // Timer 
console.time("timer");
 // ... do something ... 
console.timeEnd("timer");   // timer: 123.45ms 

 // Group logs 
console.group("Group Name");
console.log("Message 1");
console.log("Message 2");
console.groupEnd();

 // Assert 
console.assert(user.age > 0, "Age must be positive");

function calculateDiscount(price, discountPercent) {
  debugger;  // Pause here
  
  if (price < 0) {
    console.error("Price cannot be negative");
    return 0;
  }
  
  let discount = (price * discountPercent) / 100;
  let finalPrice = price - discount;
  
  console.log(`Original: $${price}, Discount: $${discount}, Final: $${finalPrice}`);
  
  return finalPrice;
}

calculateDiscount(100, 20);

function calculateDiscount(price, discountPercent) {
  debugger;  // Pause here
  
  if (price < 0) {
    console.error("Price cannot be negative");
    return 0;
  }
  
  let discount = (price * discountPercent) / 100;
  let finalPrice = price - discount;
  
  console.log(`Original: $${price}, Discount: $${discount}, Final: $${finalPrice}`);
  
  return finalPrice;
}

calculateDiscount(100, 20);

 // This causes an error 
let obj = { name: "John" };
console.log(obj.age.toUpperCase());   // Error: Cannot read property 'toUpperCase' of undefined 

 // This causes an error 
let obj = { name: "John" };
console.log(obj.age.toUpperCase());   // Error: Cannot read property 'toUpperCase' of undefined 

let obj = { name: "John" };
if (obj.age) {
  console.log(obj.age.toUpperCase());
} else {
  console.log("Age is not defined");
}
```

---

## **13. Local Storage & Session Storage Debugging**
```
1. Open DevTools
2. Go to Application tab
3. Click Local Storage or Session Storage
4. See all stored data
5. Right-click to edit/delete

let obj = { name: "John" };
if (obj.age) {
  console.log(obj.age.toUpperCase());
} else {
  console.log("Age is not defined");
}
```

---

## **13. Local Storage & Session Storage Debugging**
```
1. Open DevTools
2. Go to Application tab
3. Click Local Storage or Session Storage
4. See all stored data
5. Right-click to edit/delete

// View all local storage
console.table(localStorage); // Set value
localStorage.setItem("user", "Alice"); // Get value
console.log(localStorage.getItem("user"));// Remove value 
localStorage.removeItem("user"); // Clear all
localStorage.clear();

// View all local storage
console.table(localStorage); // Set value
localStorage.setItem("user", "Alice"); // Get value
console.log(localStorage.getItem("user"));// Remove value 
localStorage.removeItem("user"); // Clear all
localStorage.clear();

console.time("myTimer");

 // Your code here 
for (let i = 0; i < 1000000; i++) {
  Math.sqrt(i);
}

console.timeEnd("myTimer");
 // Output: myTimer: 23.45ms 

console.time("myTimer");

 // Your code here 
for (let i = 0; i < 1000000; i++) {
  Math.sqrt(i);
}

console.timeEnd("myTimer");
 // Output: myTimer: 23.45ms 

const start = performance.now();

// Code to measure
const result = expensiveCalculation();

const end = performance.now();
console.log(`Execution time: ${end - start}ms`);
```

---

## **15. Quick Tips & Tricks**

### **Pause on Exception**
```
Sources tab → Click pause icon with exclamation mark
Automatically pauses when error is thrown
```

### **Modify Variables During Debug**
```
1. Pause at breakpoint
2. In Console, type: myVar = 100
3. Press Enter
4. Continue execution with new value
```

### **Pretty Print Minified Code**
```
1. Go to Sources tab
2. Open minified file
3. Click {} (Pretty print) button at bottom
4. Code becomes readable
```

### **Filter Console Messages**
```
Console tab → Levels dropdown
Choose: All, Errors, Warnings, Info, Verbose

const start = performance.now();

// Code to measure
const result = expensiveCalculation();

const end = performance.now();
console.log(`Execution time: ${end - start}ms`);
```

---

## **15. Quick Tips & Tricks**

### **Pause on Exception**
```
Sources tab → Click pause icon with exclamation mark
Automatically pauses when error is thrown
```

### **Modify Variables During Debug**
```
1. Pause at breakpoint
2. In Console, type: myVar = 100
3. Press Enter
4. Continue execution with new value
```

### **Pretty Print Minified Code**
```
1. Go to Sources tab
2. Open minified file
3. Click {} (Pretty print) button at bottom
4. Code becomes readable
```

### **Filter Console Messages**
```
Console tab → Levels dropdown
Choose: All, Errors, Warnings, Info, Verbose

let obj = { id: 1, name: "Alice" };
copy(obj);  // Copies to clipboard

let obj = { id: 1, name: "Alice" };
copy(obj);  // Copies to clipboard

 // Problem: function not called 
function myFunc() {
  console.log("Function called");
}

 // Solution: Add debugger or console.log 
debugger;   // Add breakpoint here 
myFunc();

 // Problem: function not called 
function myFunc() {
  console.log("Function called");
}

 // Solution: Add debugger or console.log 
debugger;   // Add breakpoint here 
myFunc();

 // Problem: Variable has unexpected value 
let sum = 0;
for (let i = 0; i < 5; i++) {
  sum += i;
}
console.log(sum);   // Check if correct 

 // Debug: Add Watch expression for 'sum' 

 // Problem: Variable has unexpected value 
let sum = 0;
for (let i = 0; i < 5; i++) {
  sum += i;
}
console.log(sum);   // Check if correct 

 // Debug: Add Watch expression for 'sum' 

async function fetchData() {
  try {
    debugger;   // Pause before fetch 
    const response = await fetch('/api/data');
    const data = await response.json();
    debugger;   // Pause after fetch 
    return data;
  } catch (error) {
    console.error("Error:", error);
  }
}

fetchData();

async function fetchData() {
  try {
    debugger;   // Pause before fetch 
    const response = await fetch('/api/data');
    const data = await response.json();
    debugger;   // Pause after fetch 
    return data;
  } catch (error) {
    console.error("Error:", error);
  }
}

fetchData();

<!DOCTYPE html><br>
<html>
   <br>
   <head>
      <br>  
      <title>Debug Exercise</title>
      <br>
   </head>
   <br>
   <body>
      <br>  <button id="btn">Calculate</button><br>  
      <p id="result"></p>
      <br><br>  <script><br>    function calculate() {<br>      debugger;   // Set breakpoint here <br>      <br>      let num1 = 10;<br>      let num2 = 5;<br>      let result = num1 / num2;  //  Wrong: should be addition <br>      <br>      document.getElementById('result').textContent = result;<br>      console.log("Result:", result);<br>    }<br><br>    document.getElementById('btn').addEventListener('click', calculate);<br>  </script><br>
   </body>
   <br>
</html>

<!DOCTYPE html><br>
<html>
   <br>
   <head>
      <br>  
      <title>Debug Exercise</title>
      <br>
   </head>
   <br>
   <body>
      <br>  <button id="btn">Calculate</button><br>  
      <p id="result"></p>
      <br><br>  <script><br>    function calculate() {<br>      debugger;   // Set breakpoint here <br>      <br>      let num1 = 10;<br>      let num2 = 5;<br>      let result = num1 / num2;  //  Wrong: should be addition <br>      <br>      document.getElementById('result').textContent = result;<br>      console.log("Result:", result);<br>    }<br><br>    document.getElementById('btn').addEventListener('click', calculate);<br>  </script><br>
   </body>
   <br>
</html>