Избранное (Props)
Избранное в разделе Props — это сохраняемый список компонентов, к которым можно быстро возвращаться между сессиями работы с инспектором. Отмеченные строки поднимаются в начало таблицы, рядом с именем отображается звезда, а в шапке доступен счётчик найденных избранных на текущем экране.
Общее описание вкладки Props: Основные возможности.
Избранное для Pinia — отдельный список на вкладке Stores и в настройках Options → Pinia; здесь описаны только компоненты Vue.
Где добавить и убрать
Добавить компонент в избранное можно несколькими способами.
- В карточке компонента (детальный просмотр) — в заголовке доступна кнопка звезды, которая включает или снимает признак избранного для текущего компонента.
- Через контекстное меню строки в таблице Props — команда добавления или удаления из избранного доступна среди действий над выбранным компонентом.
- В таблице Props — быстрый клик по области звезды у строки также переключает избранное, даже если иконка ещё не отображается постоянно.
- В Options — секция Favorites в блоке настроек Props позволяет просматривать сохранённые записи, удалять их из списка и переходить к выбранному компоненту для просмотра деталей.
После изменения списка таблица обычно пересортировывается: отмеченные компоненты перемещаются выше остальных (если это не противоречит текущим фильтрам поиска).
Что именно сохраняется
Для каждой записи хранится, среди прочего:
- имя компонента;
- идентификатор для сопоставления со строкой в дереве (в том числе форма с привязкой к корневому DOM-элементу: тег и классы);
- при необходимости внутренний идентификатор узла текущей сессии (nodeId) — чтобы различать экземпляры с одинаковым именем и похожей разметкой;
- время добавления (для отображения в списке настроек).
Это позволяет списку сохраняться после перезагрузки страницы: при следующем построении дерева инспектор повторно ищет компонент по сохранённым признакам.
Как выполняется сопоставление
При открытии дерева и обновлении состояния избранного используется устойчивое сравнение идентификаторов.
- Если сохранён идентификатор в форме числового uid текущей сессии, совпадение возможно только в пределах текущего жизненного цикла дерева (после полного пересоздания uid изменится).
- Для записей с именем компонента и сигнатурой корневого элемента (тег, классы и т.д.) сопоставление опирается на эти стабильные признаки, а не на внутренний путь в дереве Vue.
Для старых записей, где сохранён только uid сессии, инспектор дополнительно может использовать метаданные компонента (имя, тег, класс), чтобы восстановить соответствие после перезагрузки.
Если на странице появляется несколько похожих кандидатов, сопоставление может выбрать другой экземпляр; в таком случае рекомендуется снять признак избранного и добавить компонент заново уже с актуального узла.
Счётчик в шапке
Рядом с полем поиска отображается бейдж вида «найдено / всего»: сколько избранных компонентов сейчас видно с учётом активного фильтра и сколько записей всего сохранено в списке.
Клик по бейджу может использоваться как быстрый переход в Options к секции избранного.
Практические советы
- Используйте избранное для опорных компонентов: шапки приложения, часто проверяемых виджетов, проблемных зон интерфейса.
- После изменений в структуре DOM полезно проверить, что избранное всё ещё связано с нужным экземпляром.
- Избранное не влияет на выполнение приложения и не связано с чёрным списком компонентов — это независимые механизмы.
См. также
- Основные возможности Props
- Чёрный список
- Персонализация / настройки
- Основные возможности Store (Pinia) — избранное для store настраивается отдельно