В этом посте перечислены лучшие бесплатные плагины для проверки CSS для Chrome . Используйте плагины для проверки CSS-кода любого HTML-элемента на любой веб-странице одним щелчком мыши или простым наведением курсора. Большинство из этих плагинов даже позволяют легко экспортировать код CSS. Плагины, которые я упомянул здесь, абсолютно бесплатны и позволяют неограниченное использование для проверки и получения кода CSS. Вы просто устанавливаете эти расширения Chrome из интернет-магазина Chrome, а затем можете просто начать использовать их на любом веб-сайте, который хотите извлечь и сохранить код CSS.
Если вы являетесь разработчиком внешнего интерфейса или дизайнером пользовательского интерфейса, то вам нужны инструменты проверки CSS. Чтобы получить идеи от уже созданных веб-сайтов, вам нужны эти виды инструментов CSS, чтобы получить информацию о цветах, типографике и других параметрах CSS. Здесь я упомяну 4 таких плагина для Chrome, которые вы можете использовать для этого. Все, что вам нужно сделать, это просто активировать эти плагины, перейти к элементу HTML, а затем просто навести на него курсор, чтобы получить код CSS. После получения кода просто измените его, а затем используйте его в своих проектах. Или вы можете использовать эти плагины из любопытства, чтобы посмотреть, как строится сайт.
CSSViewer
CSSViewer - один из лучших бесплатных плагинов для проверки CSS, который вы можете использовать. Здесь вы можете просто активировать его, а затем просто навести курсор мыши на любой элемент HTML, чтобы увидеть его CSS-код в наложении. Вы можете зафиксировать наложение, которое оно показывает, чтобы изучить параметры CSS и проанализировать их. Не только это, но и всего одна горячая клавиша, вы можете получить код, а затем скопировать его, чтобы сохранить его. Это расширение Chrome для проверки CSS с открытым исходным кодом, и вы можете найти его полный исходный код на GitHub.
Вы просто используете ссылку выше, чтобы установить это расширение, а затем начать использовать его. После того, как вы установили его, вы можете просто нажать на его значок, а затем просто навести указатель мыши на любой элемент на веб-странице. Всплывающее окно будет отображаться сразу со всеми свойствами CSS этого элемента. Если вы хотите заморозить всплывающее окно, просто нажмите клавишу «F», а затем тщательно проанализируйте код CSS. Затем вы можете просто нажать на зачищенную комбинацию клавиш, чтобы код CSS был передан вам в редактируемом режиме, чтобы вы могли скопировать его и сохранить.
CSS Picker
CSS Picker - еще одно бесплатное расширение Chrome для проверки CSS на веб-сайтах. Просто установите его, и тогда все готово, это так просто. В один клик, он может принести вам все правила CSS, связанные с выбранным элементом DOM. Самое приятное, что вы можете скопировать весь код CSS из его всплывающего интерфейса, а затем использовать его где угодно. Помимо всего кода CSS, он показывает вам отдельные переменные классы, используемые в CSS для их ясного понимания. Это простое и очень эффективное расширение Chrome, которое может использовать каждый.
Просто установите его сверху и перейдите на целевой веб-сайт. Далее, вы просто используете правый элемент меню, который он добавляет в Chrome, чтобы вызвать его. Просто используйте его на любую кнопку, изображение, текстовое поле или любой элемент, и тогда всплывающее окно покажет сразу. Вы можете увидеть весь код CSS там, а правила разделены вкладками. Итак, просто проанализируйте код CSS, который он показывает, и скопируйте его, чтобы использовать его в своей работе. Кроме того, расширение находится на стадии бета-тестирования, поэтому могут возникнуть некоторые проблемы, в этом случае либо переустановите расширение, либо перезагрузите страницу.
SnipCSS
SnipCSS - это своего рода плагин Chrome для проверки CSS. Здесь он открывает захваченную CSS-оду в отдельном окне, откуда вы можете скопировать его и проанализировать. И вы можете сделать это в один клик после включения расширения. Он не только показывает вам код CSS, но даже показывает HTML-код соответствующего элемента вместе с деталями шрифта. В него включена анимация, которая, впрочем, бесполезна, но делает процесс просмотра CSS интересным для просмотра.
После установки расширения из магазина Chrome вы можете начать использовать его на любом сайте. Для начала вам необходимо включить расширение, нажав на его значок. Далее вы можете просто нажать на любой элемент на странице, чей код CSS вы хотите проверить. Когда вы выбираете элемент, потребуется несколько секунд, чтобы отсканировать код CSS. Вы можете увидеть анимированную птицу, которую он добавляет туда. Когда он закончится, он покажет вам весь код CSS в новом окне. Код редактируемый, и вы можете просто скопировать его и использовать где угодно.
Exadiv
Exadiv - последнее бесплатное расширение Chrome для проверки CSS, которое вы можете использовать. Здесь он работает так же, как и вышеупомянутые плагины с некоторыми отличиями. В отличие от других плагинов в списке, он не показывает код CSS при наведении. Вам нужно будет нажать на значок или элемент HTML. Однако он может отображать только свойства CSS элемента, поскольку вы не можете экспортировать код CSS в целом. Вы просто активируете расширение, чтобы использовать его, или используете опцию контекстного меню, которую оно добавляет в Chrome, чтобы проверять элементы для просмотра и извлечения их свойств CSS.
Установите его из интернет-магазина Chrome, и тогда вы сможете просто начать использовать git на любом веб-сайте. Чтобы использовать его, просто нажмите на его значок, а затем нажмите на любой элемент, который вы хотите проверить CSS. Он покажет вам все свойства CSS этого элемента для анализа. Вы можете просто проанализировать это, а затем делать то, что вы хотите. Поскольку здесь вы не можете экспортировать код, просто используйте плагин, чтобы узнать об определенных аспектах CSS элемента на веб-странице, с которой вы можете столкнуться.
Подписывайтесь на канал Полезный WEB !