Общие принципы интерфейса

Общие сценарии работы с панелями Vue Inspector. О том, где отображается интерфейс (оверлей, вкладка DevTools, отдельное окно), см. Режимы отображения и Установка.

Навигация

Интерфейс приложения построен вокруг двух рабочих вкладок: основной области данных и дополнительной области детализации. В адаптивном режиме вкладки могут объединяться в один рабочий экран.

Управление элементами

Во всех таблицах действия доступны двумя способами:

• через меню ⋯ в строке элемента;
• через контекстное меню (ПКМ).

Оба варианта равнозначны и используются во всех основных разделах приложения.

Верхняя панель управления

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

Поиск

Поиск является сквозным механизмом и поддерживается в основных разделах приложения.

Для поиска используется встроенный механизм среды выполнения:

• Ctrl+F — поиск через встроенный поиск браузера или DevTools.

Поведение поиска зависит от текущего режима отображения и структуры данных конкретного раздела. Фильтры по разделам (запросы, props, store) описаны в соответствующих статьях — например, Network — работа с запросами.

Горячие клавиши

Интерфейс поддерживает стандартные действия клавиатуры:

• Ctrl+F — поиск по текущему разделу (см. выше);
• Esc — отмена текущего действия, например закрытие детализации или выход из режима инспектора.

Работа с детализацией

Многие сущности поддерживают режим детализации. Открытие выполняется через выбор элемента, а выход — клавишей Esc или возвратом к предыдущему состоянию интерфейса.

Режимы отображения

В зависимости от способа запуска (Overlay, DevTools, Standalone) интерфейс может незначительно отличаться, сохраняя общую логику работы. Подробнее — Режимы отображения, расширение браузера и отдельное приложение.