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

Подключение библиотек

Для корректной работы Intro.js необходимо убедиться, что подключены все необходимые файлы: основной JavaScript и CSS. Обычно подключение выглядит следующим образом:

<link rel="stylesheet" href="https://unpkg.com/intro.js/minified/introjs.min.css">
<script src="https://unpkg.com/intro.js/minified/intro.min.js"></script>

Ключевые моменты:

  • Путь к файлам должен быть корректным. Если используются локальные копии библиотеки, следует проверять относительные или абсолютные пути.
  • Порядок подключения важен: сначала CSS, затем JS.

Проверка доступности объекта IntroJs

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

if (typeof introJs === "function") {
    console.log("Intro.js успешно подключен");
} else {
    console.error("Intro.js не найден. Проверьте пути подключения файлов");
}

Если проверка возвращает ошибку, вероятные причины:

  • Файл intro.min.js не загружен или путь указан неправильно.
  • Конфликт с другими библиотеками, которые перекрывают глобальные объекты.

Создание минимального тестового сценария

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

<div id="step1" data-intro="Это первая подсказка" data-step="1">
    Элемент для теста Intro.js
</div>
<button id="startTour">Начать тур</button>

<script>
document.getElementById("startTour").addEventListener("click", function() {
    introJs().start();
});
</script>

Ключевые моменты:

  • Атрибуты data-intro и data-step обязательны для корректного отображения подсказок.
  • Метод .start() запускает тур. Его вызов должен происходить после загрузки DOM, чтобы элементы были доступны.

Проверка работы в разных браузерах

Intro.js использует стандартные возможности HTML5 и CSS3, поэтому корректность установки лучше проверять во всех целевых браузерах:

  • Chrome, Firefox, Edge для поддержки современных функций.
  • Safari и мобильные браузеры для адаптивности и touch-событий.

Особое внимание стоит уделить:

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

Диагностика ошибок

Если подсказки не отображаются:

  1. Проверить наличие элементов с атрибутами data-intro.
  2. Убедиться, что вызов introJs().start() происходит после загрузки DOM, например внутри window.onload или DOMContentLoaded.
  3. Проверить консоль на ошибки JavaScript, которые могут прерывать выполнение скрипта.
  4. Проверить CSS: иногда сторонние стили могут перекрывать стили Intro.js, делая подсказки невидимыми.

Использование версии для модулей

При подключении через ES6-модули или bundler (Webpack, Vite) объект introJs нужно импортировать:

import introJs from 'intro.js';
import 'intro.js/introjs.css';

introJs().start();

Особенности:

  • Импорт CSS обязателен для корректного отображения подсказок.
  • Проверка корректности установки аналогична: запуск минимального тура и проверка DOM.

Итоговые шаги проверки

  1. Подключить CSS и JS файлы библиотеки.
  2. Проверить наличие глобального объекта introJs или корректный импорт.
  3. Создать минимальный тестовый шаг и запустить метод .start().
  4. Проверить отображение подсказок и консоль на наличие ошибок.
  5. Убедиться в корректной работе во всех целевых браузерах.

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

Оглавление