Debugging JavaScript

Effective debugging is essential for every developer. Learn techniques, tools, and best practices to efficiently find and fix bugs in your JavaScript code.

🤔 Why Debugging Matters

Debugging is the process of finding and resolving defects or problems in computer programs. It's a critical skill that separates junior from senior developers.

Saves Time - Faster than trial and error
Improves Code Quality - Find issues before users do
Enhances Understanding - Learn how code actually works
Builds Confidence - Know you can solve any problem

💡 Debugging Mindset

Assume bugs are in your code, not the environment
Reproduce the issue consistently
Isolate the problem area
Use systematic elimination
Document your findings

The Debugging Process

Reproduce the bug
Locate the source
Analyze the cause
Fix the issue
Test the fix
Prevent regression

📝 Console Debugging Methods

Master the console API for effective logging and debugging.

JavaScript Editor

// Console Debugging Methods
console.log('=== Console Debugging ===');

// Basic logging
console.log('Basic log message');
console.info('Informational message');
console.warn('Warning message');
console.error('Error message');

// String substitution
const name = 'John';
const age = 30;
console.log('Name: %s, Age: %d', name, age);
console.log(`Name: ${name}, Age: ${age}`); // Template literals

// Object inspection
const user = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com',
  address: {
    street: '123 Main St',
    city: 'New York'
  },
  hobbies: ['coding', 'reading', 'gaming']
};

console.log('User object:', user);
console.table(user); // Tabular view

// Table for arrays
const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
];

console.table(users);

// Grouping messages
console.group('User Details');
console.log('Name: Alice');
console.log('Age: 25');
console.log('Email: alice@example.com');
console.groupEnd();

console.groupCollapsed('Collapsed Group');
console.log('This group is collapsed by default');
console.groupEnd();

// Counting
console.count('Button click');
console.count('Button click');
console.count('Button click');
console.countReset('Button click');
console.count('Button click');

// Timing
console.time('Array initialization');
const largeArray = new Array(1000000).fill().map(() => Math.random());
console.timeEnd('Array initialization');

// Tracing
function outerFunction() {
  middleFunction();
}

function middleFunction() {
  innerFunction();
}

function innerFunction() {
  console.trace('Trace from inner function');
}

outerFunction();

// Assertions
const value = 42;
console.assert(value === 42, 'Value should be 42');
console.assert(value === 43, 'Value should be 43'); // This will log error

// Styling console output
console.log('%c Styled Message!', 
  'color: white; background: linear-gradient(90deg, #ff6b6b, #4ecdc4); ' +
  'padding: 10px; border-radius: 5px; font-size: 16px; font-weight: bold;'
);

console.log('%c Important! %c Note',
  'color: red; font-weight: bold; font-size: 14px;',
  'color: blue; font-style: italic;'
);

// Clear console
// console.clear();

// Memory usage
console.log('Memory:', performance.memory); // Chrome only

// Debugging with console.dir
const element = document.createElement('div');
element.id = 'test-element';
element.className = 'container';
element.innerHTML = '<span>Test</span>';

console.dir(element); // DOM element properties
console.dirxml(element); // DOM tree

// Profiling
console.profile('My Profile');
// Code to profile here
console.profileEnd('My Profile');

// Console utilities in modern browsers
console.log('\n=== Modern Console Features ===');

// console.debug() - Only visible when "Verbose" filter is on
console.debug('Debug message (verbose)');

// console.timeLog() - Log time without ending timer
console.time('Process Timer');
setTimeout(() => {
  console.timeLog('Process Timer', 'First step done');
  
  setTimeout(() => {
    console.timeEnd('Process Timer');
  }, 500);
}, 500);

// Conditional logging
const DEBUG = true;
DEBUG && console.log('Debug mode enabled');

// Creating custom console methods
const myConsole = {
  log: (...args) => {
    const timestamp = new Date().toISOString();
    console.log(`[${timestamp}]`, ...args);
  },
  
  error: (...args) => {
    const timestamp = new Date().toISOString();
    console.error(`[${timestamp}] ERROR:`, ...args);
  }
};

myConsole.log('Custom timestamped log');
myConsole.error('Something went wrong');

Essential Console Methods:

console.log() - Basic logging
console.error() - Error logging
console.table() - Tabular data display
console.group() - Group related logs
console.trace() - Stack trace
console.time() - Performance timing
console.assert() - Conditional logging
console.dir() - Object inspection

