Включение режима отладки

Driver.js — библиотека для создания пошаговых интерактивных руководств по интерфейсу. Для отладки сценариев и выявления ошибок при работе с элементами DOM предусмотрен специальный режим, который позволяет отслеживать процесс пошагового прохождения тура и взаимодействие с элементами.

Инициализация Driver.js с отладкой

Режим отладки активируется через параметр debug при создании экземпляра Driver:

const driver = new Driver({
    animate: true,
    opacity: 0.75,
    padding: 10,
    allowClose: false,
    debug: true
});
  • debug: true — включает подробные логи в консоль о текущем состоянии драйвера, позиционировании подсказок, активных шагах и взаимодействии с элементами.
  • animate — управление анимацией подсказок; полезно отключить анимацию при детальной отладке.
  • opacity — степень затемнения остальной части экрана; при отладке можно сделать прозрачнее, чтобы легче видеть DOM-структуру.
  • allowClose — блокировка возможности закрыть подсказку кликом вне элемента, предотвращает случайное завершение тура.

Логирование шагов

При включенном режиме отладки Driver.js автоматически выводит в консоль информацию о каждом шаге:

driver.defineSteps([
    {
        element: '#step1',
        popover: {
            title: 'Первый шаг',
            description: 'Описание первого шага.'
        }
    },
    {
        element: '#step2',
        popover: {
            title: 'Второй шаг',
            description: 'Описание второго шага.'
        }
    }
]);

driver.start();

В консоли будут выводиться сообщения вида:

[Driver.js Debug] Step 1 activated: #step1
[Driver.js Debug] Popover positioned at top-left
[Driver.js Debug] Step 2 activated: #step2

Это позволяет проверить правильность селекторов, корректность отображения подсказок и порядок шагов тура.

Проверка наличия элементов

Отладочный режим автоматически сигнализирует, если указанный селектор не найден на странице:

{
    element: '#nonexistent',
    popover: {
        title: 'Неправильный селектор',
        description: 'Элемент не найден.'
    }
}

Консоль выведет предупреждение:

[Driver.js Debug] Element not found: #nonexistent

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

Пошаговое управление

Режим отладки позволяет вручную управлять переходами между шагами через методы:

  • driver.moveNext() — перейти к следующему шагу
  • driver.movePrevious() — вернуться к предыдущему шагу
  • driver.reset() — сбросить тур к первому шагу

Каждое действие логируется в консоль с указанием текущего шага, позиции поповера и состояния элементов.

Настройка дополнительных параметров для отладки

  • nextBtnText и prevBtnText — изменение текста кнопок для тестирования локализации или пользовательских надписей.
  • keyboardControl — позволяет использовать клавиши стрелок для навигации по шагам; удобно при тестировании сложных интерфейсов.
  • overlayClickNext — при true клик по затемненной области переводит на следующий шаг, помогает проверить область overlay.

Пример расширенной настройки:

const driver = new Driver({
    animate: false,
    debug: true,
    keyboardControl: true,
    overlayClickNext: false,
    nextBtnText: 'Вперед',
    prevBtnText: 'Назад'
});

Совместное использование с динамическими элементами

Если элементы создаются после загрузки страницы, важно вызывать driver.defineSteps() и driver.start() после того, как DOM полностью сформирован. В режиме отладки любые проблемы с отсутствием элементов будут моментально отображены в консоли, что значительно ускоряет процесс отладки.

Выводы по применению отладочного режима

  • Подробные консольные логи помогают понять внутреннее состояние Driver.js.
  • Проверка корректности селекторов и последовательности шагов минимизирует ошибки в интерактивных турах.
  • Режим отладки незаменим при работе с динамическими страницами и сложной анимацией подсказок.

Использование debug: true вместе с настройками анимации, управления клавишами и текстом кнопок обеспечивает полный контроль над поведением Driver.js на этапе разработки.

Оглавление