9 расширений браузера Chrome для веб дизайнера


Содержание

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

31 декабря 2020 | Опубликовано в статьюшечки | 1 Комментарий »

Chrome — мощный, быстрый и безопасный браузер, и что еще отличным его делают многочисленные расширения, доступные для скачивания, которые сделают ваше пользование браузером еще удобнее. Эти расширения действительно полезная штука, ведь они позволяют настроить Chrome под себя практически до мелочей. Это увеличивает функциональность программы и увеличивает продуктивность вашей работы.

Расширений множество, их предельно просто установить. Все что вам нужно — просто зайти в Chrome Web Store и нажать кнопку install. Всё. Приложение автоматически окажется в вашем браузере.

Но сегодня мы хотим рассказать о расширениях, которые пригодятся веб-дизайнеру.

MagiCSS
MagiCSS — это CSS-редактор в расширении, который используется прямо внутри страницы. Это просмотр изменений CSS в реальном времени, и создал его Priyank Parashar. Все что вам нужно — запустить MagiCSS и написать ваш код CSS, который будет тут же применен.

CSSViewer
CSSViewer — крутое расширение, которым очень легко пользоваться. Вы просто кликаете по иконке на панели, затем наводите мышь на любой элемент, чей код хотите просмотреть.

CSS-Shack
CSS-Shack — расширение, которое позволяет вам создать стили слоя и экспортировать их в отдельные CSS/файлы. Принцип работы как в графических редакторах.

CSS Shapes Editor
CSS shapes editor — расширение для редактирования в реальном времени объектов CSS. Этот редактор прост в использовании и пригодится вам в работе.

Web Developer Checklist
Это расширение нужно каждому веб-дизайнеру. Web developer checklist проверяет любую страницу на наличие ошибок.

Check My Links
Check My Links — расширение, которое исследует выбранную вами страницу и подсветит действующие и битые ссылки. Это отличный способ сэкономить время, если вам нужно проверить все ли ссылки на сайте работают.

Dimensions
Dimensions — очень полезное расширение для измерения размеров на экране. Вы можете измерять ширину и высоту объектор, расстояние между ними и многое другое.

Responsive Web Design Tester
Responsive web design tester — простое расширение для Сhrome, которое проверяет является ли ваш сайт полностью адаптивным.

PerfectPixel
PerfectPixel позволяет разработчикам создавать полупрозрачное изображение поверх страницы, чтобы провести сравнение вплоть до пикселя.

Instant Wireframe
При помощи этого расширения вы можете просмотреть макет в виде таблицы любой интересующей вас страницы.

SnappySnippet
SnappySnippet — расширение, которое извлекает CSS & HTML из выбранного DOM-элемента. Это позволит вам высылать код на CodePen, jsFiddle или JS Bin одним кликом.

CSS3 Generator
CSS3 generator автоматически генерирует нужный вам код CSS. Это удобный инструмент для всех веб-дизайнеров.

WordPress Style Editor
WordPress style editor позволяет исследовать таблицу стилей вашего WordPress и сделать исправления прямо в CSS. Вы можете вносить изменения в таблицу стилей без FTP-программ.

Perfmap
Perfmap — полезное расширение, которое создаст тепловую карту вашего сайта, проверяя элементы по необходимому времени загрузки в браузере.

Page Ruler
Page Ruler позволяет рисовать линейки на любом выбранном вами сайте, представляя ширину, высоту и положение любого элемента.

ColorZilla
ColorZilla добавляет в ваш браузер инструменты по работе с цветом. У вас появится пипетка, цветоподборщик, палитра и генератор градиента.

Fontface Ninja
Fontface ninja — крутое расширение, которое распознает любые шрифты. Вы сможете найти название любого шрифта, который вам понравится, чтобы позже использовать его в своих проектах.

45to75
45to75 считает количество символов, помогая вам оптимизировать длину строки. Расширение поможет вам убедиться в том, что количество символов находится между 45 и 75, и что они хорошо различимы на любом устройстве.

ZenHub
ZenHub — отличное расширение для ведения проектов, созданное для GitHub. Это доска задач со списком дел, которая поможет вам сэкономит время.

Minimalist Markdown Editor
Minimalist markdown editor — расширение, которое позволяет просматривать синтаксис markdown во время того как вы печатаете. Вы также можете конвертировать markdown в HTML-файл.

Полезные расширения Google Chrome для программиста

Работа программиста настолько сложна и разнообразна, что в ней просто не обойтись без помощи различных инструментов. Подготовил список из 34 полезных расширений Google Chrome, которые облегчат вашу жизнь и сэкономят время.

Если вы любите GitHub и помногу читаете код, то, вероятно, знаете, как неудобно устроен обзор GitHub-файлов онлайн. Теперь этот процесс можно упростить при помощи расширения Octotree. Здесь предоставляется панель инструментов с удобной навигацией, также поддерживающая приватные репозитории.

Это расширение позволяет разработчикам накладывать изображения полупрозрачным слоем поверх HTML и делать попиксельное сравнение.

Удобный и простой плагин, отображающий как объем отдельного репозитория, так и размер кажого файла в нем.

4. Refined Github

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

Плагин, который предлагает широкие возможности визуального редактирования стилей CSS.
При помощи данного расширения можно редактировать основные стили CSS3 прямо на сайте.

Расширение для быстрой работы с Chrome Developer Tools.
Создает меню ссылок для быстрой навигации по вашему коду.

Расширение упрощает читаемость JSON. Имеет подсветку синтаксиса, отступы, кликабельные ссылки.

EditThisCookie — это менеджер cookie. С его помощью вы можете добавлять, удалять, изменять, искать, защищать и блокировать cookie

Инструмент для отладки приложений с использованием Redux.

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

Плагин показывает статистику загрузок пакета на сайте NPM.

12. RailsPanel

Расширение для разработки Rails приложений, которое будет обрабатывать лог файл. Получите доступ ко всей информации о запросах вашего Rails приложения прямо в консоли.

Простое расширение отладки, профилирования и трассировки для Xdebug