🔧 Debugger & DevTools

Using debugger statements and browser DevTools for interactive debugging.

JavaScript Editor

// Using Debugger and Browser DevTools
console.log('=== Debugger Statement ===');

function calculateTotal(price, quantity, taxRate = 0.1) {
  // Debugger statement pauses execution
  debugger;
  
  const subtotal = price * quantity;
  const tax = subtotal * taxRate;
  const total = subtotal + tax;
  
  return {
    subtotal,
    tax,
    total
  };
}

// Call the function to trigger debugger
const result = calculateTotal(25, 3, 0.08);
console.log('Result:', result);

console.log('\n=== Conditional Debugging ===');

function processOrder(order) {
  // Only debug if order amount is suspicious
  if (order.amount > 10000) {
    debugger;
  }
  
  // Process order...
  return `Order ${order.id} processed`;
}

const orders = [
  { id: 1, amount: 500 },
  { id: 2, amount: 15000 }, // This will trigger debugger
  { id: 3, amount: 2000 }
];

orders.forEach(order => {
  console.log(processOrder(order));
});

console.log('\n=== Breakpoint Techniques ===');

// Programmatic breakpoints
function complexCalculation(data) {
  // Set breakpoint on condition
  if (data.value > 100) {
    // This creates a breakpoint in debugger
    console.debug('Breakpoint reached:', data);
    // In DevTools, you would set actual breakpoint here
  }
  
  let result = 0;
  for (let i = 0; i < data.iterations; i++) {
    result += Math.sqrt(i) * data.multiplier;
    
    // Break on specific iteration
    if (i === 42) {
      console.debug('Reached iteration 42');
      // Set breakpoint manually in DevTools
    }
  }
  
  return result;
}

complexCalculation({ value: 150, iterations: 100, multiplier: 2.5 });

console.log('\n=== Chrome DevTools Features ===');

// Demonstrate features available in DevTools

// 1. Watch expressions
let counter = 0;
setInterval(() => {
  counter++;
  // In DevTools, add 'counter' to Watch expressions
}, 1000);

// 2. Call stack navigation
function functionA() {
  functionB();
}

function functionB() {
  functionC();
}

function functionC() {
  // Pause here to explore call stack
  console.log('In functionC - check call stack in DevTools');
}

functionA();

// 3. Scope inspection
function scopeExample() {
  const localVar = 'I am local';
  let mutableVar = 'I can change';
  var oldStyleVar = 'I am function scoped';
  
  // Pause here to inspect scope
  debugger;
  
  mutableVar = 'Changed value';
  
  function nested() {
    const nestedVar = 'I am nested';
    // Pause here to see closure scope
    debugger;
    return localVar + nestedVar;
  }
  
  return nested();
}

scopeExample();

// 4. DOM breakpoints
function setupDOMBreakpoints() {
  const button = document.createElement('button');
  button.textContent = 'Click me';
  button.id = 'debug-button';
  document.body.appendChild(button);
  
  // In DevTools, you can set breakpoints on:
  // - Subtree modifications
  // - Attribute modifications
  // - Node removal
  
  button.addEventListener('click', () => {
    // This would trigger event listener breakpoint
    console.log('Button clicked');
    button.setAttribute('data-clicked', 'true');
  });
  
  // Modify after 2 seconds
  setTimeout(() => {
    button.textContent = 'Clicked!';
    button.style.backgroundColor = 'green';
  }, 2000);
}

setupDOMBreakpoints();

