Инспектор

UI инспектора для UnoCSS: @unocss/inspector. Поставляется вместе с unocss и @unocss/vite.

Инспектор позволяет просматривать сгенерированные CSS-правила и применённые классы для каждого файла. Он также предоставляет REPL для тестирования ваших утилит на основе текущей конфигурации.

Инспектор построен на базе devframe и может быть развёрнут несколькими способами.

Vite DevTools (рекомендуется)

Когда установлен Vite DevTools (@vitejs/devtools), инспектор монтируется автоматически как док UnoCSS внутри него — без запроса авторизации, с поддержкой живых обновлений.

Статическая сборка DevTools при vite build также запекает предварительно вычисленный снимок данных инспектора в экспорт, так что анализ доступен для просмотра без dev-сервера.

Отдельный URL

Откройте localhost:5173/__unocss на вашем dev-сервере Vite, чтобы увидеть инспектор.

При первом использовании введите одноразовый 6-значный код, выведенный в терминале вашего dev-сервера, чтобы разблокировать доступ (токен запоминается для браузера). Когда активен Vite DevTools, этот URL перенаправляет в интерфейс DevTools.

ИНФОРМАЦИЯ

Отдельный URL — это устаревший способ доступа; рекомендуемый способ использования инспектора в дальнейшем — док Vite DevTools.

Другие хосты

@unocss/inspector/devframe экспортирует инспектор как переносимое определение devframe, которое может быть смонтировано любым хостом devframe:

• createInspectorDevframe(ctx) — привязывает инспектор к существующему контексту плагина UnoCSS.
• createStandaloneInspectorDevframe(options) — создаёт отдельный контекст путём сканирования файлов проекта, для хостов без интегрированного через бандлер контекста UnoCSS (например, приложение Next.js, использующее @unocss/postcss через @devframes/next).