Resolution Test — поможет при тестировании веб-приложений на разных разрешениях и размерах экрана. Выбрать распространенное разрешение можно из списка, или же ввести необходимые размеры вручную. Это расширение изменяет размеры браузера и эмулирует ваше приложение в нужном разрешении экрана.

Расширение для просмотра используемых на сайтах цветов и ассетов: иллюстраций, текстовых документов, файлов вёрстки, видеофайлов.

Расширение помогает быстро найти Android SDK на официальном сайте разработчика.

WhatRuns позволяет увидеть все фреймворки и инструменты, обеспечивающие работу сайта, включая WordPress и другие материалы, такие как Google Analytics.

Расширение пригодится тем, кто хочет собрать всю необходимую для авторизации на своих сайтах информацию в одном месте. WordPress Site Manager сохранит вашу информацию и обеспечит доступ к главным страницам ваших сайтов прямо из браузера.

Расширение позволяет определить, каким образом был разработан тот или иной веб-сайт.

Расширение для того, чтобы увидеть, как сайт будет выглядеть на разных устройствах.

Stylebot — это расширение для браузера Chrome, которое позволяет настраивать отображение страниц в браузере согласно своим предпочтениям. Причем делается это легким и удобным способом, с мгновенным отображением изменений, так что справиться сможет любой человек, без необходимости знания HTML и CSS.

Расширение позволяет получить мгновенный доступ к документации по PHP 5.5 из браузера.
Трудно запомнить каждую функцию, и если раньше вы тратили часы на поиск в Google, то это расширение облегчит вам жизнь.

23. Restlet Client — REST API Testing

Автоматизируйте свои тесты API с помощью этого расширения.

С помощью расширения сможете создавать дизайн и экспортировать его в CSS файл для использования на сайте. Оно поддерживает слои и содержит множество инструментов, которые можно использовать и в стандартном фоторедакторе.

Это расширение предоставляет удобную и автономную площадку для веб-экспериментов.
Идеально подходит для разработчиков, которые хотят экспериментировать или практиковаться в HTML/CSS/JS. Работает без подключения к интернету.

При просмотре репозитория на github.com, в котором есть файл package.json, это расширение будет анализировать зависимости в пакете и отображать ссылки с описанием для них чуть ниже файла README.

Плагин расширяет инструментарий разработчика, добавляя инструменты для отладки и профилирования AngularJS

Расширение для редактирования HTML/CSS/JavaScript и отладка JavaScript с использованием IDE JetBrains.

Расширение отображает ошибки PHP и дампы в консоли Google Chrome и всплывающих окнах уведомлений.

С помощью расширения, вы сможете заполнять данные форм и делать POST, PUT, GET, DELETE запросы, делать запросы к RestFul сервисам, смотреть ответы от сервера и многое другое.

31. DevTools Autosave

Плагин позволяет автоматически сохранять любые изменения в CSS или JS с помощью инструментов среды Chrome Dev к его исходному файлу.

Плагин для проверки и просмотр документов JSON. Умеет автоматически делать форматирование, подсветку синтаксиса и прочие удобства для повышения читаемости JSON.

Расширение позволяет переключаться между обычной диаграммой вклада на GitHub и версией изометрического пиксельного искусства.

34. OctoLinker

Расширение обеспечивает быструю навигацию по коду благодаря превращению элементов кода (например, include, require или import) в кликабельные ссылки. Переход по такой ссылке позволяет найти первоисточник. В зависимости от языка программирования расширение показывает исходный файл или же переносит пользователя на внешний сайт.


Надеюсь вы нашли для себя что-нибудь новое.
Мой список неполный, напишите в комментарии, какими расширениями вы пользуетесь и можете порекомендовать.

Мой телеграм-канал (@iscanner), пишу о Web и App аналитике

Расширения Google Chrome для веб-дизайнеров

В далеком 2008 году, когда Google выпустила Chrome, одним из его явных недостатков было отсутствие того разнообразия расширений, какими мог похвалиться Firefox. Но сейчас браузер от поискового гиганта обладает большим количеством Google Chrome-расширений для веб-дизайнеров.

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

Для изображений и заметок

Почему бы не сделать скриншот?

Расширение Blipshot позволяет вам создать скриншот всей страницы (а не только ее видимой части), просто кликнув на значок расширения в браузере:

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

Чтобы важные данные всегда были под рукой

С помощью расширения Evernote Web Clipper можно фиксировать идеи для дизайна, которые встретились вам в Интернете, и делиться ими со своей командой:

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

Сделанным скриншотом можно поделиться, отправив приглашение по электронной почте с правами на просмотр или редактирование.

Pin It Button также позволяет сохранять интересные варианты дизайна на свой board в Pinterest:

Однако у расширения от Pinterest нет функционала для пометок, поэтому в Pinterest удобней добавлять просто какие-то идеи, которые можно пересмотреть и обсудить позже.

Редактируйте изображения прямо в браузере

Pixlr Editor — это редактор изображений, который позволяет выполнять все важные операции прямо в браузере:

  1. Обрезать и переворачивать изображение.
  2. Выполнять выделение с помощью Lasso и Magic Wand.
  3. Создавать и редактировать слои.
  4. Определять цвета с помощью пипетки, работать с инструментами Dodge и Burn.
  5. Использовать базовые фильтры.
  6. Настраивать яркость, контрастность и уровни.
Цукерберг рекомендует:  С++ - C++ Код функции system()

Для шрифтов

Что это за шрифт?

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

А если попробовать по-другому?

С помощью расширения Google Font Previewer for Chrome можно выбирать шрифт из каталога Google Font API и применять его к различным частям текста на странице или определенному CSS-селектору:

Благодаря этому расширению вам не нужно вносить правки в саму HTML-страницу, чтобы быстро проверить, как тот или иной шрифт будет выглядеть на сайте.

Для определения размеров и цветов

Расширение MeasureIt! представляет собой линейку, с помощью которой можно измерять объекты на странице:

А вот с помощью Dimensions можно измерить расстояния между объектами на макете в формате PNG или JPG, просто открыв его в Chrome:

Eye Dropper — простое, но полезное расширение, которое позволяет узнать RGB и хэш-код цвета, который использован на странице, не открывая ее код. В общем, аналог пипетки из Photoshop:

