Подборка Chrome-расширений для веб-разработки
iMacros — расширение, которое помогает в тестировании веб-страниц. Вместо того, чтобы самостоятельно проделывать одни и те же действия на странице, разработчику нужно лишь записать требуемую последовательность действий в iMacros и запускать расширение тогда, когда это необходимо.
Расширение способно работать с сайтами, реализованными при помощи технологий Java, Flash, Flex, Ajax и Silverlight.
Расширение для тех, кто любит «поиграть со шрифтами» — позволяет экспериментировать со всем спектром шрифтов из библиотеки Google Fonts, не внося изменений в код страницы. Можно менять не только сам шрифт, но и его размер, стиль написания и так далее.
Пригодится, по словам автора материала, для того, чтобы проверить, как выглядит шрифт, перед тем, как вносить фактические изменения в код страницы.
Расширение для Google Chrome, которое позволяет выделять и копировать текст даже с картинок — будет полезным, по мнению Cretive Bloq, всем, кому хоть раз в своей работе приходилось иметь дело со встроенным текстом.
Расширение, которое позволяет мгновенно определить, какой шрифт использован на той или иной странице, не производя почти никаких дополнительных действий — наведя курсор мыши на надпись.
YSlow — инструмент, который не только проверяет скорость загрузки той или иной веб-страницы, но и подсказывает разработчику, что её тормозит. Для этого расширение проверяет сайт на соответствие 23 из 34 правил производительности, сформулированных командой компании Yahoo.
Целый набор полезных инструментов для управления элементами сайта — например, для анализа веб-ресурсов и макетов, тестирования кода и мгновенного изменения параметров и внешнего вида страницы.
Расширение для автоматической проверки, удовлетворяет ли сайт основным принципам SEO, достаточно ли он производителен и удобен для пользователя. Результаты проверки представляются в виде своеобразного чек-листа — можно посмотреть более подробную информацию и рекомендации по каждому из невыполненных пунктов, а также моментально исправить ошибки.
Позволяет в автоматическом режиме сохранять любые изменения, внесённые в код страницы при помощи инструментов Chrome DevTools. Как отмечает автор материала, инструмент помогает разработчикам сэкономить большое количество времени.
Расширение, при помощи которого можно «превратить» любую страницу в структурную схему компоновки материала — wireframe. Позволяет разработчикам и веб-дизайнерам не выходя из браузера ознакомиться с компоновкой любой страницы в сети.
Ripple Emulator — расширение-эмулятор для Google Chrome, которое позволяет тестировать веб-сайты на различных мобильных платформах с различными разрешениями экрана. Может быть использовано в сочетании с другими расширениями для тестирования и отладки ресурсов.
Streak — расширение, которое позволяет превратить почтовый ящик на Gmail в CRM-систему. Можно отслеживать статус сделок и переговоров, которые ведутся в электронной почте с контрагентами, использовать Streak для обработки запросов пользователей продукта и отслеживания исправлений присланных ошибок и так далее.
Расширение для быстрого поиска по популярному ресурсу для разработчиков Stack Overflow.
Позволяет получить мгновенный доступ к документации по PHP 5.5 из браузера.
PerfectPixel — расширение для Google Chrome. Оно позволяет «наложить» на веб-страницу полупрозрачную сетку и сверять по ней заданные расстояния. Можно накладывать и другие изображения — например, первоначальный макет — чтобы убедиться, что получившаяся страница в точности ему соответствует.
Инструмент для просмотра исходного кода страниц и редактирования CSS-кода.
Можно менять тени, окружности бокса и так далее с помощью перетаскивания ползунка. После внесения изменений можно скопировать получившийся код и заменить его в коде сайта.
16. Chrome Sniffer
Расширение для браузера, которое определяет, какие JavaScript-библиотеки, фреймворк или CMS используются на ресурсе.
User-Agent Switcher — это расширение, которое позволяет «маскировать» браузер Google Chrome под Internet Explorer, Opera или любой другой браузер.
Встроенный эмулятор Internet Explorer для Chrome.
Простой и бесплатный онлайн-редактор изображений. Позволяет «захватывать» изображения или делать скриншоты браузера — и сразу же редактировать их при помощи расширения для Chrome.
Расширение, которое помогает адаптировать веб-сервисы для тех пользователей, которые страдают дальтонизмом — демонстрируя разработчику, как сайт видят те, кто страдает этим заболеванием. Позволяет веб-дизайнерам и разработчикам создавать более доступные сервисы.
Простой инструмент, который помогает определить высоту, ширину и положение любого элемента на странице.
Расширение, которое проверяет веб-страницу на наличие «битых» или неправильных ссылок.
Расширение, которое помогает не столько в разработке, сколько в поиске вдохновения и хороших фотографий. Показывает на каждой новой вкладке в Google Chrome одно изображение с сервиса Flickr. При нажатии на него пользователь переходит на страницу автора, где может ознакомиться с другими его работами.
Расширение для браузера, похожее на предыдущий плагин в этом списке — только вместо фотографий из Flickr в новой вкладке пользователь видит признанные произведения искусства — например, полотна кисти Ван Гога или Мане.
Официальное расширение от Google для сжатия трафика, которое включает экономию трафика в браузере Google Chrome.
РРасширения для дизайнеров
Расширение поможет узнать понравившийся вам шрифт на любом сайте. Это полезная вещь особенно для тех, кто еще плохо сочетает шрифты и с трудом представляет, как должен выглядеть шрифт, соответствующий теме сайта. Т.е. мне.
Дает возможность поиграть со шрифтами онлайн на открытом сайте. Иногда это помогает визуально понять, почему дизайнер выбрал именно этот шрифт для своего сайта.
Предлагает список разрешений экранов различных гаджетов и подстраивает размер окна браузера под выбранное вами разрешение.
4. Page Ruler
Линейка доступная прямо в окне браузера. Полезно, когда выверяешь точное положение объектов на экране.
5. Eye Dropper
Пипетка, которая дает номер понравившегося вам цвета в окне браузера. Очень удобно. Лично для меня выбор цвета — это пока самая адовая бездна. Поэтому зачастую для этого я использую свою жену — визажиста, которая отлично разбирается в сочетаемости и в игре цвета. Или использую готовые варианты, например,
ColorClaim бородатого Van Shneider’a
Или наборы готовых палитр на Open Color
Еще полезное:
СSS-shack — расширение для chrome, которое позволяет создавать слои и стили и затем сохранять их в css.
Momentum — превращает каждую новую вкладку в красивое, вдохновляющее фото. Еще здесь есть бесполезный to-do list, настраиваемый список закладок и строка для записи своей главной цели на день.
Pocket — я, например, только недавно начал им пользоваться, не смотря на то, что все это делают давно. До этого все ссылки кидал в свое облако в телеграм.
Источник: vk.ru