Отладка в DevTools

Для использования iziToast необходимо подключить библиотеку через CDN или установить её через npm/yarn. После подключения создаётся объект уведомления вызовом функции iziToast.show() или специализированными методами, такими как iziToast.success(), iziToast.error(), iziToast.info() и iziToast.warning().

Пример базовой инициализации:

iziToast.success({
    title: 'Успех',
    message: 'Данные успешно сохранены!',
    position: 'topRight',
    timeout: 3000
});

Ключевые параметры:

  • title – заголовок уведомления.
  • message – текст уведомления.
  • position – позиция на экране (topRight, topLeft, bottomRight, bottomLeft, center).
  • timeout – время автоматического скрытия в миллисекундах.

Просмотр и отладка в DevTools

DevTools в браузере позволяют отслеживать поведение iziToast на разных уровнях:

  1. Консоль JavaScript В консоли можно проверять ошибки при вызове уведомлений. Часто встречаются следующие типы ошибок:

    • iziToast is not defined – библиотека не подключена.
    • Некорректные параметры объекта конфигурации (undefined или неправильный тип).

  2. Отслеживание DOM-элементов Все уведомления iziToast создаются как элементы внутри контейнера <body>. Контейнер имеет класс .iziToast-wrapper, уведомления – .iziToast. Через вкладку Elements можно:

    • Проверять, создаются ли элементы уведомлений.
    • Слежение за стилями и анимацией через вкладку Styles.
    • Изменение параметров уведомления в реальном времени для тестирования внешнего вида.

  3. Сетевые запросы (Network) Если уведомление зависит от данных с сервера, вкладка Network помогает убедиться, что данные приходят корректно, до вызова iziToast.

  4. Прослушивание событий iziToast поддерживает множество событий:

    • onOpening – перед появлением уведомления.
    • onOpened – после появления.
    • onClosing – перед скрытием.
    • onClosed – после скрытия.
iziToast.info({
    title: 'Информация',
    message: 'Пример события',
    onOpening: function(instance, toast){
        console.log('toast открывается', instance, toast);
    },
    onClosing: function(instance, toast, closedBy){
        console.log('toast закрывается', closedBy);
    }
});

В DevTools эти события позволяют отследить жизненный цикл уведомления, проверить параметры instance и toast, а также выяснить причину закрытия (closedBy может быть 'timeout', 'button' или 'overlay').

Использование точки останова и пошаговой отладки

Для более сложных сценариев полезно устанавливать breakpoints:

  • Вкладка Sources → выбирается файл скрипта с вызовом iziToast.
  • Устанавливается точка останова на строке вызова iziToast.show() или специализированного метода.
  • После остановки можно пошагово проверять объект конфигурации, состояние DOM и реакцию на события.
const config = {
    title: 'Тест',
    message: 'Проверка отладки',
    position: 'bottomLeft'
};

iziToast.show(config);

Проверка через DevTools:

  • config – правильность полей и типов.
  • iziToast.show(config) – создание DOM-элемента.
  • document.querySelectorAll('.iziToast') – наличие уведомлений в DOM.

Логирование состояния уведомлений

Чтобы отслеживать динамику уведомлений:

  • Вручную логировать instance:
const toast = iziToast.show({
    title: 'Лог',
    message: 'Отслеживание instance'
});
console.log(toast); // объект с методами close, hide, show
  • Просмотр текущих уведомлений через wrapper:
const wrappers = document.querySelectorAll('.iziToast-wrapper');
console.log(wrappers); // список контейнеров с уведомлениями

Это позволяет понять, какие уведомления активны, и проверить работу методов close() и hide().

Проверка кастомных стилей и классов

iziToast позволяет использовать CSS-классы:

  • class – добавить кастомный класс.
  • theme – изменить тему (dark или light).

В DevTools можно:

  • Проверить, применяются ли стили.
  • Отследить анимацию появления/скрытия через вкладку Animations.
  • Вносить временные изменения в CSS для тестирования.
iziToast.show({
    title: 'Стилизация',
    message: 'Проверка кастомного класса',
    class: 'custom-toast'
});

Симуляция ошибок и тестирование поведения

Для комплексной отладки полезно симулировать сценарии:

  • Ошибка отсутствия данных: message: undefined.
  • Быстрое создание нескольких уведомлений: проверка правильной работы очереди.
  • Закрытие уведомления по разным причинам: кнопка, таймер, клик по overlay.

DevTools позволяет:

  • Мгновенно редактировать объект конфигурации.
  • Воспроизводить ошибки без перезапуска страницы.
  • Отслеживать последовательность вызовов через Call Stack.

Советы по эффективной отладке

  • Использовать console.table() для проверки массивов уведомлений.
  • Включать timeout: false для тестирования закрытия вручную.
  • Проверять позицию через инспектор DOM, если уведомления накладываются.
  • Логировать параметры событий onOpening и onClosing для выявления некорректного поведения.

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

Оглавление