А если нам нужно узнать не отдельный цвет, а составить целую палитру для изображения? Тогда на помощь придет Palette for Chrome, которая справляется с этой задачей за считанные секунды. Мы просто выбираем, какую именно палитру нужно создать (пользовательскую или одну из предложенных):

Затем расширение генерирует для нас палитру с RGB и HEX-кодами использованных в изображении цветов:

Для проверки верстки и адаптивности

Если вы создаете адаптивные странички, то вам не обойтись без расширения Responsive Inspector Reloaded (обновленной версии Responsive Inspector). С его помощью можно просматривать запросы media query, которые прописаны для сайта:

PerfectPixel by WellDoneCode позволяет наложить на веб-страницу полупрозрачное изображение, чтобы проверить точность верстки:

А чтобы не закрывая Chrome проверить, как будет выглядеть страница на разных экранах, можно воспользоваться Window Resizer:

Но Google Chrome расширения для веб-дизайнеров связаны не только с выполнением стандартных задач. Если вы установите себе расширение Dribbble New Tab, то на новой вкладке браузера будут отображаться самые популярные изображения за день с Dribbble:

А если вы частенько заглядываете на такие сайты, как Behance, Techcrunch, Mashable или Awwwards Winners, то увидеть отображать на новой вкладке все самое новое и интересное поможет вам расширение Muzli — Design Breakfast:

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

Нужен MVP, разработка под iOS, Android или прототип приложения? Ознакомьтесь с нашим портфолио и сделайте заказ уже сегодня!

10 Отличных Расширений Google Chrome Для Работы Веб-Дизайнера

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

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

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

В связи с этим, я решила познакомить вас с некоторыми полезными расширениями, которые способны значительно облегчить вашу работу, как веб-дизайнера.

WhatFont

Учитывая тысячи и даже миллионы сайтов, которые мы просматриваем ежедневно, всегда найдется что-то, что привлечет внимание дизайнера – виджет, динамичная функция или восхитительный шрифт, который вы хотели бы использовать в своем очередном проекте, но понятия не имеете, как он называется. Это та ситуация, когда расширение WhatFont придет на помощь. С ним вы сможете изучить все шрифты на странице и быстро определить их названия, чтобы приступить к их поиску. Кроме того, расширение предоставляет возможность определить относится ли шрифт к категории бесплатных или премиум-шрифтов, а также находится ли он в базе Google Fonts или Typekit.

Font Playground

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

User-Agent Switcher

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

Yslow

От того, насколько быстро загружается ваша страница зависит, сумеете ли вы удержать пользователей. Согласитесь, мало кому хочется сидеть и ждать, пока он сможет полностью увидеть контент, который ему нужен. Чтобы подобного не случилось с вашим сайтом, используйте расширение Yslow, позволяющее проверить, как быстро загружается ваша страница, а также определить, какие элементы замедляют загрузку, если таковые существуют.

Web Developer checklist

Работа веб-дизайнера заключается не только в создании красивого дизайна, но и в том, чтобы сделать сайт, который будет идеально функционировать и отвечать всем необходимым параметрам. С расширением Web Developer checklist вы сможете легко и быстро проверить ваши страницы на соответствие SEO, скорость загрузки, видимость и юзабилити. Если в процессе работы вы, к примеру, забыли проставить мета-заголовок, то расширение тут же уведомит вас о данной проблеме. Если же вы хотите более тщательно проверить веб-страницу, то для этого имеется раздел «Больше информации в помощь», который находится в нижней части страницы и предоставляющий более детальный список для проверки.

Responsive Web Design Tester

Все больше пользователей предпочитают выходить в Интернет через свои мобильные устройства, что означает, при создании очередного сайта веб-дизайнер должен уделить особое внимание тому, как он будет выглядеть на этих самых устройствах. А если учитывать, что с каждым годом появляется все больше разных моделей, дизайнерам становится труднее соответствовать им. Однако расширение Responsive Web Design Tester поможет вам справиться с этой задачей значительно быстрее. С его помощью вы сможете протестировать свой дизайн на различных устройствах и расширениях экрана, чтобы убедиться, что он одинаково хорошо выглядит на каждом из них и является действительно отзывчивым.

Instant Wireframe

Есть проекты, которые требуют гораздо больше времени для того, чтобы их усовершенствовать и завершить. Бывают моменты, когда вы просматриваете какие-то сайты и думаете о том, насколько великолепную работу проделали дизайнеры и разработчики, чтобы результат получился именно таким, а сам веб-сайт выглядел идеально и сбалансированно. С расширением Instant Wireframe вы сможете включить каркасный просмотр страницы, что позволит вам подробно изучить страницу (уже опубликованную или локальную), просмотреть ее структуру, а затем возможно реализовать подобное в своих будущих проектах.

PerfectPixel

Нет ничего хуже, чем создать потрясающий дизайн, а после его перевода в код обнаружить, что сайт не совсем совпадает с тем, что было создано изначально. В этом случае расширение PerfectPixel вам просто необходимо. Благодаря ему вы сможете создавать веб-сайты, которые будут в точности соответствовать тому, что вы создали – вашему дизайну. С помощью простых действий вы можете разместить поверх вашей страницы полупрозрачное изображение вашего дизайна, чтобы проверить, совпадают ли они вплоть до каждого пикселя.


Chrome Palette

Как часто у вас случаются ситуации, когда вы находите идеальное изображение для вашего дизайна, но не уверены в том, какую цветовую схему лучше использовать, чтобы оно гармонично вписалось в дизайн? Стоит отметить, что это частая проблема для многих дизайнеров. Однако с Chrome Palette вы решите данную незадачу в два счета. Расширение создаст для вас 64 цветовые палитры для выбранного изображения, которые вы сможете использовать в качестве вдохновения для вашего проекта.

Page Ruler

Весьма простое, но при этом очень полезное расширение, которое представляет собой обыкновенную линейку, при помощи которой вы сможете с легкостью определить высоту, ширину, а также положение любого элемента на вашей странице.

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

