UI Inspector - Визуальный CSS-редактор

Визуальный CSS-редактор для браузера

Улучшите свой рабочий процесс веб-разработки и дизайна с UI Inspector — мощным расширением Chrome, которое позволяет инспектировать, редактировать и стилизовать любую веб-страницу визуально и в реальном времени. Пропустите сложности DevTools и вносите мгновенные изменения прямо на странице.

С UI Inspector вы можете:

- Инспектировать элементы — активируйте расширение и кликните на любой элемент, чтобы увидеть его атрибуты.
- Редактировать атрибуты — изменяйте стили в визуальном редакторе и видите изменения в реальном времени.
- Управлять типографикой — настраивайте шрифт, размер, начертание, высоту строки и межбуквенное расстояние.
- Настраивать макет и отступы — задавайте margin, padding, свойства отображения и выравнивание.
- Улучшать фоны и тени — применяйте пользовательские цвета, градиенты, размытие фона и эффекты теней.
- Настраивать границы — изменяйте ширину, стиль, цвет и радиус скругления границ.
- Тонко настраивать внешний вид — управляйте прозрачностью, режимами наложения и трансформациями, такими как вращение.
- Просматривать все изменения — видеть список всех обновлённых элементов в одном месте.
- Копировать CSS — мгновенно просматривайте и копируйте скомпилированный CSS ваших изменений.

---

Разблокируйте UI Inspector PRO и:

- Применяйте изменения глобально — используйте ползунок чувствительности для автоматического применения стилевых изменений к похожим элементам на всей странице.
- Шаблоны стилей — сохраняйте любой элемент как повторно используемый шаблон и применяйте его на любом сайте одним кликом.
- Экспорт в Tailwind, SCSS или JSX — копируйте изменения в формате кода, который нужен вашему проекту.
- Экспорт скриншотов — делайте PNG-скриншоты высокого разрешения отдельных стилизованных элементов.
- Экспорт в GitHub — создавайте задачу на GitHub с вашими дизайн-изменениями, скомпилированными в CSS.

---

Для кого UI Inspector?

Веб-разработчики:
- Ускорьте фронтенд-разработку: быстро находите и исправляйте проблемы с макетом или стилями, редактируя элементы на лету.
- Упростите отладку CSS: обойдите DevTools с помощью интуитивного визуального редактора.
- Экспортируйте готовый код: копируйте изменения в формате CSS, Tailwind, SCSS или JSX прямо в свою кодовую базу.

Веб-дизайнеры:
- Валидация дизайна в реальном времени: настраивайте и совершенствуйте дизайн в браузере для пиксельно точной реализации.
- Связь дизайна и разработки: эффективнее сотрудничайте, напрямую изменяя рабочие страницы.
- Сохраняйте и используйте шаблоны: создайте библиотеку повторно используемых стилей и применяйте их единообразно во всех проектах.

---

Как использовать UI Inspector

1. Активируйте расширение: нажмите на значок UI Inspector на панели инструментов браузера или нажмите Alt/Option + Shift + I.
2. Инспектируйте и редактируйте элементы: наведите курсор на любой элемент, чтобы выбрать его и мгновенно увидеть настраиваемые стили.
3. Изменяйте стили визуально: используйте интуитивный интерфейс для изменения типографики, макета, отступов, фонов, границ, теней и многого другого.
4. Сохраняйте и применяйте шаблоны: создавайте шаблоны стилей для единообразного дизайна и применяйте их к любому элементу на любом сайте.
5. Экспортируйте и делитесь: копируйте CSS в нескольких форматах, делайте скриншоты или экспортируйте изменения как задачу на GitHub.

---

Установка

Совместимо с любым браузером на базе Chromium, поддерживающим Side Panel API. Для лучших результатов убедитесь, что ваш браузер поддерживает все необходимые API. При возникновении проблем с установкой обновите браузер до последней версии и попробуйте снова.