// 5. XHR/Fetch breakpoints
async function fetchData() {
  try {
    // In DevTools, set breakpoint on XHR with URL containing 'jsonplaceholder'
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await response.json();
    
    console.log('Fetched data:', data);
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

fetchData();

// 6. Event listener breakpoints
document.addEventListener('keydown', (event) => {
  // In DevTools, enable keyboard event breakpoints
  console.log('Key pressed:', event.key);
});

// 7. Blackboxing scripts
// In DevTools, right-click on library files (like jQuery, React)
// and select "Blackbox script" to skip debugging library code

console.log('\n=== Node.js Debugging ===');

// For Node.js debugging, use:
// 1. node --inspect script.js
// 2. Chrome DevTools -> Node.js icon
// 3. Or VS Code debugger

function nodeDebugExample() {
  const fs = require('fs'); // Would need Node.js environment
  
  // Use debugger statement
  debugger;
  
  // Or use --inspect-brk flag
  console.log('Node.js debugging available');
}

// Note: This won't run in browser, but shows the pattern

Debugger Features:

debugger statement
Breakpoints (line, conditional)
Step (over, into, out)
Watch expressions
Call stack inspection
Scope inspection

DevTools Tips:

DOM breakpoints
XHR/Fetch breakpoints
Event listener breakpoints
Blackboxing scripts
Source map debugging
Performance profiling

🚨 Error Handling & Stack Traces

Proper error handling and understanding stack traces.

JavaScript Editor

// Error Handling and Stack Traces
console.log('=== Error Handling ===');

// 1. Basic error handling
try {
  throw new Error('Something went wrong!');
} catch (error) {
  console.error('Caught error:', error.message);
  console.error('Stack trace:', error.stack);
}

// 2. Custom error types
class ValidationError extends Error {
  constructor(message, field) {
    super(message);
    this.name = 'ValidationError';
    this.field = field;
    this.timestamp = new Date().toISOString();
  }
}

class DatabaseError extends Error {
  constructor(message, query) {
    super(message);
    this.name = 'DatabaseError';
    this.query = query;
  }
}

// 3. Using custom errors
function validateUser(user) {
  if (!user.name) {
    throw new ValidationError('Name is required', 'name');
  }
  
  if (user.age < 0) {
    throw new ValidationError('Age cannot be negative', 'age');
  }
  
  return true;
}

try {
  validateUser({ age: -5 });
} catch (error) {
  if (error instanceof ValidationError) {
    console.error(`Validation failed for ${error.field}: ${error.message}`);
  } else {
    console.error('Unknown error:', error);
  }
}

// 4. Async error handling
async function fetchWithRetry(url, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      console.log(`Attempt ${i + 1} to fetch ${url}`);
      const response = await fetch(url);
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
      
      return await response.json();
    } catch (error) {
      console.error(`Attempt ${i + 1} failed: ${error.message}`);
      
      if (i === retries - 1) {
        throw new Error(`Failed after ${retries} attempts: ${error.message}`);
      }
      
      // Wait before retry
      await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
    }
  }
}

// 5. Global error handlers
// Window error handler
window.onerror = function(message, source, lineno, colno, error) {
  console.error('Global error caught:');
  console.error('Message:', message);
  console.error('Source:', source);
  console.error('Line:', lineno);
  console.error('Column:', colno);
  console.error('Error object:', error);
  
  // Send to error tracking service
  // sendToErrorTrackingService({ message, source, lineno, colno, error });
  
  // Return true to prevent default browser error handling
  return true;
};

// Unhandled promise rejection handler
window.onunhandledrejection = function(event) {
  console.error('Unhandled promise rejection:', event.reason);
  event.preventDefault(); // Prevent browser error logging
};

// 6. Error boundary pattern (React-inspired)
class ErrorBoundary {
  constructor(component) {
    this.component = component;
    this.hasError = false;
    this.error = null;
  }
  
  execute() {
    try {
      return this.component();
    } catch (error) {
      this.hasError = true;
      this.error = error;
      
      // Fallback UI
      console.error('Component failed, showing fallback:', error.message);
      return this.fallback();
    }
  }
  
  fallback() {
    return {
      render: () => '<div class="error">Something went wrong</div>',
      error: this.error
    };
  }
  
  getErrorInfo() {
    return this.hasError ? {
      message: this.error.message,
      stack: this.error.stack,
      component: this.component.name || 'Anonymous'
    } : null;
  }
}

// Usage
const riskyComponent = () => {
  if (Math.random() > 0.5) {
    throw new Error('Random component failure');
  }
  return { render: () => '<div>Success!</div>' };
};

const boundary = new ErrorBoundary(riskyComponent);
const result = boundary.execute();
console.log('Error boundary result:', result);

// 7. Stack trace manipulation
function getCleanStackTrace() {
  const error = new Error();
  const stack = error.stack;
  
  // Filter out internal frames
  const lines = stack.split('\n').filter(line => {
    return !line.includes('node_modules') && 
           !line.includes('internal/') &&
           !line.includes('(native)');
  });
  
  return lines.join('\n');
}

console.log('Clean stack trace:');
console.log(getCleanStackTrace());