С момента своего появления браузер Google Chrome отличился хорошей скоростью работы, простотой и удобством, чем с первых дней завоевал массу поклонников. В то же время, на Хром обрушилось много «критики» от людей которые привыкли к удобным плагинам на Firefox — плагины были одним из факторов, которые не позволяли использовать Google Chrome в качестве привычного рабочего инструмента. В их числе были веб-дизайнеры, веб-мастера, разработчики и др.

К счастью, эти времена давно остались позади и сегодня для Google Chrome разработано (или адаптировано) огромное количество расширений (Extentions). Давайте рассмотрим те что будут полезны веб-дизайнеру или веб-мастеру.

Обновление 19.08.2020: Спустя несколько лет мы выпустили еще одну (более новую) статью по данной теме, но с небольшим уклоном в веб-дизайн — смотрите 10 лучших расширений Chrome для дизайнеров — там все приложения 100%-работающие и практически не повторяются с теми, что описаны здесь.

Web Developer

Web Developer — это не один, а целый набор инструментов для дизайнера и веб-разработчика. С помощью этого расширения вы можете получить информацию о том или ином элементе страницы, стилях, изображения и прочее. Лично я использую Web Developer но только под Firefox, чаще всего с его помощью просматриваю страницы в размере 1024*768 для корректного отображения в меньших мониторах, тестирую и правлю CSS на лету, использую для валидации, можно удалить Cookies и еще много чего.

Firebug Lite

Firebug Lite — облегченная версия популярного плагина Firebug (известного так же на Firefox). Расширение представляет из себя инспектор элементов и удобный инструмент отладки. В Lite-версии отсутствует Net-панель и JavaScript debugger. Для опытных разработчиков, думаю, нет смысла рассказать в чем преимущества Firebug.

CSSViewer

С помощью CSSViewer вы можете быстро посмотреть набор стилей для любого элемента страницы. Простой, но очень удобный плагин. Насколько я знаю в Firebug и Web Developer есть тоже что-то подобное, но если не нужны другие функции этих расширений, то можно установить это куда более простое.

Window Resizer

Window Resizer позволяет вам посмотреть как ваша страница будет выглядеть при различных разрешениях экрана. Имеется предустановленные форматы мониторов, ноутбуков и мобильных устройств, что выгодно отличает это расширение Google Chrome от того же Web Developer, где (насколько я знаю в Firefox) нужно самому создавать размеры для проверки.

HTML Val >

Согласитесь, каждый раз заходить на сайта W3C чтобы проверить валидность кода не очень удобно? Расширение HTML Validator делает процесс удобным и практически молниеносным. В одной из прошлый статей Tod’s Blog я рассматривал вопрос валидности HTML в том числе с использованием noindex. После обсуждений пришел к выводу, что она хоть и не является обязательным на 100% условием успешного сайта, но поможет выявить ошибки верстки, которые (по возможности) лучше всего исправить. Кстати, если сравнивать с тем же Web Developer, при валидации в нем вас перебрасывает на сайт W3C где можно посмотреть ошибки, но нет просмотра в текущем окне как это показано для Google Chrome на картинке выше.

PHP Consol

PHP Consol — мощный инструмент отладки PHP. Причем, данное расширение не такое простое каким кажется с первого взгляда (полный набор функций вы можете изучить на странице расширения). Консоль позволяет увидеть ошибки, исключения и разные отладочные сообщения.

ColorPicker

ColorPicker — это «пипетка» для Google Chrome. С помощью этого расширения вы можете определить значение цвета в любой области страницы. Основные особенности плагина:

  • — Регулируемая область пипетки — от 1 до 101 пикселя (вы можете определить значение цвета определенного пикселя или области);
  • — Проверка на совместимость (соответствие) с WCAG 2.

Одним словом — архиважный и очень удобный инструмент для дизайнера.

Chrome Palette

Chrome Palette — еще одно полезное расширение для работы с цветом. Благодаря Chrome Palette можно за считанные секунды сформировать палитры из любого изображения:

Font Editor

Расширение Font Editor позволит вам посмотреть как будут выглядеть те или иные шрифты (включая гарнитуру, начертание, размер шрифта и прочее) на любом сайте:

Chrome Page Extended

Chrome Page Extended нельзя назвать чисто «дизайнерским» плагином, зато он поможет вам управлять (в том числе и с помощью горячих клавиш) всеми имеющимися (установленными) расширениями. Надеюсь эти 10 расширений для Google Chrome повысят вашу производительности и эффективность в этом, безусловно, очень перспективном браузере! И если раньше одним из немногих останавливающих факторов от его использования был недостаток расширений Google Chrome, то сегодня этой преграды нет.

Цукерберг рекомендует:  Чтобы знать количество посетителей и не заходить к себе на сайт в статистику - Как поставить яндекс

9 расширений браузера Chrome для веб дизайнера

Помимо быстроты и удобства браузер Хром обладает еще и массой полезных расширений для дизайнеров и веб-разработчиков. Многими из них я с удовольствием пользуюсь. Среди моих фаворитов расширение для распознавания шрифта, определения цвета и табличка с размерами картинки. Очень интересен инструмент линейка, позволяющий измерять объекты. Расширение проверки почты от Google очень полезно и ненавязчиво. Если нужно быстро посчитать количество символов в выделенном абзаце, то пожалуйста. есть соответствующий инструмент. Также в тему придутся укорачиватель ссылок, валидатор html кода и визуальный маркер закрытых ссылок.

1. WhatFont
Замечательный инструмент, с помощью которого можно идентифицировать любой шрифт на странице в интернете. Я сама с удовольствием им пользуюсь.

2. Eye Dropper
С помощью этого расширения можно определить цвет в любой точке веб-страницы. В правом нижнем углу монитора появится окошко с параметрами цвета, на который указывает курсор.

3. Window Resizer
Это расширение изменяет размер экрана для эмуляции различных разрешений монитора. В выпадающем меню выбирается нужный размер экрана.

4. Image Size Info
Очень полезный инструмент для дизайнера. Если подвести курсор к картинке и в меню правой кнопки мыши выбрать соответствующий пункт, то получим табличку с размерами картинки, ее весом и адресом.

