Дизайн

19 полезных расширений для Chrome для веб-дизайнеров

Google Chrome — один из самых популярных браузеров, которым ежедневно пользуются миллионы человек, в том числе дизайнеры, веб-разработчики, верстальщики.

Сегодня мы хотим поделиться с вами еще одной интересной подборкой Chrome-приложений (прошлая подборка), в которой мы сосредоточим внимание на 19 самых важных расширениях для веб-дизайнеров, верстальщиков и веб-разработчиков.

1. Awesome Screenshot: Capture & Anno

Создавайте скриншоты всей страницы или ее фрагментов, подписывайте созданные изображения, делайте аннотации, размывайте чувствительные данные, – практически все функции делаются в один клик!
screen-shot-2016-10-26-at-09-14-33

2. Window Resizer

Масштабируйте размер окна браузера для эмуляции разных разрешений экрана.
screen-shot-2016-10-26-at-09-14-41

3. CSS Grady

Еще никогда ранее не было так просто генерировать CSS-градиенты. К тому же, у вас будет возможность получить код, адаптированный под разные браузеры.
screen-shot-2016-10-26-at-09-14-56

4. ColorPick Eyedropper

Инструмент пипетки для веб-разработчика. Выбирайте цвета с любого фрагмента веб-страницы.
screen-shot-2016-10-26-at-09-15-23

5. Pixlr Express

Pixlr express представляет собой современный фото-редактор, со всеми эффектами, наложениями и рамками из популярного pixlr-o-matic, только с большим уровнем контроля. Здесь также присутствует множество настроек, стикеров и инструмент для создания текста.
screen-shot-2016-10-26-at-09-15-31

6. Pixlr Editor

Pixlr представляет многофункциональный фото-редактор прямо в вашем браузере, без необходимости что-либо скачивать и ждать.
screen-shot-2016-10-26-at-09-15-38

7. CSS-Shack

CSS-Shack позволяет вам создавать стили слоев (как в любом знакомом вам ПО для обработки изображений), и экспортировать их в отдельный CSS-файл, либо скопировать код в буфер обмена.
screen-shot-2016-10-26-at-09-15-55

8. Balsamiq Mockups

Balsamiq Mockups для Google Drive позволяет вам создавать, редактировать и делиться качественными набросками и прототипами при помощи Drive.
screen-shot-2016-10-26-at-09-16-02

9. ShiftEdit

ShiftEdit представляет собой онлайн IDE для разработки PHP, Ruby, HTML, CSS и javascript при помощи (S)FTP, Dropbox или Google Drive.
screen-shot-2016-10-26-at-09-16-08

10. Moqups

Лучшее HTML5-приложение для создания четких набросков, прототипов и интерактивных макетов.
screen-shot-2016-10-26-at-09-16-14

11. What Font

Очень полезное расширение для Google Chrome, What Font позволяет разработчикам и дизайнерам определить, какие шрифты используются на веб-странице.
screen-shot-2016-10-26-at-09-16-21

12. Web Developer

Расширение Web Developer добавляет кнопку в панель управления браузера, с помощью которой вы можете воспользоваться различными инструментами веб-разработки. Это официальная копия расширения Web Developer для Firefox.
screen-shot-2016-10-26-at-09-16-45

13. BuiltWith Technology Profiler

Chrome-расширение BuiltWith позволяет вам определить, каким образом был разработан тот или иной веб-сайт. Все что нужно, – всего лишь нажать по иконке builtwith.
screen-shot-2016-10-26-at-09-16-53

14. Sight

Sight представляет собой Chrome-расширение для подсветки кода, которое превращает процесс просмотра исходного кода в браузере в развлечение. Вы можете выбрать шаблон, шрифт, а также включить нумерацию строк. Чтобы получить определенный код, введите #ft=[syntax] рядом с URL-файла.
screen-shot-2016-10-26-at-09-17-01

15. Stylebot

Stylebot позволяет вам быстро изменять внешний вид любого веб-сайта (при помощи кастомного CSS).
screen-shot-2016-10-26-at-09-17-10

16. Google Font Previewer

Данное расширение позволяет вам выбирать шрифт из директории Google Font при помощи нескольких опций стилизации текста, а также осуществлять предварительный просмотр выбранного шрифта прямо в открытой вкладке.
screen-shot-2016-10-26-at-09-17-16

17. CSSViewer

CSSViewer представляет собой простой просмотрщик CSS-свойств для Google Chrome, который изначально был разработан Nicolas Huon, и был представлен в виде аддона для FireFox.
screen-shot-2016-10-26-at-09-17-23

18. Web Developer checklist

Этот инструмент позволяет проверить все: соответствуют ли ваши страницы SEO, юзабилити, а также их видимость и производительность (скорость загрузки страницы).
screen-shot-2016-10-26-at-09-17-31

19. Chrome Flags

Данное расширение представляет собой портированную версию FlagFox для Chrome. Оно отображает флаг страны, который указывает на расположение сайтов, которые вы посещаете.
screen-shot-2016-10-26-at-09-17-38