VueCraft NPM

DevTools ​

Панель <FeatureDevTools> ​

Плавающий оверлей для инспекции и управления флагами во время выполнения.

vue
<script setup>
import { FeatureDevTools } from 'vue-feature-toggles'
const isDev = import.meta.env.DEV
</script>

<template>
  <RouterView />
  <FeatureDevTools v-if="isDev" />
</template>

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

Вкладка Flags ​

Вид по умолчанию — список всех известных флагов с полным набором элементов управления.

  • Поиск по имени флага и фильтр по источнику (url, runtime, rules, loader, static, default)
  • Каждая строка показывает: имя флага, бейдж источника, бейдж значения и контекстные встроенные бейджи:
    • ⚠ — у флага истёк срок действия
    • ⛓ — нарушение зависимости (требуемый флаг отключён)
    • 💾 — переопределение сохранено в localStorage
    • ℹ — доступны метаданные (наведите курсор для просмотра описания, владельца, тикета, даты добавления)
  • Переключение булевых флагов вкл/выкл одним кликом
  • Редактирование варианта — клик по бейджу варианта открывает встроенное редактирование; подтверждение через Enter или ✓
  • Сброс любого отдельного runtime- или URL-переопределения к исходному источнику
  • Переменные — флаги с настроенными variables показывают кнопку разворачивания ▸ N; клик открывает поля ввода по каждой переменной
  • Действия в футере: Reset all · Reload from loader · Copy URL · Export overrides as JSON · Import overrides from JSON
  • Профили — если сохранённые профили существуют, выпадающий список позволяет мгновенно переключаться между ними

Вкладка Groups ​

Показывает каждую группу, определённую в опции groups.

  • Каждая строка группы отображает: имя группы, счётчик N/M включённых, бейдж статуса ALL ON / PARTIAL и кнопки ON / OFF / reset
  • Флаги-участники показаны как цветные чипы (зелёный = включён, серый = отключён)
  • Футер: Reset all groups

Вкладка History ​

Хронологический журнал последних 20 изменений флагов, зафиксированных за сессию.

  • Каждая запись показывает: время, имя флага, бейдж источника, бейдж нового значения
  • Футер: Clear

Общее ​

  • Перетаскивание — за заголовок; ограничено границами viewport; позиция сохраняется в sessionStorage
  • Сворачивание — сворачивается в заголовочную полосу кнопкой-шевроном

Интеграция с Vue DevTools ​

Пользовательская вкладка инспектора и слой таймлайна появляются в браузерном расширении Vue DevTools, когда установлен @vue/devtools-api.

bash
npm install --save-dev @vue/devtools-api

Интеграция опциональна — плагин загружает её динамически и тихо пропускает, если пакет отсутствует или DevTools закрыты.

  • Инспектор — все флаги с бейджами значения и источника, полные метаданные в панели деталей
  • Таймлайн — каждое изменение флага логируется с предыдущим значением, новым значением и источником

Настройка не требуется — интеграция активируется автоматически в dev-режиме.