5. Screen ruler
Если активировать это расширение, то на экране появится линейка. с помощью которой можно измерить расстояние в пикселях как по горизонтали, так и по вертикали. Есть дополнительные настройки внешнего вида линейки.

6. Google Mail Checker
Отображение количества непрочитанных сообщений в почтовом ящике Google Mail. Можно также нажать кнопку, чтобы открыть папку.

7. Word Count
Очень удобное расширение для подсчета слов и символов в выделенном тексте.

8. Tape
Это расширение включает измерительные линейки с помощью которых можно разметить веб-страницу онлайн и получить все размеры сетки в пикселях. Управляется с помощью командных клавиш.

9. URL Shortener

10. SkHTML
Расширение, которое позволяет быстро тестировать свой код в режиме реального времени. Достаточно ввести код в верхнее окошке и в нижнем вы увидите результат, как это выглядит.

11. 960 Grid System
960 Grid это общепринятый шаблон, сетка дизайна, удобный для конструирования макетов. Если сайт построен по такому принципу, то с помощью этого расширения можно подсветить всю разметку цветом.

12. Статистика LiveInternet.ru
Быстрый просмотр статистик и рейтингов открытого сайта LiveInternet. Отображает информацию о сайте, страница которого сейчас открыта в браузере.

13. Web Developer
Это расширение добавляет кнопку на панели инструментов с различными инструментами для веб-разработчиков.

14. Nofollow eyes
Наглядно подсвечивает цветом и пунктиром ссылки с nofollow и noindex атрибутами.

15. Alexa Traffic Rank
Это расширение представляет информацию и статистику от Alexa Traffic Rank.

16. QR Code
Это расширение генерирует QR code для текущей веб-страницы.

17. Validity
Быстрая проверка на предмет наличия ошибок кода.

18. Check My Links
Поиск битых ссылок на странице.

19. Font Size Increase
Быстрое изменение размеров шрифта на странице.

20. Кнопка +1
Добавление +1 к текущей странице.

Webtun.com — веб обозреватель

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

Мне нравится Google Chrome. Его простота, скорость и работа – на высоте, и в этом не может быть никаких сомнений. Тем не менее, простота в использовании может оказаться проблемой, особенно для нас, веб-дизайнеров, которые привыкли к Firefox аддонам типа Web Developer. Я распрощался с Google лишь потому, что в 2008 году у него не было такого аддона.

Итак, запускайте Chrome и будьте готовы повысить свою продуктивность!

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

Устали от поисков цветовой схемы из изображения? Chrome Palette с легкостью решит вашу проблему: он создаст до 64 цветовых палитр из изображения с веб-сайта, которые вы сможете применить в своем проекте, или которые станут вашими идейными вдохновителями.

Colour Tweaker, как и Color Picker, может преобразовать цвет веб-сайта, но своим методом. Просто вставьте CSS-селектор в это расширение, затем «захватите» цвет из текста, определите на свое усмотрение его фон и границы.


Теперь вам не придется гадать и переключаться между программами, так как Font Editor позволит вам быстро изменить такие настройки как размер, высоту строки и тип шрифта.

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

Это расширение обязательно должно быть в арсенале каждого веб-дизайнера и разработчика. Все опции Web Developer – от просмотра скрипта до отображения информации об объекте — нацелены на то, чтобы предоставить вам всю нужную информацию об определенном сайте. Расширение обладает такими полезными инструментами, как селектор цвета, механизм проверки допустимости и др.

Легковесный и удобный в использовании инструмент для разработчика, похожий на Web Developer. Pendule располагает такими свойствами, как механизм проверки допустимости, просмотр стиля и источника.

Firebug Lite отличается от варианта, предложенного Firefox, но схож с ним в визуальной подаче, HTML и DOM элементах, а также блочной моделью. Более того, вы можете изучать элемент HTML при помощи мыши и редактировать свойства CSS.

Stylebot предоставляет вам возможность изменять стиль любого веб-сайта, не используя CSS код, благодаря чему вы можете обойтись без утомительной печатной работы. Вероятно, самой значительной характеристикой данного расширения можно назвать возможность генерировать CSS код каждый раз, когда вы захотите внести в веб-сайт свои изменения.

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

Перезагружает таблицу стилей CSS без обновления всей страницы, что значительно сокращает время ожидания. Это особенно необходимо дизайнеру в условиях медленной работы интернет-соединения.

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

Расширение очень похоже на Internet Explorer. Это своего рода ваш Internet Explorer в Chrome, который поддерживает множество стандартных опций IE (в том числе возможность открывать много вкладок).

С помощью Window Resizer вы можете проверять совместимость разрешения экрана вашего сайта со стандартными и заданными пользователями.

Это одно из лучших расширений для проверки допустимости, которое способно проверить HTML код веб-страницы как автоматически, так и вручную. Пользователи могут выбрать и просмотреть результат проверки в веб-странице или в новой вкладке.

Благодаря различным темам и операциям над шрифтом, Sight облачает исходный текст веб-сайта в визуально более привлекательную форму.

Вас одолели PHP ошибки, и вы не знаете, как с ними справиться? PHP Console поможет вам тем, что в уведомлениях расскажет об ошибках и исключительных ситуациях, расположит сообщения об отладке.

javascript API Search оказывает поддержку Chrome Omnibox, или так называемой адресной строке, в поиске javascript функций онлайн с опцией автозаполнения. Если приложение не может отыскать нужную функцию, вам будут предложены результаты сопутствующего поиска с Google Codesearch, Development and Coding Search и Mozilla Developer Network Search.

Наряду с тем, что jQuery зарекомендовал себя как лидирующую javascript библиотеку, которая улучшает пользовательский опыт, jQuery API Search предоставляет вам возможность осуществлять поиск в JQuery API из Chrome Omnibox. Просто введите в омнибоксе «jq”, затем нажмите пробел, — и jQuery готов к работе!

Как и jQuery API Search, PHP Search осуществляет через Chrome Omnibox поиск PHP кода для вашего дальнейшего использования.

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