// 8. Error logging service
class ErrorLogger {
  constructor() {
    this.errors = [];
    this.maxErrors = 100;
  }
  
  log(error, context = {}) {
    const errorEntry = {
      id: Date.now() + Math.random(),
      message: error.message,
      stack: error.stack,
      type: error.name,
      timestamp: new Date().toISOString(),
      url: window.location.href,
      userAgent: navigator.userAgent,
      context
    };
    
    this.errors.push(errorEntry);
    
    // Keep only recent errors
    if (this.errors.length > this.maxErrors) {
      this.errors.shift();
    }
    
    // Send to server (in real app)
    this.sendToServer(errorEntry);
    
    console.error('Logged error:', errorEntry);
    
    return errorEntry;
  }
  
  sendToServer(errorEntry) {
    // Simulate sending to error tracking service
    console.log('Sending to error tracking service:', errorEntry.id);
    
    // In real app: fetch('/api/errors', { method: 'POST', body: JSON.stringify(errorEntry) })
  }
  
  getErrors() {
    return [...this.errors];
  }
  
  clear() {
    this.errors = [];
  }
}

const logger = new ErrorLogger();

// Example usage
try {
  JSON.parse('invalid json');
} catch (error) {
  logger.log(error, { action: 'parseJSON', data: 'invalid json' });
}

// 9. Performance monitoring with errors
function monitorPerformance(fn, name) {
  return function(...args) {
    const start = performance.now();
    
    try {
      const result = fn.apply(this, args);
      const duration = performance.now() - start;
      
      if (duration > 100) { // 100ms threshold
        console.warn(`${name} took ${duration.toFixed(2)}ms`);
        
        // Log as performance error
        logger.log(new Error(`Slow performance: ${name}`), {
          duration,
          args: args.length,
          name
        });
      }
      
      return result;
    } catch (error) {
      const duration = performance.now() - start;
      console.error(`${name} failed after ${duration.toFixed(2)}ms:`, error);
      
      logger.log(error, {
        duration,
        args: args.length,
        name,
        stage: 'execution'
      });
      
      throw error;
    }
  };
}

const monitoredFunction = monitorPerformance(
  (n) => {
    let sum = 0;
    for (let i = 0; i < n; i++) sum += i;
    return sum;
  },
  'calculateSum'
);

console.log('Result:', monitoredFunction(1000000));

Error Handling Strategies:

Try/Catch - Handle synchronous errors
Custom Errors - Create specific error types
Global Handlers - Catch unhandled errors
Error Boundaries - Isolate component failures
Error Logging - Track errors systematically
Stack Trace Analysis - Understand error origins

⚡ Advanced Debugging Tools

Advanced tools and techniques for complex debugging scenarios.

JavaScript Editor

// Advanced Debugging Tools and Techniques
console.log('=== Advanced Debugging ===');

// 1. Performance Profiling
console.log('\n=== 1. Performance Profiling ===');

// Example function to profile
function expensiveOperation() {
  let result = 0;
  for (let i = 0; i < 10000; i++) {
    result += Math.sqrt(i) * Math.sin(i);
  }
  return result;
}

const profile = profileFunction(expensiveOperation, 100);

// 2. Memory Leak Detection
console.log('\n=== 2. Memory Leak Detection ===');

class MemoryLeakDetector {
  constructor() {
    this.snapshots = [];
    this.interval = null;
  }
  
  startMonitoring(intervalMs = 5000) {
    console.log('Starting memory monitoring...');
    
    this.interval = setInterval(() => {
      this.takeSnapshot();
    }, intervalMs);
  }
  
  stopMonitoring() {
    if (this.interval) {
      clearInterval(this.interval);
      console.log('Memory monitoring stopped');
    }
  }
  
  takeSnapshot() {
    if (window.performance && performance.memory) {
      const memory = performance.memory;
      const snapshot = {
        timestamp: new Date().toISOString(),
        usedJSHeapSize: memory.usedJSHeapSize,
        totalJSHeapSize: memory.totalJSHeapSize,
        jsHeapSizeLimit: memory.jsHeapSizeLimit
      };
      
      this.snapshots.push(snapshot);
      console.log('Memory snapshot:', snapshot);
      
      // Check for leaks (simplified)
      if (this.snapshots.length > 1) {
        const prev = this.snapshots[this.snapshots.length - 2];
        const growth = snapshot.usedJSHeapSize - prev.usedJSHeapSize;
        
        if (growth > 1024 * 1024) { // 1MB growth
          console.warn(`Possible memory leak: ${(growth / 1024 / 1024).toFixed(2)}MB growth`);
        }
      }
    }
  }
  
