Проверка корректности установки

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

Подключение файлов библиотеки

1. Подключение CSS и JS Для корректной работы iziToast необходимо подключить как CSS-файл, так и JS-файл. Обычно подключение выглядит так:

<link rel="stylesheet" href="path/to/iziToast.min.css">
<script src="path/to/iziToast.min.js"></script>

Важно: путь к файлам должен точно соответствовать их местоположению в проекте. Ошибки в пути являются одной из самых частых причин некорректной работы уведомлений.

Проверка глобального объекта iziToast

После подключения скрипта нужно убедиться, что объект iziToast доступен глобально. Для этого в консоли браузера можно выполнить:

console.log(typeof iziToast);

Если вывод будет "object", библиотека загружена корректно. Любое другое значение (undefined, "function") указывает на проблему с подключением скрипта.

Тестовый вызов уведомления

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

iziToast.show({
    title: 'Успешно',
    message: 'Библиотека iziToast работает корректно!',
});

После выполнения этого кода в верхней части страницы должно появиться уведомление. Если уведомление не отображается:

  • Проверить консоль браузера на наличие ошибок.
  • Убедиться, что CSS подключен, так как отсутствие стилей приводит к некорректному отображению даже при правильной работе JS.
  • Проверить, что вызов iziToast.show() выполняется после загрузки DOM. Например, внутри обработчика события DOMContentLoaded:
document.addEventListener('DOMContentLoaded', function() {
    iziToast.show({
        title: 'Успешно',
        message: 'Библиотека iziToast готова к использованию!',
    });
});

Проверка конфликтов с другими библиотеками

Конфликты могут возникнуть, если на странице подключены другие библиотеки, изменяющие глобальные объекты или стили уведомлений. Наиболее частые проблемы:

  • Переписывание объекта window.iziToast.
  • Конфликты CSS, когда другие фреймворки переопределяют стили .iziToast.

Для диагностики:

  • Временно отключить другие скрипты и стили.
  • Проверить работу тестового уведомления.
  • Постепенно возвращать остальные скрипты, чтобы выявить источник конфликта.

Отладка ошибок

Консоль браузера — главный инструмент диагностики. Наиболее частые сообщения и их причины:

Сообщение в консоли Причина Решение
Uncaught ReferenceError: iziToast is not defined Скрипт iziToast не подключен или путь указан неверно Проверить путь к файлу JS и порядок подключения
iziToast.show is not a function Подключена некорректная версия библиотеки Скачать последнюю версию iziToast с официального источника
Уведомление появляется без стилей CSS не подключен Подключить iziToast.min.css перед использованием JS

Проверка совместимости с браузерами

Библиотека iziToast поддерживает все современные браузеры. Для полной уверенности:

  • Открыть страницу с тестовым уведомлением в Chrome, Firefox, Safari и Edge.
  • Проверить консоль на наличие ошибок.
  • Обратить внимание на отображение и анимацию уведомлений.

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

Для быстрой проверки установки можно использовать CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast/dist/css/iziToast.min.css">
<script src="https://cdn.jsdelivr.net/npm/izitoast/dist/js/iziToast.min.js"></script>

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

Резюме проверки

Ключевые шаги проверки корректности установки iziToast:

  1. Подключить CSS и JS с корректными путями.
  2. Проверить глобальный объект iziToast.
  3. Выполнить минимальный тестовый вызов уведомления.
  4. Диагностировать возможные конфликты и ошибки через консоль.
  5. Проверить отображение в разных браузерах.
  6. При необходимости использовать CDN для исключения локальных проблем.

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

Оглавление