Открытие debug window

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

Запуск Karma в режиме отладки

Для открытия debug window необходимо запустить Karma в стандартном режиме, используя конфигурационный файл karma.conf.js. Основные параметры, влияющие на отладку:

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],   // или mocha, qunit
    files: [
      'src/**/*.js',
      'test/**/*.spec.js'
    ],
    browsers: ['Chrome'],      // Chrome поддерживает debug window
    singleRun: false,          // Важный параметр: при false браузер не закрывается после выполнения тестов
    autoWatch: true
  });
};
  • singleRun: false — критически важно, иначе браузер закроется сразу после выполнения тестов.
  • autoWatch: true — позволяет Karma автоматически перезапускать тесты при изменении файлов.

После запуска Karma командой:

npx karma start

Karma выводит в консоль URL, по которому можно открыть debug window. Обычно это выглядит так:

Chrome 117.0.0 (Windows 10) DEBUG: Connected on socket xyz
Navigate to http://localhost:9876/debug.html

Структура debug window

Открыв http://localhost:9876/debug.html в браузере, появляется окно с несколькими ключевыми элементами:

  1. Список тестов — отображает все тесты, обнаруженные Karma. Пройденные тесты подсвечиваются зелёным, проваленные — красным.
  2. Консоль ошибок — интегрированная панель, дублирующая вывод ошибок и исключений JavaScript.
  3. Панель инструментов браузера — можно открыть DevTools (F12) и выполнять отладку кода, ставить точки останова и проверять состояние переменных.
  4. Кнопка перезапуска тестов — позволяет вручную запускать тесты после внесения изменений.

Особенности работы с отладкой

  • Breakpoints и step-by-step Все точки останова, установленные в исходных файлах через DevTools, срабатывают так же, как при обычной отладке веб-приложения. Karma поддерживает sourcemaps, поэтому можно ставить точки останова прямо в исходном коде, даже если используется транспиляция через Babel или TypeScript.

  • Просмотр состояния переменных Debug window позволяет инспектировать любые глобальные объекты и локальные переменные внутри тестов. Это особенно полезно для сложных модулей, где поведение тестируемого кода зависит от множества условий.

  • Проверка DOM Для тестов, работающих с DOM, debug window открывает реальный HTML-документ, в котором выполняются тесты. Это упрощает проверку манипуляций с элементами страницы и визуальное подтверждение результатов.

  • Интерактивные команды В консоли DevTools можно вручную вызвать функции тестируемого кода или проверять состояния объектов в любой момент выполнения теста.

Настройка для разных браузеров

Хотя Chrome обеспечивает наилучший опыт работы с debug window, Karma поддерживает и другие браузеры:

browsers: ['Firefox', 'Edge']

Для Firefox и Edge debug window открывается по тому же принципу, однако некоторые инструменты DevTools могут вести себя иначе. Основная задача — убедиться, что singleRun отключён, иначе окно закроется после первого запуска тестов.

Практические советы

  • Для длительной отладки отключать автоматический запуск тестов можно с помощью autoWatch: false и вручную обновлять страницу debug window.
  • Sourcemaps следует включать всегда при использовании TypeScript или Babel, чтобы точки останова работали в исходных файлах.
  • Если тесты выполняются слишком быстро и сложно отследить ошибки, можно добавить browserConsoleLogOptions в конфигурацию Karma для логирования сообщений в консоль.
browserConsoleLogOptions: {
  level: 'log',
  terminal: true
}

Это позволит видеть все console.log и console.error из браузера прямо в терминале, дополнительно к debug window.

  • Использование --browsers ChromeDebugging или отдельного профиля Chrome с включённым remote-debugging может быть полезно для сложных сценариев, где необходима интеграция с внешними инструментами.

Заключение по использованию debug window

Debug window является ключевым инструментом для глубокого анализа поведения тестов в Karma. Она объединяет преимущества реального браузера, визуального отображения DOM и встроенной отладки кода, что делает процесс тестирования более прозрачным и эффективным.

Оглавление