  getReport() {
    if (this.snapshots.length < 2) return null;
    
    const first = this.snapshots[0];
    const last = this.snapshots[this.snapshots.length - 1];
    const growth = last.usedJSHeapSize - first.usedJSHeapSize;
    
    return {
      startTime: first.timestamp,
      endTime: last.timestamp,
      initialMemory: (first.usedJSHeapSize / 1024 / 1024).toFixed(2) + 'MB',
      finalMemory: (last.usedJSHeapSize / 1024 / 1024).toFixed(2) + 'MB',
      growth: (growth / 1024 / 1024).toFixed(2) + 'MB',
      growthPercentage: ((growth / first.usedJSHeapSize) * 100).toFixed(2) + '%'
    };
  }
}

const memoryMonitor = new MemoryLeakDetector();
// memoryMonitor.startMonitoring();

// 3. Network Request Debugging
console.log('\n=== 3. Network Request Debugging ===');

class NetworkMonitor {
  constructor() {
    this.requests = [];
    this.originalFetch = window.fetch;
    
    this.interceptFetch();
    this.interceptXHR();
  }
  
  interceptFetch() {
    window.fetch = async (...args) => {
      const startTime = performance.now();
      const requestId = Date.now();
      
      const requestInfo = {
        id: requestId,
        method: 'GET', // Default, parse from args
        url: typeof args[0] === 'string' ? args[0] : args[0].url,
        timestamp: new Date().toISOString(),
        startTime,
        status: 'pending'
      };
      
      this.requests.push(requestInfo);
      console.log('Fetch request started:', requestInfo);
      
      try {
        const response = await this.originalFetch.apply(window, args);
        const endTime = performance.now();
        
        requestInfo.status = 'completed';
        requestInfo.duration = endTime - startTime;
        requestInfo.statusCode = response.status;
        requestInfo.ok = response.ok;
        
        console.log('Fetch completed:', requestInfo);
        return response;
      } catch (error) {
        const endTime = performance.now();
        
        requestInfo.status = 'failed';
        requestInfo.duration = endTime - startTime;
        requestInfo.error = error.message;
        
        console.error('Fetch failed:', requestInfo);
        throw error;
      }
    };
  }
  
  interceptXHR() {
    const originalOpen = XMLHttpRequest.prototype.open;
    const originalSend = XMLHttpRequest.prototype.send;
    
    XMLHttpRequest.prototype.open = function(method, url) {
      this._requestInfo = {
        method,
        url,
        timestamp: new Date().toISOString(),
        startTime: performance.now()
      };
      
      console.log('XHR opened:', this._requestInfo);
      return originalOpen.apply(this, arguments);
    };
    
    XMLHttpRequest.prototype.send = function(body) {
      this._requestInfo.body = body;
      
      this.addEventListener('load', () => {
        const endTime = performance.now();
        this._requestInfo.duration = endTime - this._requestInfo.startTime;
        this._requestInfo.status = this.status;
        this._requestInfo.ok = this.status >= 200 && this.status < 300;
        
        console.log('XHR completed:', this._requestInfo);
      });
      
      this.addEventListener('error', () => {
        const endTime = performance.now();
        this._requestInfo.duration = endTime - this._requestInfo.startTime;
        this._requestInfo.status = 'error';
        
        console.error('XHR failed:', this._requestInfo);
      });
      
      return originalSend.apply(this, arguments);
    };
  }
  
  getRequests() {
    return this.requests;
  }
  
  clear() {
    this.requests = [];
  }
}

const networkMonitor = new NetworkMonitor();

// Test network monitoring
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log('Fetched data:', data.title));

// 4. State Debugging for Complex Applications
console.log('\n=== 4. State Debugging ===');

class StateDebugger {
  constructor(initialState = {}) {
    this.state = initialState;
    this.history = [];
    this.subscribers = new Set();
    this.isRecording = false;
    
    this.proxyState();
  }
  
