Детальний CSS інспектор на кожному сайті з CSSPeeper для Chrome
Звичайна панель Chrome DevTools неймовірно потужна. Це дозволяє будь-якому користувачеві глибоко поринути в будь-яку сторінку, щоб вивчити макет сайту, CSS і навіть заголовки HTTP, якщо це необхідно.
Ви можете багато робити з інспектором CSS DevTools. Але вона не має чіткої панелі GUI, і це одна річ, яку любить кожен розробник.
Ознайомтеся з CSSPeeper, безкоштовним розширенням Chrome, який додає цей інспектор графічного інтерфейсу до вашого веб-переглядача. Вона дозволяє вивчати властивості CSS будь-якого елемента на будь-якій сторінці, хоча зараз він створений лише для Chrome.
Після встановлення ви просто відвідайте веб-сторінку та натисніть головну кнопку розширення у панелі додатків Chrome. Нове вікно інспектора з'являється у верхній частині веб-сторінки з подробицями про кожний основний елемент.
Під час перегляду сайту ви можете натиснути будь-який елемент, який ви бачите, з пунктирною схемою. Це може включати кнопки, розділи сторінок, заголовки, елементи навігації.
Звідти ви отримаєте цілий інспектор з деталізацією типографіки, вибору кольору та стилів шрифту. Це відмінний спосіб тягнути стилі безпосередньо з веб-сторінки не копаючись у коді CSS самостійно.
CSSPeeper навіть дозволяє вам вибрати відповідні кольори за допомогою вбудованого вибору кольорів і генератор колірної схеми. Ви можете експортувати зображення зі сторінок, створювати власні колірні схеми та застосуйте їх у свої власні макети з Photoshop або Sketch.
Я в першу чергу рекомендувати це розширення для дизайнерів замість розробників, оскільки це набагато більш дружній до дизайнера плагін, який витягує CSS і перетворює код на легкі для читання блоки даних.
Але цей плагін також може допомогти розробникам! Це дійсно потужний інструмент перевірки сайту для всіх типів CSS.
Погляньте на домашню сторінку CSSPeeper, щоб дізнатися більше про те, що він може зробити. На головній сторінці також міститься посилання на магазин Chrome, щоб ви могли безкоштовно встановити розширення та витягти його на тестовий запуск.
