Debugging: console.log, debugger, breakpoints, source maps

Когда console.log — твой лучший друг (и когда нет) 🛠️

В начале пути каждый разработчик использует console.log() для отладки. Это нормально! Но важно понимать его плюсы и минусы:

function calculateDiscount(price, discountPercent) {
    console.log('Input values:', price, discountPercent); // Логируем входные данные
    const discountAmount = price * (discountPercent / 100);
    console.log('Discount amount:', discountAmount); // Промежуточный результат
    return price - discountAmount;
}

🔍 Совет: Используйте осмысленные метки в console.log(). Вместо console.log(x) пишите console.log('User ID:', userId).

Но у console.log есть проблемы:

• Засоряет код
• Требует ручного удаления
• Не показывает контекст выполнения

Debugger: профессиональный инструмент в ваших руках 🎯

Chrome DevTools предоставляет мощный debugger:

function processOrder(order) {
    debugger; // Выполнение остановится здесь
    const tax = order.total * 0.2;
    const finalPrice = order.total + tax;
    return finalPrice;
}

Как работать с debugger:

1. Откройте DevTools (F12)
2. Перейдите на вкладку Sources
3. Найдите ваш файл
4. Нажмите "Resume script execution" (F8) для продолжения

Breakpoints: контроль над выполнением кода ⏸️

Условные точки останова — это магия:

1. Обычные breakpoints: Кликните на номер строки в DevTools

2. Условные breakpoints: ПКМ → Add conditional breakpoint javascript // Сработает только если price > 1000 price > 1000

3. Event listener breakpoints: Останавливаются на событиях (клик, AJAX и т.д.)

Source Maps: когда исходный код ≠ исполняемый 🗺️

Современные проекты используют минификацию и транспиляцию. Source maps связывают исходный код с преобразованным:

// webpack.config.js
module.exports = {
    devtool: 'source-map', // Генерирует .map файлы
    // ...
};

Как проверить:

1. Убедитесь, что .map файлы загружаются
2. В DevTools → Settings → Enable JavaScript source maps
3. Отладка будет происходить в исходных файлах

Практический пример: отладка реальной проблемы 🔧

Рассмотрим типичный сценарий:

function updateCartTotal(cartItems) {
    let total = 0;
    cartItems.forEach(item => {
        total += item.price * item.quantity;
        debugger; // Проверяем расчет на каждой итерации
    });

    if (total > 1000) {
        total *= 0.9; // 10% скидка
    }

    return Number(total.toFixed(2));
}

Шаги отладки:

1. Ставим breakpoint на строке с forEach
2. Проверяем значения item.price и item.quantity
3. Следим за изменением total в Scope panel
4. Убеждаемся, что скидка применяется корректно

Продвинутые техники отладки 🚀

1. Console.table() для сложных структур: javascript console.table([{id: 1, name: 'Laptop'}, {id: 2, name: 'Phone'}]);

2. Live expressions в DevTools — показывают значения в реальном времени

3. Performance profiling — когда код работает медленно

4. Network throttling — отладка медленных соединений

Когда что использовать? 📊

Теперь вы вооружены профессиональными инструментами отладки! Применяйте их осознанно, и ваша эффективность вырастет в разы. 🎉