  proxyState() {
    const handler = {
      set: (target, property, value) => {
        const oldValue = target[property];
        target[property] = value;
        
        if (this.isRecording) {
          this.history.push({
            timestamp: new Date().toISOString(),
            property,
            oldValue,
            newValue: value,
            stack: new Error().stack
          });
        }
        
        this.notifySubscribers(property, value, oldValue);
        return true;
      }
    };
    
    this.state = new Proxy(this.state, handler);
  }
  
  startRecording() {
    this.isRecording = true;
    console.log('State recording started');
  }
  
  stopRecording() {
    this.isRecording = false;
    console.log('State recording stopped');
  }
  
  subscribe(callback) {
    this.subscribers.add(callback);
    return () => this.subscribers.delete(callback);
  }
  
  notifySubscribers(property, newValue, oldValue) {
    this.subscribers.forEach(callback => {
      callback({ property, newValue, oldValue, state: this.state });
    });
  }
  
  getHistory() {
    return [...this.history];
  }
  
  timeTravel(step) {
    if (step < 0 || step >= this.history.length) return;
    
    const snapshot = this.history[step];
    console.log('Time traveling to step', step, ':', snapshot);
    
    // In real implementation, you would restore state
    return snapshot;
  }
  
  // Redux DevTools-like API
  dispatch(action) {
    console.log('Dispatching action:', action);
    
    const prevState = JSON.stringify(this.state);
    
    // Apply action (simplified)
    if (action.type === 'INCREMENT') {
      this.state.counter = (this.state.counter || 0) + 1;
    } else if (action.type === 'SET_VALUE') {
      this.state[action.key] = action.value;
    }
    
    console.log('State changed:', {
      action,
      prevState: JSON.parse(prevState),
      nextState: this.state
    });
  }
}

const stateDebugger = new StateDebugger({ counter: 0 });
stateDebugger.startRecording();

// Subscribe to state changes
const unsubscribe = stateDebugger.subscribe((change) => {
  console.log('State changed:', change);
});

// Make some state changes
stateDebugger.state.counter = 1;
stateDebugger.state.name = 'Test';
stateDebugger.state.counter = 2;

// Dispatch actions
stateDebugger.dispatch({ type: 'INCREMENT' });
stateDebugger.dispatch({ type: 'SET_VALUE', key: 'message', value: 'Hello' });

console.log('State history:', stateDebugger.getHistory());
console.log('Current state:', stateDebugger.state);

unsubscribe();
stateDebugger.stopRecording();

// 5. Visual Debugging Tools
console.log('\n=== 5. Visual Debugging ===');

const debugOverlay = createDebugOverlay();
debugOverlay.log('Debug overlay initialized');
debugOverlay.log('Monitoring application...');

// Log mouse position for debugging
document.addEventListener('mousemove', (event) => {
  debugOverlay.log(`Mouse: ${event.clientX},${event.clientY}`);
});

// Clean up after 10 seconds
setTimeout(() => {
  debugOverlay.remove();
  console.log('Debug overlay removed');
}, 10000);

Advanced Techniques:

Performance Profiling - Identify bottlenecks
Memory Leak Detection - Find memory issues
Network Monitoring - Debug API calls
State Debugging - Track application state
Visual Debugging - Create debug overlays
Automated Testing - Prevent regression

🎯 Practical Debugging Workflow

Step-by-step debugging of a complex data processing bug.

JavaScript Editor

// Practical Debugging Workflow
console.log('=== Practical Debugging Workflow ===');

// Scenario: Debugging a complex data processing bug
class DataProcessor {
  constructor() {
    this.data = [];
    this.errors = [];
    this.stats = {
      processed: 0,
      failed: 0,
      skipped: 0
    };
  }
  
  // Buggy method - has multiple issues
  processRecords(records) {
    console.group('Processing records');
    
    for (let i = 0; i <= records.length; i++) { // Bug 1: Off-by-one error
      const record = records[i];
      
      // Bug 2: Doesn't handle undefined record
      if (record.status === 'active') {
        try {
          this.transformRecord(record);
          this.data.push(record);
          this.stats.processed++;
        } catch (error) {
          console.error('Transform failed:', error.message, 'Record:', record);
          this.errors.push({ record, error: error.message });
          this.stats.failed++;
        }
      } else {
        console.warn('Skipping inactive record:', record);
        this.stats.skipped++;
      }
    }
    
    console.groupEnd();
    return this.data;
  }
  
