Работа с компонентами и props
Раздел Props показывает дерево экземпляров Vue на открытой странице: имена компонентов, связь с корневым DOM-элементом и сводку по props. Детальные значения подгружаются при выборе строки; при необходимости их можно изменять и отправлять обратно в приложение (в рамках поддерживаемых сценариев).
Режим инспектора по клику, избранное и чёрный список описаны на отдельных страницах: Инспектор, Избранное, Чёрный список.
Верхняя панель управления
Поиск по компонентам
Поле поиска поддерживает несколько режимов. Активные критерии задаются фильтром Search by рядом с полем ввода. Те же параметры можно заранее настроить в Options соответствующей вкладки.
| Режим | Назначение |
|---|---|
| Name | по имени компонента |
| Label | по строке label / подходящим метаданным инстанса |
| Root | по сведениям о корневом элементе |
| Key | по именам props (в т.ч. вложенным), с углублённым поиском на стороне страницы |
| Value | по значениям props (в т.ч. вложенным), также через запрос к странице |
Для режимов Key и Value действует минимальная длина запроса (по умолчанию 2 символа; порог настраивается в параметрах поиска инспектора).
Частичное и точное совпадение. Если запрос не обёрнут в кавычки, по включённым текстовым режимам используется подстрока (без учёта регистра). Точное совпадение со всей строкой включается, если весь текст в поле поиска обёрнут в двойные кавычки "...".
Рядом с поиском доступна кнопка Inspect — выбор узла на странице для фильтрации списка; см. Инспектор.
Индикаторы состояния
Справа на панели Props отображаются вспомогательные элементы:
| Элемент | Назначение |
|---|---|
| Filtered (янтарный бейдж) | Активен фильтр по элементу с страницы (Inspect). Клик сбрасывает фильтр и возвращает полный список. |
| N или N/M | Число видимых строк после фильтра; при непустом поиске через дробь — общее число компонентов в текущем снимке. |
| Избранное ★ | Число совпавших с текущим деревом записей избранного. Клик открывает раздел Options с избранным. |
| Обновление | Кнопка Refresh и время последнего обновления снимка (lastUpdated). |
Рабочая область
Список компонентов
Слева отображается таблица компонентов. Основные колонки (набор можно включать и выключать в настройках таблицы):
- Name — имя компонента;
- Root Element — информация о корневом DOM-элементе инстанса (тег, классы, id и т.д., если доступны);
- Received — число фактически переданных props;
- Declared — число объявленных в компоненте props.
При наведении на строку в страницу отправляется подсветка соответствующего узла (чтобы визуально сопоставить строку таблицы с элементом в DOM).
Через контекстное меню и звезду доступны действия, связанные с избранным и чёрным списком.
Детализация компонента
При выборе строки элемента открывается панель детализации выбранного компонента.
Сводная информация
В верхней части панели отображаются:
- имя компонента;
- краткая информация о корневом DOM-элементе (тег и классы);
- размер сериализованных данных вкладки Received;
- строка Updated: с меткой времени последнего обновления данных узла.
Данные компонента
Ниже доступны две вкладки:
| Вкладка | Назначение |
|---|---|
| Received | фактически переданные props; поддерживается просмотр и редактирование |
| Declared | объявленные определения props (rawProps); только просмотр |
Обе вкладки доступны всегда.
Данные активной вкладки отображаются в формате JSON — в текстовом или древовидном виде в зависимости от настроек инспектора.
Редактор поддерживает копирование содержимого.
Навигация
- кнопка ← Назад закрывает детализацию и возвращает к таблице;
- Esc в режиме редактирования отменяет изменения;
- Esc вне режима редактирования выполняет возврат к списку.
Элементы управления
| Элемент | Назначение |
|---|---|
| Star | добавить или убрать компонент из избранного; доступна всегда |
| Refresh | повторно запросить данные выбранного компонента с страницы; временно недоступна во время обновления; скрывается в режиме Edit |
| Edit | перейти в режим редактирования; доступна только на вкладке Received |
Порядок кнопок в шапке справа в режиме просмотра: Star → Refresh → Edit.
Режим редактирования
Режим Edit относится только к вкладке Received.
После включения режима редактирования кнопки Refresh и Edit заменяются на Cancel и Save. Star остаётся доступной.
| До редактирования | В режиме редактирования |
|---|---|
| Refresh | Cancel — сброс черновика к последним загруженным props и выход из режима редактирования |
| Edit | Save — применить изменения в приложение |
- Save неактивна, если JSON не проходит проверку синтаксиса;
- изменения применяются только после подтверждения через Save;
- при ошибке записи режим редактирования может сохраниться — ориентируйтесь на сообщения интерфейса и консоль.
Звезда избранного в этой панели и в таблице описана на странице Избранное.
Данные карточки соответствуют последнему успешному обновлению выбранного узла: нажмите Refresh в шапке детализации, чтобы перезапросить props с страницы, или обновите общий снимок через Refresh на верхней панели вкладки Props.
Ограничения отображения
Ограничения чтения данных
Props по запросу: при открытии карточки компонента значения читаются и сериализуются для панели деталей; для тяжёлых объектов действуют ограничения сериализатора (см. ниже).
В лёгком списке таблицы передаются метаданные и счётчики без полной сериализации каждого значения на каждом обновлении.
Ограничение объёма хранения
Явного лимита «N записей как в Network» у вкладки Props нет: размер данных определяется числом компонентов на странице и политикой кэшей на стороне внедрённого сценария (очистка снимков для экономии памяти применяется там, где узел не раскрыт и не нужен).
Чтобы не блокировать основной поток страницы, при разборе props действуют ограничения, среди прочего:
- бюджет времени на один проход сериализации;
- максимальная глубина вложенности и размер массивов/объектов;
- усечение длинных строк и общий лимит числа узлов в одном ответе.
Очень большие или циклические структуры могут отображаться не полностью или с пометкой об усечении — это ожидаемое поведение защиты.
Принципы работы
Когда начинается сбор данных
Модуль Props подключается после обнаружения Vue на странице (в отличие от Network, который стартует вместе с общим сценарием инспектора). Пока приложение не инициализировало Vue или сценарий инспектора не внедрён в вкладку, список компонентов будет пустым.
После первой успешной загрузки дерево можно обновлять вручную (Refresh) или по расписанию (автообновление в Options).
Что попадает в мониторинг
- Структура — обход инстансов Vue даёт плоский список компонентов с метаданными (имя, метка при наличии, привязка к элементу, счётчики переданных и объявленных props без полной сериализации каждого значения на каждом кадре).
- Props по выбору — полные значения запрашиваются при открытии карточки (ленивая загрузка).
Через тот же канал панель запрашивает обновлённый список после Refresh, с учётом активного чёрного списка (фильтрация имён выполняется на стороне сбора данных — подробнее на странице Чёрный список).
Как устроен обмен
Панель не обращается напрямую к памяти Vue: она отправляет сообщение в контекст страницы, а инъецированный код обходит инстансы и отдаёт сериализованный результат.
Упрощённо цикл выглядит так:
// Иллюстрация: UI запрашивает список компонентов; на странице сканер собирает структуру.
const response = await bridge.send({
type: 'COLLECT_VUE_COMPONENTS',
forceRefresh: true,
blacklist: { active: ['SomeNoise'], inactive: [] },
})
// response.components — имена, uid, счётчики props, строки для Root Element…
// Полные значения props запрашиваются отдельно при открытии карточки (ленивая загрузка).Так отделяется лёгкий список для таблицы от тяжёлого чтения props только для выбранного узла.