Режимы отображения (Display Mode)
В Options → General → Display Mode выбирается, где живёт интерфейс Vue Inspector относительно страницы. Доступны варианты Overlay (оверлей на странице) и DevTools tab (вкладка в инструментах разработчика браузера).
Режим DevTools доступен только в установленном расширении (Chrome / Edge). В автономном (standalone) запуске переключатель отключён: инспектор работает как оверлей на странице, отдельной вкладки в DevTools нет.
После смены режима расширение подсказывает перезагрузить страницу, чтобы применить выбор.
Overlay — оконный режим, пилюля и размер
В режиме Overlay панель встраивается поверх сайта в собственном «окне» внутри вкладки.
Пилюля (компактная кнопка с ручкой перетаскивания и стрелкой‑шевроном) — главная точка управления:
- Шеврон раскрывает или сворачивает панель с интерфейсом инспектора.
- За ручку с точками можно перетаскивать блок: при отпускании около края окна он примагничивается к верхнему, нижнему, левому или правому краю; если оставить посередине — включается плавающее окно с рамкой и тенью.
Поведение по умолчанию при первом открытии: пристыковка к нижнему краю вкладки. В этом состоянии полоса панели тянется на всю ширину окна: сайт остаётся виден сверху, инспектор занимает полоску снизу (высоту можно менять). Это и есть типичный «нижний док» с горизонтальным растяжением.
Изменение размера:
- В пристыкованном режиме на внешнем краю панели есть зацеп для растягивания (у нижнего дока это верхняя граница полосы): так меняется высота нижней и верхней пристыковки или ширина левой и правой.
- В плавающем режиме доступны углы и стороны рамки для произвольного изменения ширины и высоты.
Размеры, положение дока и координаты плавающего окна запоминаются между визитами на сайт (в пределах возможностей браузера и профиля расширения).
Показ самой пилюли на сайте в оверлее может дополнительно ограничиваться правилами Auto Run (чёрный и белый списки сайтов) — см. Автозапуск.
DevTools tab — вкладка в инструментах разработчика
Только расширение. В этом режиме интерфейс инспектора открывается как отдельная вкладка внутри штатных DevTools браузера (окно по F12 или «Просмотреть код»), а не как плавающая панель над страницей.
Удобно, если вы привыкли держать всё рядом с консолью и сетью, или не хотите перекрывать вёрстку сайта оверлеем. Перетаскивание пилюли и докинг к краям страницы относятся к режиму Overlay; в DevTools‑вкладке используется раскладка панели инструментов браузера.
После переключения на DevTools tab перезагрузите страницу и откройте DevTools — в списке вкладок панели появится Vue Inspector (или аналогичное имя панели расширения).
Обновление страницы (F5): вкладка с инспектором заново подключается к контексту этой же вкладки сайта. Ничего дополнительно «включать» после перезагрузки не требуется.
В отличие от Overlay: пока оверлей свёрнут (видна только пилюля), часть сценариев на стороне страницы может не получать полноценного канала к развёрнутой панели — тогда для срабатывания тех же Breakpoint или Mock иногда нужно сначала развернуть панель. В режиме DevTools вкладка инспектора для браузера уже активный элемент интерфейса инструментов разработчика: перехват и подмена по правилам Network работают сразу, без лишнего шага «открыть панель».
Network после F5: список запросов очищается и заполняется заново по мере новой загрузки страницы, но сам функционал вкладки Network (перехват, точки останова, mock и т.д.) готов к работе с первого момента после перезагрузки — не нужно дополнительно кликать по инспектору, чтобы «пробудить» сеть.
См. также
- Автозапуск — когда пилюля оверлея показывается автоматически
- Персонализация — тема и фон панели
- Расширение браузера