  transformRecord(record) {
    // Bug 3: Missing validation
    record.processedAt = new Date();
    
    // Bug 4: Incorrect calculation
    record.score = record.value * 2; // Should be * 1.5
    
    // Bug 5: Modifying original object incorrectly
    delete record.temp;
    
    return record;
  }
  
  // Let's debug this step by step
  debugProcess(records) {
    console.log('=== DEBUGGING SESSION ===');
    console.log('Initial records:', records);
    
    // Step 1: Set breakpoint at start
    debugger;
    
    // Step 2: Use console.table for better visualization
    console.table(records);
    
    // Step 3: Add conditional breakpoints
    for (let i = 0; i < records.length; i++) {
      const record = records[i];
      
      // Conditional breakpoint: Only break on specific ID
      if (record.id === 3) {
        debugger;
      }
      
      // Log each iteration
      console.log(`Processing record ${i}:`, record);
      
      // Step 4: Validate data before processing
      if (!this.validateRecord(record)) {
        console.error('Invalid record at index', i, ':', record);
        continue;
      }
      
      // Step 5: Step through transformation
      const transformed = this.debugTransform(record);
      
      // Step 6: Validate after transformation
      if (this.validateTransformed(transformed)) {
        this.data.push(transformed);
        this.stats.processed++;
      } else {
        console.error('Transformation failed for:', record);
        this.errors.push({ record, error: 'Validation failed' });
        this.stats.failed++;
      }
    }
    
    // Step 7: Final validation
    this.validateResults();
    
    return this.data;
  }
  
  validateRecord(record) {
    const errors = [];
    
    if (!record || typeof record !== 'object') {
      errors.push('Record is not an object');
    }
    
    if (!record.id || typeof record.id !== 'number') {
      errors.push('Invalid or missing id');
    }
    
    if (!record.value || typeof record.value !== 'number') {
      errors.push('Invalid or missing value');
    }
    
    if (errors.length > 0) {
      console.warn('Record validation errors:', errors);
      return false;
    }
    
    return true;
  }
  
  debugTransform(record) {
    console.group(`Transforming record ${record.id}`);
    
    // Clone to avoid modifying original
    const transformed = { ...record };
    
    console.log('Original:', record);
    console.log('Cloned:', transformed);
    
    // Step through each transformation
    transformed.processedAt = new Date();
    console.log('Added processedAt:', transformed.processedAt);
    
    // Fixed calculation
    transformed.score = transformed.value * 1.5;
    console.log(`Calculated score: ${transformed.value} * 1.5 = ${transformed.score}`);
    
    // Only delete if exists
    if ('temp' in transformed) {
      delete transformed.temp;
      console.log('Removed temp field');
    }
    
    console.log('Final transformed:', transformed);
    console.groupEnd();
    
    return transformed;
  }
  
  validateTransformed(record) {
    // Check required fields after transformation
    const required = ['id', 'value', 'score', 'processedAt'];
    const missing = required.filter(field => !(field in record));
    
    if (missing.length > 0) {
      console.error('Missing fields after transformation:', missing);
      return false;
    }
    
    // Validate score calculation
    const expectedScore = record.value * 1.5;
    if (Math.abs(record.score - expectedScore) > 0.001) {
      console.error(`Score calculation error: expected ${expectedScore}, got ${record.score}`);
      return false;
    }
    
    return true;
  }
  
  validateResults() {
    console.group('Final Validation');
    
    console.log('Total processed:', this.stats.processed);
    console.log('Total failed:', this.stats.failed);
    console.log('Total skipped:', this.stats.skipped);
    
    // Check for duplicates
    const ids = this.data.map(r => r.id);
    const duplicates = ids.filter((id, index) => ids.indexOf(id) !== index);
    
    if (duplicates.length > 0) {
      console.error('Duplicate IDs found:', duplicates);
    }
    
    // Check data integrity
    const invalid = this.data.filter(record => !this.validateTransformed(record));
    
    if (invalid.length > 0) {
      console.error('Invalid records in final data:', invalid.length);
    }
    
    console.log('Errors:', this.errors);
    console.groupEnd();
  }
  