Speed Dial – это классическое расширение, которое преобразовывает новую вкладку Chrome в заранее заданные визуальные закладки со ссылками и эскизами сайтов. Вы даже можете установить фоновую тему или изображение по своему вкусу и усмотрению.

С PopChrom вы можете установить свои горячие клавиши для текстовых фраз типа «ty» для «thank you». Клавиша запуска нужна для того, чтобы преобразовать сокращение в определенные текстовые фразы, поэтому выбирайте такое сочетание клавиш, которое не занято другими опциями.

Quickrr Productivity Kit предлагает в ваше распоряжение набор базовых, но, тем не менее, полезных инструментов, среди которых переводчик, калькулятор, конвертер величин и многое другое.

Воспользовавшись легким для настраивания аккаунтом, вы можете получить доступ к этому диспетчеру задач. С его помощью можно вносить и редактировать задания, которые вам нужно выполнить. Самое лучше в данном расширении – это то, что ваши задания хранятся в сети, поэтому доступ к ним можно получить через любой Chrome, на котором установлено данное расширение.

Теперь вы будете знать, сколько времени потратили на выполнение определённого задания или посещение веб-сайта. Кроме того, Ananke Timer поддерживает различные форматы отслеживания времени и позволяет просматривать данные за прошедшее время, которые сохраняются в истории.

Chrome Toolbox, созданный Google, предлагает вам такие пользоательские функции, как вкладка модификации поведения, восстановление данных и создание быстрых клавиш, с помощью которых можно запускать заданные ссылки.

Никому не нравится кликать несолько раз для того, чтобы попасть на нужную страницу. Для устранения этой проблемы и разработано расширение Chrome Page Extended – ваша самая быстрая горячая клавиша для получения доступа ко всем нужным страницам Chrome, в том числе к странице Расширений.

С AddJump вы можете быстро запустить приложение для Chrome из панели инструментов браузера.

У вас слишком много закладок и привести их порядок просто невозможно? Bookmark Bar Switcher позволит вам создать абсолютно новую панель закладок, между которыми вы сможете с легкостью переключаться.

Вы может сохранить свои windows сессии и позднее воспроизвести их на любом компьютере. TabCloud экономит много времени, ограждая пользователя от повторного открытия веб-сайта из другой части папки закладок.

Similar Pages, разработанный поисковой системой Google, отыскивает в сети веб-контент, похожий на тот, который вы читаете и о котором хотели бы узнать больше.

Universal Search обеспечивает вас поисковой строкой с возможностью поиска в Wikipedia, Bing и других поисковиках. Поисковая строка появится, когда вы выделите любой кусок просматриваемого текста.

Замечательное расширение, которое получает любую часть веб-сайта и помечает ее кружочками, прямоугольниками, стрелками, линиями и текстом. Впоследствии вы можете отправить скриншот в формате PNG на свой компьютер или в сеть.

Официальное расширение от Evernote, которое сохраняет в заметках любое ваше открытие в сети, а затем загружает его в Evernote. Clip To Evernote также осуществляет поиск и синхронизацию сохраненных заметок.

Используйте Diigo для того, чтобы выделить, пометить или оставить частные или публичные заметки на веб-странице. Таким образом, вы сможете просмотреть этот материал в любое удобное для вас время.

Thinkery выполняет роль вашего онлайн мозга. Сохраните адрес и выбранный текст в расширении, чтобы вернуться к нему позднее.

Создание заметок с MyNotes больше не будет представлять для вас никакой сложности. Расширение позволяет открыть выбранный текст в новой закладке всего одним щелчком по контекстному меню.

Наткнулись на интересную веб-страницу, но у вас нет времени, чтобы ее просмотреть? Кликните правой кнопкой мыши, и страница сохранится в Google Bookmarks для вашего последующего изучения.

Это, наверное, единственное расширение для поиска высококачественных фото-материалов от известных агентств (Fotolia, Dreamstime, Shutterstock).

В связи с тем, что ряды расширений и приложений Chrome постоянно ширятся, существует большая вероятность того, что сторонники Firefox обратятся к Google Chrome и сделают его своим веб-браузером по умолчанию. А вы бы выбрали Google Chrome с тем числом расширений и приложений, которые он может предложить в данный момент? Какое именно расширение, приложение или функция заставили вас перейти на Google Chrome? Поделитесь с нами своими мыслями!

Цукерберг рекомендует:  Где лучшие программисты У нас в России

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

Как мы все знаем, Chrome является самым популярным браузером сегодня. Мне нравится его простота, скорость и производительность. Лично я считаю, что Chrome по-прежнему остается лучшим веб-браузером. И еще одна вещь, которую мне нравится в нем, — это множество расширений Chrome, которые делают веб-браузер более мощным и помогают его пользователям стать более продуктивными.

Сегодня я собираюсь поделиться с вами своими любимыми расширениями Chrome для веб-дизайнеров и разработчиков сайтов. Так как я сам веб-дизайнер, то это те расширения, которые я регулярно использую, а другие действительно стоит упомянуть. Я старался изо всех сил выбирать лучшее. Надеюсь, вы найдете их полезными и сможете повысить свою производительность.

1. What Font!

Очень полезное расширение chrome, которое позволяет вам идентифицировать шрифты, используемые на веб-сайте, просто наводя на них. Простое и элегантное решение для получения информации о веб-шрифтах. Кроме того, он также может обнаруживать службы, используемые для работы веб-шрифтов. Поддерживает Typekit и API шрифтов Google. Ссылка: install What Font

2. Muzli

Расширение Muzli имеет важное значение для каждого веб-дизайнера, разработчика сайтов. Вдохновение — важная часть процесса проектирования, а Музли — отличный инструмент, который действительно поможет нам на этом этапе проектирования. Это инновационный способ изучения и объединения самых свежих проектов, UI, UX и интерактивных новостей и снимков со всего Интернета. Это расширение Chrome даст вам все необходимое для вдохновения. Просто добавьте его в Chrome, вы никогда не пропустите что-то новенькое. Это обязательно! Ссылка: установить Muzli.

3. CSS Peeper

