Режим отладки в Tom Select используется для контроля внутреннего состояния компонента, анализа цепочки событий, диагностики загрузки данных и выявления проблем в кастомных конфигурациях. Он становится особенно важным при использовании асинхронных источников данных, пользовательских рендеров и расширений через плагины.
Основной способ активации отладочной информации — передача параметра конфигурации при инициализации экземпляра:
const select = new TomSelect("#select", {
debug: true
});При включённом режиме отладки компонент начинает выводить диагностическую информацию в консоль браузера. Логируются ключевые события жизненного цикла, изменения состояния и операции с данными.
В некоторых интеграциях уровень детализации логирования может
дополняться собственными обработчиками, оборачивающими стандартный
console.log.
Отладочные сообщения Tom Select обычно группируются по следующим категориям:
Каждое сообщение сопровождается контекстом экземпляра, что особенно важно при использовании нескольких селектов на одной странице.
Ключевые этапы жизненного цикла компонента являются основными точками для отладки:
onInitialize — завершение инициализации;onFocus — получение фокуса;onBlur — потеря фокуса;onDropdownOpen — открытие списка;onDropdownClose — закрытие списка;onChange — изменение выбранного значения;onItemAdd / onItemRemove — добавление и
удаление элементов.Подключение логирования к этим событиям позволяет формировать полную картину поведения компонента:
const select = new TomSelect("#select", {
debug: true,
onChange(value) {
console.log("change:", value);
},
onItemAdd(value) {
console.log("item add:", value);
},
onItemRemove(value) {
console.log("item remove:", value);
}
});При использовании асинхронной загрузки через load
функция становится одним из основных источников проблем. В режиме
отладки важно отслеживать:
const select = new TomSelect("#select", {
valueField: "id",
labelField: "title",
searchField: "title",
load(query, callback) {
console.log("load query:", query);
fetch(`/api/items?q=${encodeURIComponent(query)}`)
.then(res => res.json())
.then(data => {
console.log("response:", data);
callback(data);
})
.catch(err => {
console.error("load error:", err);
callback();
});
}
});Такая схема позволяет выявлять несоответствия формата данных и проблемы сетевого уровня.
Внутреннее состояние экземпляра Tom Select может использоваться как источник отладочной информации:
items — выбранные значения;options — доступные элементы;lastQuery — последний поисковый запрос;isOpen — состояние выпадающего списка;activeItems — активные элементы интерфейса.Пример диагностики:
console.log({
items: select.items,
options: select.options,
isOpen: select.isOpen
});Изменения этих структур напрямую отражают поведение UI и помогают выявлять расхождения между данными и отображением.
Механизм поиска в Tom Select опирается на поле
searchField и внутренний фильтр. При включённом режиме
отладки можно анализировать:
Расширенная диагностика:
const select = new TomSelect("#select", {
debug: true,
searchField: ["title"],
score: function(search) {
console.log("search term:", search);
return function(item) {
return 1;
};
}
});Подмена функции оценки позволяет отслеживать процесс ранжирования результатов.
Tom Select активно манипулирует DOM-структурой, создавая собственные контейнеры для input, dropdown и элементов списка. Отладка в этом слое включает:
Типовые точки проверки:
console.log(select.wrapper);
console.log(select.dropdown);
console.log(select.control);При визуальных ошибках (например, некорректное позиционирование) анализ DOM-узлов позволяет определить источник проблемы — CSS-конфликт или неверное состояние экземпляра.
Плагины расширяют поведение Tom Select, добавляя новые UI-элементы и логику. При их использовании режим отладки позволяет выявлять:
const select = new TomSelect("#select", {
plugins: {
remove_button: {},
clear_button: {}
},
debug: true
});При конфликте плагинов важно отслеживать, какой модуль перехватывает событие или изменяет DOM первым.
Частые проблемы связаны с некорректной настройкой полей:
valueField;labelField данным;create: true с серверной валидацией.Режим отладки позволяет быстро локализовать такие ошибки через вывод промежуточных состояний:
console.log(select.settings);
console.log(select.options);При больших наборах данных отладка включает анализ производительности:
options;load;Типовой подход — добавление временных меток:
const t0 = performance.now();
select.refreshOptions();
const t1 = performance.now();
console.log("refresh time:", t1 - t0);Это позволяет выявлять операции, влияющие на задержки интерфейса.
При создании кастомных рендеров и обработчиков важно отслеживать поток данных:
const select = new TomSelect("#select", {
render: {
option(data, escape) {
console.log("render option:", data);
return `<div>${escape(data.title)}</div>`;
}
}
});Такой подход позволяет контролировать соответствие входных данных и отображаемого результата.
Для глубокой диагностики используется объединение всех событий в единый поток логов:
const select = new TomSelect("#select", {
debug: true
});
["change", "item_add", "item_remove", "dropdown_open", "dropdown_close"].forEach(event => {
select.on(event, (...args) => {
console.log(event, args);
});
});Это формирует полную трассировку поведения экземпляра и упрощает поиск причин некорректной работы.
Особое внимание требуется при синхронизации внешнего состояния (например, формы или state-менеджера) с внутренним состоянием Tom Select. Основные проблемы возникают при:
options;Контроль синхронизации выполняется через явное сравнение состояний:
console.log("internal:", select.items);
console.log("external:", externalState);При повторной инициализации на одном и том же DOM-элементе могут возникать утечки состояния. Отладка включает проверку:
if (select) {
select.destroy();
}Контроль уничтожения экземпляра предотвращает дублирование обработчиков и некорректное поведение интерфейса.