  // Generate test data with some problematic records
  static generateTestData() {
    return [
      { id: 1, value: 100, status: 'active' },
      { id: 2, value: 200, status: 'inactive' },
      { id: 3, value: 300, status: 'active', temp: true },
      { id: 4, value: 'invalid', status: 'active' }, // Bug: string value
      { id: 5, status: 'active' }, // Bug: missing value
      { id: 1, value: 150, status: 'active' }, // Bug: duplicate ID
      // Last record is intentionally missing to test loop bounds
    ];
  }
}

// Run the debugging session
console.log('\n=== Running Debug Session ===');

const processor = new DataProcessor();
const testData = DataProcessor.generateTestData();

// First, run the buggy version
console.log('\n--- Buggy Version ---');
try {
  const buggyResult = processor.processRecords(testData);
  console.log('Buggy result (first 3):', buggyResult.slice(0, 3));
} catch (error) {
  console.error('Buggy version crashed:', error);
  console.error('Stack trace:', error.stack);
}

// Reset processor
processor.data = [];
processor.errors = [];
processor.stats = { processed: 0, failed: 0, skipped: 0 };

// Now run debug version
console.log('\n--- Debug Version ---');
const debugResult = processor.debugProcess(testData);

console.log('\n=== Debugging Summary ===');
console.log('Final stats:', processor.stats);
console.log('Errors found:', processor.errors.length);
console.log('Successful records:', processor.data.length);

// Compare with expected results
console.log('\n=== Expected vs Actual ===');

// What we expect after fixing bugs:
// - Record 1: Processed, score = 150
// - Record 2: Skipped (inactive)
// - Record 3: Processed, score = 450
// - Record 4: Failed (invalid value)
// - Record 5: Failed (missing value)
// - Record 6: Processed, but duplicate ID (should be handled)

const expected = [
  { id: 1, value: 100, score: 150 },
  { id: 3, value: 300, score: 450 },
  { id: 6, value: 150, score: 225 }
];

console.log('Expected:', expected);
console.log('Actual (first 3):', debugResult.slice(0, 3));

// Automated testing helper
function runTests() {
  console.group('Automated Tests');
  
  const tests = [
    {
      name: 'Valid record transformation',
      input: { id: 1, value: 100, status: 'active' },
      expected: { id: 1, value: 100, score: 150 }
    },
    {
      name: 'Inactive record skipping',
      input: { id: 2, value: 200, status: 'inactive' },
      shouldSkip: true
    },
    {
      name: 'Record with temp field',
      input: { id: 3, value: 300, status: 'active', temp: true },
      expected: { id: 3, value: 300, score: 450 }
    }
  ];
  
  tests.forEach((test, index) => {
    console.group(`Test ${index + 1}: ${test.name}`);
    
    const processor = new DataProcessor();
    const result = processor.debugProcess([test.input]);
    
    if (test.shouldSkip) {
      if (result.length === 0 && processor.stats.skipped === 1) {
        console.log('✅ PASS: Record correctly skipped');
      } else {
        console.log('❌ FAIL: Record should have been skipped');
      }
    } else {
      const processed = result[0];
      if (processed && processed.score === test.expected.score) {
        console.log('✅ PASS: Score calculated correctly');
      } else {
        console.log('❌ FAIL: Incorrect score calculation');
      }
    }
    
    console.groupEnd();
  });
  
  console.groupEnd();
}

runTests();

// Tips for effective debugging:
console.log('\n=== Debugging Best Practices ===');
console.log('');

💡 Debugging Best Practices:

Always reproduce the issue first
Use the scientific method: hypothesize, test, analyze
Add logging before using debugger
Check your assumptions about data and flow
Use version control to isolate changes
Take breaks when stuck - fresh perspective helps
Document bugs and solutions for future reference
Write tests to prevent regression

Congratulations!

You've completed the JavaScript Tutorial series! You now have a comprehensive understanding of JavaScript from basics to advanced topics.

← Previous: Event Loop Next: Best Practices →

← Regular Expressions Best Practices →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

Debugging JavaScript

🤔 Why Debugging Matters

💡 Debugging Mindset

The Debugging Process

📝 Console Debugging Methods

Essential Console Methods:

🔧 Debugger & DevTools

Debugger Features:

DevTools Tips:

🚨 Error Handling & Stack Traces

Error Handling Strategies:

⚡ Advanced Debugging Tools

Advanced Techniques:

🎯 Practical Debugging Workflow

💡 Debugging Best Practices:

Congratulations!

Follow Us

Our Tools

Our Company

Special Tools