CSS Peeper — это средство просмотра стилей, предназначенное для веб-дизайнеров. Цель этого расширения Chrome — позволить дизайнерам сосредоточиться на дизайне и потратить как можно меньше времени на копание в коде. Расширение предоставляет вам простой и красивый пользовательский интерфейс для отображения и проверки стилей хорошо организованным и структурированным способом. Ссылка: установить CSS Peeper

4. ColorZilla

Популярное расширение разработчика Firefox и теперь доступно для Chrome. Colorzilla имеет множество функций, таких как eyedropper, расширенный набор цветов, генератор градиента CSS, анализатор цвета веб-страницы и другие полезные инструменты работы с цветами сайта. Ссылка: установить ColorZilla

5. Wappalyzer

Если вы хотите проверить технологии, используемые на вашей любимой веб-странице, то Wappalyzer — это подходящее расширение Chrome для вас. Он обнаруживает системы управления контентом, платформы электронной коммерции, веб-серверы, фреймворки JavaScript, инструменты аналитики и многое другое. Это удивительно полезный инструмент для разработчиков сайтов. Ссылка: установить Wappalyzer

6. Awesome Screenshot

Еще одно популярное расширение chrome, которое позволяет делать скриншоты страниц. Это дополнение делает скриншоты всех страниц или только видимых частей страницы, которые затем можно редактировать перед сохранением. Вы можете добавлять аннотации, комментарии и делиться скриншотом одним нажатием. Отличное расширение Chrome для скриншотов экрана. Ссылка: установить Awesome Screenshot

7. Dimensions

Dimensions — это расширение Chrome для дизайнеров и разработчиков сайтов для измерения размеров экрана. Он позволяет легко измерять количество пикселей между элементами: изображения, поля ввода, кнопки, видео, gif, текст, значки, почти все, что вы видите в браузере. Ссылка: установить Dimensions

8. Lorem Ipsum Generator

Как следует из названия, это расширение Chrome, которое обеспечивает элегантный и быстрый способ создания текста по умолчанию или генерации lorem ipsum. Настройки по умолчанию оптимизированы для быстрого использования, но также могут быть настроены для получения идеального текста, необходимого для ваших проектов. Ссылка: установить Lorem Ipsum Generator

9. Palettab

Palettab помогает вам обнаруживать цветовые палитры и шрифты каждый раз, когда вы открываете новую вкладку браузера. Хороший инструмент для поиска идей шрифта и цвета. Это расширение использует шрифты Google и палитры COLOURlovers. Просто добавьте его в Chrome и будете получать вдохновение каждый раз, когда вы нажимаете кнопку новой вкладки! Ссылка: установить Palettab

10. Генератор CSS3


CSS3 Generator — удобный инструмент, который генерирует код для вашего CSS. Это расширение генерирует CSS-код для text-shadow, hex / RGBA, колонки, градиенты, переходы, фильтры и многое другое. Ссылка: установить генератор CSS3

11. Grammarly

Я не являюсь носителем английского языка, и мой английский действительно не так хорош, поэтому это расширение Chrome действительно важно для меня. Как дизайнеры, мы также должны обратить внимание на орфографию и грамматику, используемые в нашем контенте, и Grammarly — идеальный инструмент для этого. Он проверяет вашу орфографию и грамматику, когда вы пишете, помогает убедиться, что все, что вы пишите не имеет ошибок. И он делает больше, чем это — он также может найти некоторые сложные ошибки, которые часто остаются незамеченными. Ссылка: установить Grammarly

12. StayFocusd

Если вы хотите повысить производительность, то это обязательное расширение для вас. StayFocusd повышает вашу производительность, помогая вам сосредоточиться на вашей работе, ограничивая количество времени, которое вы тратите на сторонние сайты. Расширение позволяет установить выделенное время для сайта, и как только это время будет использовано, сайт будет недоступен для остальной части дня. Расширение научит, как меньше времени тратить на социальные сети, развлечения и онлайн-игры. Ссылка: установить StayFocusd

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

Лучшие расширения Google Chrome для веб-разработчиков и дизайнеров [Издание 2020 года]

Расширения – лучший способ добавить функции в Google Chrome .

Я собираюсь поделиться 3-мя полезными расширениями Google Chrome, которые помогут вам, если вы веб-разработчик и дизайнер .

Google Chrome – очень популярный браузер с over 64% of market share где Internet Explorer вряд ли 11%. С каждым выпуском Google делает Chrome лучше, добавляя больше функциональности и исправляя ошибки, а разработчики предлагают несколько отличных расширений для Chrome.

Вот лучшие плагины для веб-разработчиков Google:

1. CSS Peeper

CSS Peeper является одним из my favorite и хромовое расширение. Я использую его каждый день на работе и для личного пользования. Это слишком хорошо

Просто установите расширение и загрузите свой сайт. Просто наведите курсор мыши на любой элемент, и вы увидите все свойства CSS для того же.

Вот образец:

2. Ежедневно – источник для занятых разработчиков

Если вы ищете все developer news со всего мира, тогда это расширение для вас. Я использую его, чтобы получать последние новости, которые мне нравятся. Ежедневно разработчики делали это для разработчиков, чтобы помочь нам сосредоточиться на коде.

Вам не нужно постоянно искать новости развития в сети.

3. Веб-разработчик

Это также мое любимое расширение Chrome. Она имеет bunch of options под каждой категорией .

  1. запрещать
  2. Печенье
  3. CSS
  4. формы
  5. Изображений
  6. Информация
  7. Разнообразный
  8. Контур
  9. Изменение размера

Просто установите его и you will be amazed сколько информации вы можете получить для конкретного сайта.

4. Контрольный список веб-разработчиков

Ищете что-то, чтобы проверить ваше последнее развертывание ? Нужно найти ошибку? Хотите узнать об ошибках HTML или структурированных данных на вашем сайте? Тогда вы находитесь в правильном месте.

Я не использую это ежедневно, но после изменения темы WordPress , изменения CSS или других важных изменений я проверяю все элементы HTML и CSS, используя это расширение.

