Книги
JavaScript
Глава 9. Тестирование и отладка
Использование отладчика

JavaScript:
Использование отладчика

Как это сделать:

Вот небольшой фрагмент кода на JavaScript, который работает не так, как ожидалось:

function buggyMultiply(a, b) {
    return a + b; // Ой! Здесь должно быть умножение, а не сложение.
}

let result = buggyMultiply(5, 3);
console.log('Результат:', result);

Вывод неверный:

Результат: 8

Давайте отладим в Chrome DevTools:

  1. Откройте этот JS в браузере.
  2. Кликните правой кнопкой мыши и выберите “Inspect” (Исследовать), чтобы открыть DevTools.
  3. Кликните на вкладку “Sources” (Источники).
  4. Найдите фрагмент кода или страницу и установите точку останова, кликнув по номеру строки рядом с оператором return.
  5. Обновите страницу, чтобы активировать точку останова.
  6. Проверьте панель “Scope” (Область видимости), чтобы увидеть локальные переменные a и b.
  7. Пройдите дальше, используя кнопку “Step over next function call” (Шаг через следующий вызов функции).
  8. Увидьте ошибку в операторе return.
  9. Исправьте код:
function buggyMultiply(a, b) {
    return a * b; // Исправлено!
}

let result = buggyMultiply(5, 3);
console.log('Результат:', result);

Исправленный вывод:

Результат: 15

Погружение

Концепция отладки существует с ранних дней вычислительной техники — легенда гласит, что она началась, когда в компьютере нашли мотылька в 1940-х годах! Сегодня отладчики JavaScript, такие как встроенные инструменты браузера (Chrome DevTools, инструменты разработчика Firefox) или интегрированные в IDE отладчики (Visual Studio Code, WebStorm), предлагают множество функций.

Альтернативами встроенным отладчикам служат сторонние инструменты вроде WebStorm или использование хорошо знакомого console.log для вывода состояний переменных. Но они не предлагают реального взаимодействия и подробного изучения, которые предоставляют отладчики.

Что касается деталей реализации, большинство отладчиков работают аналогично: они позволяют устанавливать точки останова, которые приостанавливают выполнение, проходить через код, проверять текущее состояние переменных, наблюдать за выражениями и даже манипулировать значениями на лету, чтобы тестировать различные сценарии.

Смотрите также

Использование интерактивной оболочки (REPL)Написание тестов