Проаналізуйте коди будь-якого веб-сайту з розширенням CSS Dig Chrome

З цим можна багато чого зробити Chrome DevTools від редагування живих веб-сайтів до вивчення детальних запитів HTTP. Але здатність аналізувати шаблони CSS не запеченеться в консоль.

С CSS Dig, ви можете проаналізувати всі CSS-селектори, специфічність, і унікальні властивості будь-якої веб-сторінки прямо з Chrome. Це розширення є абсолютно безкоштовним і пропонує багато можливостей для розробників інтерфейсів.

Оглядаючи таблицю стилів, ви отримаєте багато даних з панелі CSS Dig. Це може показати вам окремих селекторів, у тому числі дублікати і непотрібних рівнів специфічності.

Щоб почати, просто встановіть плагін і відкрийте вікно консолі. Ви знайдете дві вкладки у вікні копіювання CSS: Властивості і Селектори.

Ви можете переглядати результати організовані за власності (колір, межі, відступи) або селекторами (класи, ідентифікатори). Я вважаю, що вікно властивостей є найціннішим, оскільки воно дозволяє вивчити шрифти та кольори, які ви використовуєте.

Цей інструмент працює по всьому сайту для будь-якого веб-сайту, так що це також зручно для зворотне проектування будь-який дизайн. Ви можете скопіювати / вставити CSS безпосередньо з цього вікна і повторно використати його у власних проектах.

Ймовірно, найбільш поширеним випадком використання CSS Dig є очистити копії кольорів з палітри кольорів. Скільки унікальних відтінків зеленого кольору вам дійсно потрібно? Або, скільки різних шрифтів без засічок необхідно для однієї сторінки?

CSS Dig є неймовірно простим, тому не чекайте десятків функцій, таких як DevTools. Натомість цей плагін є скоріше орієнтовані на розробників інтерфейсів аудит сайтів для повторних селекторів або повторюваних властивостей.

The вихідний код Плагін доступний безкоштовно на GitHub, де ви також знайдете всі останні оновлення.