Он предоставляет подробную информацию о следующих элементах:

  1. SEO
    • Добавьте значение с помощью микроданных
    • Мета-описание
    • Robots.txt существует
  2. мобильный
    • CSS Media Queries
    • Метатег Viewport
  3. Юзабилити
    • Favicon
    • Используйте дружественные URL
    • Проверка HTML
  4. доступность
    • Достопримечательности WAI-ARIA
    • Используйте атрибуты ‘alt’ на изображениях
  5. Интеграция среды
    • OpenGraph
    • Windows
    • Apple iOS
  6. Спектакль
    • Количество элементов DOM (635)

5. Screencastify – Экранный видеорегистратор

Хотите выполнить перекодировку экрана для своего клиента? Нужно отправить короткие видео? Тогда это действительно cool extension для тебя.

  • Он захватывает рабочий стол, вкладку браузера или веб-камеру
  • Это повествует с аудио вашего микрофона
  • Даже вы можете настроить разрешение и FPS
  • Хотите встроить свою веб-камеру в скринкаст? Это обеспечивает эту утилиту

6. Marker.io: визуальный инструмент обратной связи для команд

Вы веб-профессионал ? Веб-разработчик? Работаете в качестве члена команды QA и хотите поделиться визуальной обратной связью с вашей командой, расположенной в удаленном месте? Тогда этот инструмент для вас.

Он помогает вам захватывать все точки данных и создавать билеты с помощью любимых инструментов интеграции вашей компании.

В настоящее время поддерживаются интеграции:

  • Trello
  • Jira
  • GitHub
  • Асана
  • GitLab
  • Bitbucket
  • здание клуба
  • Базовый лагерь
  • Pivotal Tracker
  • Работа в команде
  • Zapier

Я надеюсь, что вы найдете это Developer and Designer Chrome Extension полезно. Дайте мне знать, если я пропустил какое-либо очень популярное и фундаментальное расширение для разработчиков, и я постараюсь добавить его здесь.

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

31 декабря 2020 | Опубликовано в статьюшечки | 1 Комментарий »

Chrome — мощный, быстрый и безопасный браузер, и что еще отличным его делают многочисленные расширения, доступные для скачивания, которые сделают ваше пользование браузером еще удобнее. Эти расширения действительно полезная штука, ведь они позволяют настроить Chrome под себя практически до мелочей. Это увеличивает функциональность программы и увеличивает продуктивность вашей работы.

Расширений множество, их предельно просто установить. Все что вам нужно — просто зайти в Chrome Web Store и нажать кнопку install. Всё. Приложение автоматически окажется в вашем браузере.

Но сегодня мы хотим рассказать о расширениях, которые пригодятся веб-дизайнеру.

MagiCSS
MagiCSS — это CSS-редактор в расширении, который используется прямо внутри страницы. Это просмотр изменений CSS в реальном времени, и создал его Priyank Parashar. Все что вам нужно — запустить MagiCSS и написать ваш код CSS, который будет тут же применен.

CSSViewer
CSSViewer — крутое расширение, которым очень легко пользоваться. Вы просто кликаете по иконке на панели, затем наводите мышь на любой элемент, чей код хотите просмотреть.

CSS-Shack
CSS-Shack — расширение, которое позволяет вам создать стили слоя и экспортировать их в отдельные CSS/файлы. Принцип работы как в графических редакторах.

CSS Shapes Editor
CSS shapes editor — расширение для редактирования в реальном времени объектов CSS. Этот редактор прост в использовании и пригодится вам в работе.

Web Developer Checklist
Это расширение нужно каждому веб-дизайнеру. Web developer checklist проверяет любую страницу на наличие ошибок.

Check My Links
Check My Links — расширение, которое исследует выбранную вами страницу и подсветит действующие и битые ссылки. Это отличный способ сэкономить время, если вам нужно проверить все ли ссылки на сайте работают.

Dimensions
Dimensions — очень полезное расширение для измерения размеров на экране. Вы можете измерять ширину и высоту объектор, расстояние между ними и многое другое.

Responsive Web Design Tester
Responsive web design tester — простое расширение для Сhrome, которое проверяет является ли ваш сайт полностью адаптивным.

PerfectPixel
PerfectPixel позволяет разработчикам создавать полупрозрачное изображение поверх страницы, чтобы провести сравнение вплоть до пикселя.

Instant Wireframe
При помощи этого расширения вы можете просмотреть макет в виде таблицы любой интересующей вас страницы.

SnappySnippet
SnappySnippet — расширение, которое извлекает CSS & HTML из выбранного DOM-элемента. Это позволит вам высылать код на CodePen, jsFiddle или JS Bin одним кликом.

CSS3 Generator
CSS3 generator автоматически генерирует нужный вам код CSS. Это удобный инструмент для всех веб-дизайнеров.

WordPress Style Editor
WordPress style editor позволяет исследовать таблицу стилей вашего WordPress и сделать исправления прямо в CSS. Вы можете вносить изменения в таблицу стилей без FTP-программ.

Perfmap
Perfmap — полезное расширение, которое создаст тепловую карту вашего сайта, проверяя элементы по необходимому времени загрузки в браузере.

Page Ruler
Page Ruler позволяет рисовать линейки на любом выбранном вами сайте, представляя ширину, высоту и положение любого элемента.

ColorZilla
ColorZilla добавляет в ваш браузер инструменты по работе с цветом. У вас появится пипетка, цветоподборщик, палитра и генератор градиента.

Fontface Ninja
Fontface ninja — крутое расширение, которое распознает любые шрифты. Вы сможете найти название любого шрифта, который вам понравится, чтобы позже использовать его в своих проектах.

45to75
45to75 считает количество символов, помогая вам оптимизировать длину строки. Расширение поможет вам убедиться в том, что количество символов находится между 45 и 75, и что они хорошо различимы на любом устройстве.

ZenHub
ZenHub — отличное расширение для ведения проектов, созданное для GitHub. Это доска задач со списком дел, которая поможет вам сэкономит время.

Minimalist Markdown Editor
Minimalist markdown editor — расширение, которое позволяет просматривать синтаксис markdown во время того как вы печатаете. Вы также можете конвертировать markdown в HTML-файл.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих