Отладка JavaScript — это как поиск иголки в стоге сена, только иголка еще и двигается. Каждый разработчик хотя бы раз в жизни проводил часы в поисках ошибки, которая в итоге оказывалась лишней запятой или неправильным именем переменной. В этой статье я поделюсь проверенными методами и трюками, которые помогут вам находить баги быстрее и с меньшими затратами нервов.

Digital-студия WNDER

Ссылка на оригинальную статью

Правильно используйте console.log

Самый простой способ отладки — вывод данных в консоль. Но здесь есть свои хитрости. Не пишите просто console.log(variable), лучше используйте более информативные варианты:

const user = { name: 'Иван', age: 30 };
console.log('user:', user);
console.log({ user }); // выведет объект с именем свойства

Так вы сразу видите, что именно выводите, особенно если в коде несколько переменных. Это экономит время, когда вы смотрите на кучу цифр в консоли и пытаетесь понять, какая из них ваша.

Лайфхак: вместо console.log используйте console.table для массивов и объектов — данные отображаются в виде таблицы, что гораздо нагляднее.

Используйте отладчик в браузере

Консоль — это хорошо, но настоящая мощь — в отладчике. Откройте DevTools (F12), перейдите на вкладку Sources, найдите ваш файл и поставьте точку останова (breakpoint). Теперь выполнение кода остановится в этом месте, и вы сможете:

  • Посмотреть значения всех переменных в текущей области видимости
  • Выполнить код пошагово (Step over, Step into, Step out)
  • Изменить значение переменной прямо во время выполнения
  • Посмотреть стек вызовов

Это как рентген для вашего кода — вы видите, что происходит в каждый момент времени.

Изучайте стек вызовов

Когда возникает ошибка, консоль показывает стек вызовов — список функций, которые привели к ошибке. Часто разработчики смотрят только на последнюю строку, но стек может рассказать гораздо больше. Например, если ошибка возникает в функции calculateTotal, а вы её вызываете из трёх мест, стек покажет, откуда именно пришёл вызов.

function calculateTotal(price, tax) {
    return price * tax; // здесь ошибка
}

function checkout() {
    const total = calculateTotal(100, '0.2'); // tax — строка, а не число
    console.log(total);
}

В консоли вы увидите: calculateTotal вызвана из checkout. Это сразу указывает на проблему — тип данных.

Не забывайте про строгий режим

Включите 'use strict' в начале вашего кода. Это не панацея, но строгий режим запрещает некоторые опасные вещи, например, использование переменных без объявления. Это помогает избежать множества скрытых багов.

'use strict';

function doSomething() {
    total = 10; // Ошибка! total не объявлена
}

Строгий режим также делает код более предсказуемым и совместимым с будущими стандартами.

Используйте инструменты для поиска ошибок

Современные браузеры имеют встроенные инструменты, которые помогают находить проблемы. Например, вкладка Network показывает все запросы и их статусы, а вкладка Performance помогает найти узкие места. Также полезно использовать линтеры, такие как ESLint, которые проверяют код на потенциальные ошибки ещё до запуска.

Инструмент Что делает Когда использовать
console.log Выводит данные в консоль Быстрая проверка значений
debugger Останавливает выполнение кода Пошаговый анализ
ESLint Проверяет синтаксис и стиль Перед запуском кода
Chrome DevTools Полный набор инструментов Комплексная отладка

Пишите тесты

Лучший способ избежать ошибок — не допускать их. Написание юнит-тестов поможет выявить проблемы на ранних стадиях. Это может показаться скучным, но тесты экономят часы отладки в будущем. Используйте фреймворки вроде Jest или Mocha.

// Пример теста на Jest
const sum = (a, b) => a + b;

test('сумма 1 и 2 равна 3', () => {
    expect(sum(1, 2)).toBe(3);
});

Тесты — это ваша страховка от регрессий. Изменили код — запустили тесты, и сразу видно, что сломалось.

Правило: Если вы нашли ошибку, не просто исправьте её, а добавьте тест, который её воспроизводит. Так вы гарантируете, что она не вернётся.

Что в итоге

Отладка — это не магия, а навык. Чем больше вы практикуетесь, тем быстрее находите ошибки. Используйте console.log для быстрых проверок, отладчик для глубокого анализа, а тесты — для предотвращения. И всегда читайте сообщения об ошибках — они часто содержат подсказки, что пошло не так.

Помните: каждая ошибка — это возможность узнать что-то новое о вашем коде. Не бойтесь ошибаться, бойтесь не замечать ошибок.

Студия WNDER