Урок 29: Отладка и тестирование в JavaScript’е

На этом уроке мы разберем один из самых важных этапов разработки, это отладка и тестирование кода. Это не просто «проверка на ошибки», а целое искусство, которое сэкономит вам часы работы и нервы.

Инструменты отладки в DevTools

Браузерные инструменты разработчика (DevTools), ваш лучший друг в борьбе с багами. Они позволяют не только видеть ошибки, но и шаг за шагом анализировать выполнение кода.

1. Как открыть DevTools?

• Chrome/Firefox/Edge: Нажмите F12 или Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac).
• Safari: Включите инструменты разработчика через меню «Настройки» → «Дополнения».

2. Панель Sources

Здесь вы найдете исходный код вашего проекта. Основные функции:

• Точки останова (Breakpoints): Останавливают выполнение кода на указанной строке.
  • Как поставить: Кликните на номер строки в редакторе кода.
  • Пример:
    function calculateSum(a, b) {
      debugger; // Точка останова через ключевое слово
      return a + b;
    }

• Пошаговое выполнение:
  • Step Over (F10): Перейти к следующей строке.
  • Step Into (F11): Войти в функцию.
  • Step Out (Shift+F11): Выйти из функции.

3. Просмотр переменных и стека вызовов

В правой панели DevTools вы увидите:

• Scope: Текущие значения переменных.
• Call Stack: Цепочка вызовов функций.

Практическая задача:
Откройте DevTools, найдите функцию с ошибкой и установите точку останова. Посмотрите, как меняются переменные при пошаговом выполнении.

Логирование (console.log и не только)

Логирование это простой способ отслеживать поведение кода. Но не ограничивайтесь console.log!

1. Методы console

• console.log(): Вывод информации.
• console.error(): Вывод ошибок (подсвечивается красным).
• console.table(): Вывод данных в виде таблицы.
  const users = [{ name: "Максим", age: 30 }, { name: "Анна", age: 25 }];
  console.table(users); // Красивая таблица

• console.group(): Группировка логов.
  console.group('Детали пользователя');
  console.log('Имя: Максим');
  console.log('Возраст: 30');
  console.groupEnd();

2. Форматирование строк

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

const price = 100;
console.log(`Сумма заказа: ${price} руб.`); // Сумма заказа: 100 руб.

Практическая задача:
Добавьте логирование в свой проект. Замените все alert() на console.log() и проверьте вывод в DevTools.

Базовые принципы тестирования

Тестирование это проверка, что ваш код работает так, как задумано. Начнем с простых примеров.

1. Зачем тестировать?

• Уверенность в работоспособности кода.
• Быстрое обнаружение регрессий (когда новая функция ломает старую).

2. Виды тестов

1. Unit-тесты: Проверка отдельных функций.
   // Функция для теста
   function sum(a, b) {
     return a + b;
   }
   
   // Тест вручную
   if (sum(2, 3) !== 5) {
     throw new Error('Тест провален!');
   }

2. Интеграционные тесты: Проверка взаимодействия компонентов.
3. E2E-тесты: Имитация действий пользователя.

3. Тестовые фреймворки

Для автоматизации используйте Jest, Mocha или Cypress. Но пока напишем тест вручную:

function test(description, callback) {
  try {
    callback();
    console.log(`${description}`);
  } catch (error) {
    console.error(`${description}: ${error}`);
  }
}

test('Сумма 2 + 3 равна 5', () => {
  if (sum(2, 3) !== 5) throw new Error('Неверный результат');
});

Практическая задача:
Напишите функцию multiply(a, b) и добавьте для нее 3 теста (включая проверку на отрицательные числа).

Практические примеры

Пример 1: Отладка цикла

Исходный код с ошибкой:

function findMax(numbers) {
  let max = 0;
  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] > max) {
      max = numbers[i];
    }
  }
  return max;
}

// Ожидаем, что findMax([-5, -3, -1]) вернет -1, но получаем 0.

Решение: Установите точку останова внутри цикла и проверьте значения numbers[i] и max.

Пример 2: Тестирование функции

function isEven(number) {
  return number % 2 === 0;
}

// Тесты
test('Четное число', () => {
  if (!isEven(4)) throw new Error();
});

test('Нечетное число', () => {
  if (isEven(5)) throw new Error();
});

Отладка и тестирование неотъемлемая часть разработки. Используйте DevTools для анализа кода, логируйте данные и пишите тесты, чтобы быть уверенным в результате. Хороший код это проверенный код!

Хотите изучить JavaScript от основ до продвинутого уровня? Переходите по ссылке — полный курс «JavaScript для начинающих»