Расширения Chrome для веб-разработчиков

Расширения Chrome для веб-разработчиков
В последние годы браузеры развивались, и к настоящему времени существует множество инструментов для разработчиков, позволяющих вам всесторонне тестировать свои веб-проекты, в первую очередь в отношении HTML, CSS и JavaScript. Таким образом, распознаются как ошибки JavaScript, так и неправильные метки CSS. Однако инструменты разработчика не могут делать все (пока). Таким образом, есть несколько полезных расширений Chrome, которые облегчат вам работу.

Хорошо иметь: расширения Chrome для веб-разработчиков

Распознавайте шрифты с помощью «WhatFont.»

Как веб-дизайнер и разработчик, вы время от времени зависаете на других сайтах, чтобы черпать вдохновение. Если, например, вы нашли на сайте шрифт, который хотели бы использовать сами, вам может помочь расширение «WhatFont».

«Какой шрифт»
«ЧтоШрифт»

Вместо того, чтобы искать имя шрифта в таблицах стилей, вы можете просто навести указатель мыши на соответствующий текст при использовании «WhatFont». Небольшая всплывающая подсказка сообщает вам название используемого шрифта. При нажатии на текст выдается дополнительная информация, например размер и цвет шрифта.

Подбор цветов с помощью «Пипетки».

Цвета можно распознавать так же, как и шрифты. Чтобы получить точный цвет с веб-сайта, вам нужно скопировать его из таблицы стилей. Если вы хотите получить цвет с изображения, все, что вы можете сделать, это сделать снимок экрана, чтобы скопировать его в редактор изображений.

«Пипетка для глаз»
«Пипетка для глаз»

«Eye Dropper» делает все это излишним. Расширение предоставляет пипетку, которая позволяет вам выбрать цвет с веб-сайта. При этом «Eye Dropper» не ограничивается элементами, которым был назначен цвет через CSS. Вы также можете получить значение цвета из изображения.

Цвет выдается в виде шестнадцатеричного значения, значения RGB и HSL, включая правильную маркировку CSS.

Отключение файлов cookie с помощью «Отключить файлы cookie».

Деактивация JavaScript или отключение кеша для веб-сайта — все это несложно благодаря инструментам разработчика Chrome. Только быстрая активация и деактивация файлов cookie невозможна напрямую в Chrome.

Для этого вам обычно нужно погрузиться в настройки. Обходной путь довольно сложен только для того, чтобы проверить, как веб-сайт реагирует на деактивированные файлы cookie.

Расширение «Отключить файлы cookie» теперь позволяет легко включать и отключать файлы cookie для веб-сайта с помощью кнопки на панели инструментов.

Измерение расстояний и размеров с помощью «Линейки страниц» и «Размеров».

Все ли элементы на вашем сайте размещены правильно? Все ли расстояния и размеры правильные? Следующие расширения
помочь вам измерить ваш сайт.

«Линейка страниц»
«Линейка страниц»

«Линейку страниц» можно использовать для размещения прямоугольника на веб-сайте либо вручную, либо путем ввода числовых значений. Здесь отображаются расстояния до всех четырех границ страницы, а также ширина и высота прямоугольника.

«Размеры»

Альтернативой является расширение «Размеры». Этот измеряет расстояния между двумя соседними элементами самостоятельно. Для этого просто поместите указатель мыши между соответствующими элементами. Две линии показывают, какое расстояние измеряется. Он всегда измеряет вертикальное и горизонтальное расстояние до соседних элементов.

Автоматически обновлять страницу после изменений с помощью «LivePage».

Обновление веб-сайта, пожалуй, одно из самых распространенных действий. В файлы HTML, CSS и JavaScript вносятся изменения, после чего их необходимо протестировать в браузере.

Расширение «LivePage» снимает с вас задачу частого ручного обновления. Всякий раз, когда ресурс, например файл CSS, был изменен на сервере, расширение автоматически обновляет страницу.

Создание скриншотов с помощью «Awesome Screenshot».

«Отличный скриншот»
«Потрясающий скриншот»

Будь то презентация в вашем портфолио или для клиента: скриншоты сайта нужны всегда. «Awesome Screenshot» позволяет делать скриншоты одним кликом. Здесь включено только содержимое текущей вкладки.

Кроме того, вы также можете решить, хотите ли вы сделать скриншот видимой области в браузере или всего веб-сайта. Также можно сделать полный скриншот длинных прокручиваемых страниц.

(дпе)