GrabCSS: Извлеките чистый HTML и CSS из любого веб-элемента
GrabCSS, разработанный Шнайдером Дамьеном, является расширением Chrome для быстрого извлечения кода компонентов с живых веб-страниц. Он копирует чистый, отформатированный HTML и CSS, когда вы наводите курсор на элемент, разрешая CSS-переменные и унаследованные правила, чтобы выходные данные работали самостоятельно для прототипирования, аудита и обучения. Возможности включают Scoped CSS, Inline Styles, вывод Tailwind, захват анимации и псевдосостояний, навигацию по DOM с помощью клавиатуры и проверки контраста WCAG. Инструмент нацелен на фронтенд-разработчиков, UI/UX-дизайнеров, веб-аудиторов и студентов, которым нужно быстро получить читаемый код компонентов.
Создает лаконичный, удобочитаемый CSS, исключая вычисленный шум
GrabCSS извлекает сфокусированные правила, а не длинный список вычисленных свойств, отображаемых в панелях инспектора браузера. Расширение разрешает CSS-переменные и унаследованные декларации, чтобы фрагменты работали автономно, и форматирует вывод для соответствия общим рабочим процессам. Варианты вывода включают опцию с областным CSS, которая использует чистые имена классов, опцию встроенных стилей и опцию классов Tailwind CSS, что облегчает адаптацию вставленных компонентов по сравнению с сырыми вычисленными стилями.
Поддерживает точный выбор и быстрое захватывание кода с помощью управления наведением и клавиатуры
Выборщик показывает плавающую панель, когда активен, позволяя вам инспектировать элементы при наведении и копировать отформатированный код одним щелчком. Навигация по DOM с помощью клавиатуры использует стрелки вверх и вниз для перемещения между родительскими и дочерними элементами для точного таргетинга. Экстрактор захватывает анимации, переходы и псевдосостояния, такие как :hover, а проверки контраста WCAG выполняются на наведенных текстовых элементах для помощи в базовом обзоре доступности.
Обрабатывает локально, подходит для рабочих процессов Chromium и выступает в качестве легковесной альтернативы DevTools
Вся обработка происходит в браузере без сбора внешних данных и без необходимости в учетной записи, поэтому захваты остаются на машине. Расширение устанавливается в Chrome и других браузерах на основе Chromium, таких как Microsoft Edge и Brave, что упрощает добавление в существующие настройки разработки. Разработчик позиционирует инструмент как легковесную альтернативу копанию в DevTools, получившую похвалу за быстрый, чистый вывод. Отсутствие синхронизации на основе учетной записи означает, что централизованное обмен фрагментами требует дополнительных шагов.
Практичный выбор для индивидуальных рабочих процессов, с компромиссами для командного обмена
GrabCSS является прагматичным выбором для индивидуальных практиков фронтенда и студентов, которым нужны компактные, редактируемые фрагменты компонентов на одном компьютере. Его дизайн, ориентированный только на браузер, способствует локальному контролю и быстрой экстракции, хотя тот же дизайн означает, что он не предоставляет синхронизацию на основе аккаунта для командных или многопользовательских библиотек. Выбирайте его для быстрого, ручного захвата; полагайтесь на отдельную общую библиотеку, когда требуется совместное распределение.
