Debugging Techniques

Debugging Fundamentals

Debugging is the systematic process of identifying, analyzing, and resolving software defects. Effective debugging requires a methodical approach, the right tools, and an understanding of common debugging patterns and techniques.

JavaScript Debugging Techniques

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

// Advanced logging
const user = { name: 'John', age: 30, active: true };
console.table(user); // Display as table

const users = [
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 }
];
console.table(users);

// Grouped logging
console.group('User Validation');
console.log('Checking name...');
console.log('Checking email...');
console.log('Validation complete');
console.groupEnd();

// Time measurements
console.time('data-processing');
// ... processing code
console.timeEnd('data-processing');

// Assertions
console.assert(user.age > 18, 'User must be adult');
console.assert(user.name, 'Name is required');

// Count executions
function processItem(item) {
    console.count('processItem calls');
    // ... processing logic
}

// Trace function calls
function complexFunction() {
    console.trace('complexFunction called');
    // ... function logic
}

// Conditional breakpoints
function processUsers(users) {
    for (let i = 0; i < users.length; i++) {
        const user = users[i];

        // Break only when user has specific email
        if (user.email === 'problem@example.com') {
            debugger; // Execution will pause here
        }

        processUser(user);
    }
}

// Break on DOM changes
function setupDOMBreakpoints() {
    // Break when specific element is modified
    const element = document.getElementById('target');

    // Break on attribute changes
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === 'attributes' &&
                mutation.attributeName === 'class') {
                debugger; // Pause when class changes
            }
        });
    });

    observer.observe(element, {
        attributes: true,
        attributeFilter: ['class']
    });
}

// Break on network requests
// In Chrome DevTools Console:
fetch('/api/users')
    .then(response => {
        if (!response.ok) {
            debugger; // Break on failed requests
        }
        return response.json();
    });

// Break on specific events
document.addEventListener('click', (event) => {
    if (event.target.matches('.important-button')) {
        debugger; // Break on important button clicks
    }
});

// Step debugging workflow
function complexCalculation(a, b, c) {
    // Set breakpoint here (F9 in DevTools)
    const step1 = a * 2; // F10 to step over

    // Hover over variables to see values
    const step2 = step1 + b; // Inspect: step1 = ?, step2 = ?

    if (step2 > 10) { // F11 to step into condition
        const result = step2 * c;
        return result;
    } else {
        // F11 to step into else block
        return step2 + c;
    }
}

// Call stack inspection
function functionA() {
    return functionB();
}

function functionB() {
    return functionC();
}

function functionC() {
    // When breakpoint hits here, check Call Stack panel
    // Shows: functionC -> functionB -> functionA
    debugger;
    return "result";
}

// Watch expressions
// In DevTools Watch panel, add:
// - complexCalculation(2, 3, 4)
// - document.querySelector('.active')
// - localStorage.getItem('user')

// Conditional watch
// - user && user.name (only when user exists)
// - array.length > 0 && array[0].value

// Debug promise chains
function fetchUserData(userId) {
    return fetch(`/api/users/${userId}`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            return response.json();
        })
        .then(userData => {
            console.log('User data received:', userData);
            return processUserData(userData);
        })
        .then(processedData => {
            console.log('Data processed:', processedData);
            return processedData;
        })
        .catch(error => {
            console.error('Error in fetchUserData:', error);
            // Re-throw to maintain error chain
            throw error;
        });
}

// Async/await debugging
async function loadUserProfile(userId) {
    try {
        console.log('Starting profile load...');

        // Breakpoint here to inspect userId
        const userData = await fetchUserData(userId);
        console.log('User data loaded:', userData);

        // Breakpoint here to inspect userData
        const profileData = await fetchUserProfile(userData.profileId);
        console.log('Profile data loaded:', profileData);

        // Breakpoint here to inspect final result
        const combinedData = { ...userData, ...profileData };
        return combinedData;

    } catch (error) {
        console.error('Error loading profile:', error);
        throw error;
    }
}

// Debug async iteration
async function processUsersInParallel(userIds) {
    const promises = userIds.map(async (userId, index) => {
        try {
            console.log(`Processing user ${index + 1}/${userIds.length}`);
            const userData = await fetchUserData(userId);
            return userData;
        } catch (error) {
            console.error(`Failed to process user ${userId}:`, error);
            return null; // Or throw, depending on requirements
        }
    });

    // Breakpoint here to inspect promises array
    const results = await Promise.allSettled(promises);

    // Inspect results
    const successful = results.filter(r => r.status === 'fulfilled');
    const failed = results.filter(r => r.status === 'rejected');

    console.log(`${successful.length} successful, ${failed.length} failed`);
    return results;
}

// Debug event listeners
class EventDebugger {
    constructor() {
        this.eventLog = [];
        this.originalAddEventListener = EventTarget.prototype.addEventListener;
        this.patchEventListeners();
    }

    patchEventListeners() {
        const self = this;
        EventTarget.prototype.addEventListener = function(type, listener, options) {
            // Log event listener registration
            self.eventLog.push({
                element: this,
                type: type,
                listener: listener,
                stack: new Error().stack,
                timestamp: Date.now()
            });

            // Call original method
            return self.originalAddEventListener.call(this, type, listener, options);
        };
    }

    getEventListeners(element, type) {
        return this.eventLog.filter(entry =>
            entry.element === element &&
            (!type || entry.type === type)
        );
    }

    clearLog() {
        this.eventLog = [];
    }
}

// Usage
const debugger = new EventDebugger();

// After setting up event listeners
const button = document.querySelector('#myButton');
const buttonListeners = debugger.getEventListeners(button, 'click');
console.log('Click listeners on button:', buttonListeners);

// Debug event propagation
document.addEventListener('click', (event) => {
    console.log('Click event:', {
        target: event.target,
        currentTarget: event.currentTarget,
        eventPhase: event.eventPhase, // 1=capturing, 2=target, 3=bubbling
        bubbles: event.bubbles,
        cancelable: event.cancelable
    });
}, true); // Use capture phase for debugging