Режим Inspect (выбор компонента на странице)
Режим Inspect на вкладке Props позволяет выбрать интересующий фрагмент интерфейса непосредственно на странице и после клика сузить список компонентов до поддерева, связанного с выбранным узлом. По смыслу это близко к выбору элемента в инструментах разработчика браузера, однако результатом здесь становится фильтрация таблицы Props, а не переход к DOM-структуре.
Общее описание вкладки Props см. в разделе Основные возможности.
Запуск и остановка
Кнопка Inspect находится на панели инструментов вкладки Props (иконка указателя) и включает режим выбора элемента на странице для фильтрации списка компонентов.
Перед активацией режима список компонентов автоматически обновляется, чтобы структура дерева и данные соответствовали текущему состоянию страницы.
По умолчанию при включении Inspect Mode интерфейс инспектора в режиме overlay временно скрывается, чтобы не перекрывать элементы страницы. Это поведение можно изменить в настройках Options → Inspect Mode → Hide overlay while inspecting.
Повторное нажатие Inspect отключает режим выбора, не сбрасывая уже применённый фильтр.
Клавиша Escape отменяет текущий режим инспекции без выбора элемента.
При переключении вкладки инспектора или закрытии панели режим выбора автоматически сбрасывается.
Поведение на странице
После включения Inspect поверх страницы активируется режим захвата указателя: движение мыши и выбор элемента обрабатываются независимо от обычного поведения страницы, включая элементы, которые в обычном режиме не принимают пользовательские клики.
Выбор привязывается не к произвольному DOM-узлу, а к ближайшему элементу, связанному с инстансом Vue.
Пока курсор находится над страницей, элемент под ним подсвечивается, рядом может отображаться всплывающая подсказка с краткой информацией:
- имя компонента;
- описание корневого DOM-элемента (тег, часть класса или
id); - количество props;
- число дочерних связанных элементов.
Тема подсказки (светлая или тёмная) соответствует текущим настройкам инспектора.
Элементы интерфейса Vue Inspector (overlay, шеврон, вспомогательные панели режима Inspect) исключаются из области выбора и не участвуют в определении компонента.
Если в настройках включено скрытие overlay во время инспекции, после завершения выбора или отмены режима интерфейс возвращается в исходное состояние.
Результат выбора
После выбора элемента на странице:
- режим Inspect завершается;
- в таблице Props остаются компоненты, относящиеся к выбранному корню;
- в верхней панели появляется индикатор Filtered, показывающий, что список ограничен выбранным поддеревом.
Нажатие на Filtered снимает ограничение и возвращает полный список компонентов после обновления данных.
Повторный запуск Inspect при уже активном фильтре позволяет выбрать другой корневой элемент и заменить текущую область фильтрации.
Ограничения и типичные ситуации
- Если под курсором отсутствует связанный Vue-элемент, выбор не приведёт к фильтрации списка.
- При сложной вложенности DOM результат может соответствовать ближайшему связанному компоненту, а не визуально ожидаемому уровню.
- Режим Inspect влияет только на состав списка компонентов; избранное, чёрный список и поиск продолжают применяться поверх текущего фильтра.
Подробности см. в разделах Избранное и Чёрный список.