IT-инфраструктура для бизнеса и творчества

25 полезных Chrome-расширений для веб-разработчиков Статьи редакции

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

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

Расширение способно работать с сайтами, реализованными при помощи технологий Java, Flash, Flex, Ajax и Silverlight.

Расширение для тех, кто любит «поиграть со шрифтами» — позволяет экспериментировать со всем спектром шрифтов из библиотеки Google Fonts, не внося изменений в код страницы. Можно менять не только сам шрифт, но и его размер, стиль написания и так далее.

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

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

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

5. YSlow

YSlow — инструмент, который не только проверяет скорость загрузки той или иной веб-страницы, но и подсказывает разработчику, что её тормозит. Для этого расширение проверяет сайт на соответствие 23 из 34 правил производительности, сформулированных командой компании Yahoo.

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

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

Позволяет в автоматическом режиме сохранять любые изменения, внесённые в код страницы при помощи инструментов Chrome DevTools. Как отмечает автор материала, инструмент помогает разработчикам сэкономить большое количество времени.

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

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

11. Streak

Streak — расширение, которое позволяет превратить почтовый ящик на Gmail в CRM-систему. Можно отслеживать статус сделок и переговоров, которые ведутся в электронной почте с контрагентами, использовать Streak для обработки запросов пользователей продукта и отслеживания исправлений присланных ошибок и так далее.

Расширение для быстрого поиска по популярному ресурсу для разработчиков Stack Overflow.

Позволяет получить мгновенный доступ к документации по PHP 5.5 из браузера.

PerfectPixel — расширение для Google Chrome. Оно позволяет «наложить» на веб-страницу полупрозрачную сетку и сверять по ней заданные расстояния.

Можно накладывать и другие изображения — например, первоначальный макет — чтобы убедиться, что получившаяся страница в точности ему соответствует:

15. Code Cola

Инструмент для просмотра исходного кода страниц и редактирования CSS-кода.

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

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

User-Agent Switcher — это расширение, которое позволяет «маскировать» браузер Google Chrome под Internet Explorer, Opera или любой другой браузер.

18. IE Tab

Встроенный эмулятор Internet Explorer для Chrome.

19. PicMonkey

Простой и бесплатный онлайн-редактор изображений. Позволяет «захватывать» изображения или делать скриншоты браузера — и сразу же редактировать их при помощи расширения для Chrome.

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

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

Расширение, которое проверяет веб-страницу на наличие «битых» или неправильных ссылок.

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

Расширение для браузера, похожее на предыдущий плагин в этом списке — только вместо фотографий из Flickr в новой вкладке пользователь видит признанные произведения искусства — например, полотна кисти Ван Гога или Мане.

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

{ "author_name": "Дарья Хохлова", "author_type": "editor", "tags": ["\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f_\u0434\u043b\u044f_\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432","\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f_\u0434\u043b\u044f_google_chrome","\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438","\u0437\u043e\u043b\u043e\u0442\u043e\u0439\u0444\u043e\u043d\u0434","google_chrome"], "comments": 19, "likes": 104, "favorites": 68, "is_advertisement": false, "subsite_label": "dev", "id": 8572, "is_wide": true, "is_ugc": false, "date": "Fri, 05 Jun 2015 18:20:16 +0300", "is_special": false }
(function () { let cdnUrl = `https://specialsf378ef5-a.akamaihd.net/SelectelBranding/images/` let previousArticleNumber = null let currentArticleNumber = 0 let platform = 'Desktop' let articles = [ // { // name: 'camera', // url: `${cdnUrl}CameraCat`, // text: 'умную камеру для\u00A0наблюдения за\u00A0котиками', // link: '1', // num: 3 // }, { name: 'chill', url: `${cdnUrl}ChillCat`, text: 'трекер, который подскажет, когда пора отдохнуть', link: 'https://vc.ru/promo/288561-eye-tracker', num: 1 }, { name: 'cloud', url: `${cdnUrl}CloudCat`, text: 'котика: даёшь ему «пять», а\u00A0он делает бэкап в облако', link: 'https://vc.ru/dev/294799-maneki-neko', num: 2 } ] let buttonCycle = document.querySelector('.button--cycle') let buttonChoose = document.querySelector('.button--choose') let buttonMobile = document.querySelector('.button--mobile') let textField = document.querySelector('.selectel-footer-subtitle') let imageAgent = document.querySelector('.image--agent') let banner = document.querySelector('.selectel-footer') buttonCycle.addEventListener('click', cycleClick) buttonChoose.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) buttonMobile.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) let media = window.matchMedia("(max-width: 570px)") media.addEventListener('change', matchMedia) function matchMedia() { if (media.matches) { platform = 'Mobile' } else { platform = 'Desktop' } update() } matchMedia() function cycleClick(event) { sendEvent(`Promo ${articles[currentArticleNumber].num} Right`, 'Click') if (event) { event.preventDefault() event.stopPropagation() } window.open('https://vc.ru/tag/selectelDIY', '_blank') //cycle(event) } function cycle(event) { // incrementArticleNumber() textField.innerHTML = generatedText() imageAgent.src = articles[currentArticleNumber].url + platform + '.svg?3' imageAgent.setAttribute("class", "") imageAgent.classList.add('image--agent', articles[currentArticleNumber].name) banner.href = articles[currentArticleNumber].link } function update() { banner.href = articles[currentArticleNumber].link imageAgent.src = articles[currentArticleNumber].url + platform + '.svg' textField.innerHTML = generatedText() } function incrementArticleNumber() { previousArticleNumber = currentArticleNumber if (currentArticleNumber >= articles.length - 1) { currentArticleNumber = 0 } else { currentArticleNumber++ } } const sendEvent = (label, action = 'Click') => { const value = `SelectelDIY — loc: Footer — ${label} — ${action}`; if (window.dataLayer !== undefined) { window.dataLayer.push({ event: 'data_event', data_description: value, }); } }; function generatedText() { let defaultText if (platform === 'Desktop') { defaultText = `Мы тут собрали %text%. Хотите научим?` } else { defaultText = `Мы тут собрали %text%.` } return defaultText.replace('%text%', articles[currentArticleNumber].text) } function getRandom(min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min } (function create() { currentArticleNumber = getRandom(0, articles.length - 1) cycle() let page = document.querySelector('.page--entry') if (page) { function insertAfter() { let parents = page.querySelectorAll('[data-id="7"]') let referenceNode = parents[0] referenceNode.parentNode.insertBefore(banner, referenceNode.nextSibling); loaded() } setTimeout(() => insertAfter(), 0) } }()) function loaded() { banner.classList.add('loaded') } loadImages([ `${cdnUrl}CameraCatDesktop.svg`, `${cdnUrl}ChillCatDesktop.svg`, `${cdnUrl}CloudCatDesktop.svg`, `${cdnUrl}CameraCatMobile.svg`, `${cdnUrl}ChillCatMobile.svg`, `${cdnUrl}CloudCatMobile.svg?3`, ]) function loadImages(urls) { return Promise.all(urls.map(function (url) { return new Promise(function (resolve) { var img = document.createElement('img'); img.onload = resolve; img.onerror = resolve; img.src = url; }); })); } }())
0
19 комментариев
Популярные
По порядку
Написать комментарий...

Комментарий удален

На замену 23 или 24 пункту можно было поставить Momentum.

2

Зачем iMacros, когда есть Selenium?

2

PhantomJS же ещё удобнее. Зачем открывать браузер, когда можно не открывать)

0

А потом еще один пост про то как хром тормозит

2

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Font Playground безнадежно у меня глючит. Кликаешь один шрифт, а выдает другой. Почему то Open Sans отображается явно как Serif:(

1

Комментарий удален

Комментарий удален

А никто не знает плагин, чтобы быстро картинки-иконки скачивать, которые зашиты в css?

1

Поставил себе все, теперь смотрю картинки, а расширения работают за меня.

1

В подборке не хватает расширения от Similarweb!

1

Для тех, кто часто подбирает ключевые слова в вордстате http://semantica.in/tools/yandex-wordstat-assistant

1

Пипетка для снятия цвета с любого элемента
https://goo.gl/xdYHW

SnappySnippet - собирает html & CSS выбранного элемента и можно сразу открыть в Codepen и т.д.
https://goo.gl/NXCQWG

Wappalyzer - Посмотреть из чего сделан сайт и что в него напихано без регистрации и смс
https://goo.gl/6XS3a9

1

Расширение для тех, кому нужно быстро и оперативно получать информацию из сообществ вконтакте. Оно ищет новые посты в ваших сообществах и выводит их в виде уведомлений и пишет в ленту.
https://chrome.google.com/webstore/detail/groupsfeed/headefnefjnknjhghaondobjmghlbelc?hl=ru

0

Моне, пожалуйста. Спасибо.

–1

Чем вам не угодил Мане?

1

тем, что, наверное, он не настолько именит, чтобы ожидать его имя в одном ряду с Ван Гогом.
О Мане только что узнал из-за вашего коммента.
Но, справедливости ради, надо сказать, что в оригинале именно Моне (Monet).

1

Не согласна с вами насчёт именитости. Кто-то и Ван Гога знает только из-за отрезанного уха, а не его работ. Говорить об импрессионизме и не упоминать Мане — как-то странно.

2

Комментарий удален

Комментарий удален

https://chrome.google.com/webstore/detail/fast-yametrika/akhhdodonnbokbbnnojbohldoldmllon

Расширение для быстрой и удобной работы с Я.Метрикой

0

Комментарий удален

История буфера обмена. Удобно для копирования и вставки сниппетов

https://chrome.google.com/webstore/detail/clipboard-history-2/ajiejmhbejpdgkkigpddefnjmgcbkenk

0
Читать все 19 комментариев
Супермаркет шестерочка обманул меня на 2 рубля

Всем привет. Меня зовут Альберт. И я разработчик сервиса ХренПоймиЧтоНахНикомуНеУпало, и я хочу вам рассказать как нас обманывают в супермаркетах.
Короче пришел я давеча в супермаркет купить морковку, а там продается морковь с грязью. На 100 грамм веса, как минимум 5-7 грамм грязи.

Onboarding как отражение продукта
Сотрудник М.Видео: «Лучше не берите»

Или как М.Видео и Эльдорадо продаёт вам витринные образцы за полную цену.

«Spotify: История продукта». Как мы разработали алгоритмы музыкальных рекомендаций

Из онлайн-библиотеки — в сервис персонализированных рекомендаций.

Будущее наступит во вторник на OneRetailConf
Когда устал вечером в Додо

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

Дефицит цифровых кадров в России и их подготовка

Весь мир переходит в цифровую среду. Пока в ежегодном глобальном рейтинге конкурентоспособности Россия занимает 43-е место, но задерживаться на нем не намерена. Для этого правительство запустило программу «Цифровая экономика РФ», которая будет поддерживать цифровую экономику в стране и подготовку необходимых кадров.

Объявлены победители Finlanding
«Российский рынок акций был и остаётся одним из самых привлекательных в мире»

Виталий Исаков, директор по инвестициям УК «Открытие» («Открытие Инвестиции»).

Лекарство или яд: самые интересные исследования про алкоголь Статьи редакции

Материал издания Reminder.

В МВД и Минтрансе разработали ПДД для электросамокатов и других средств индивидуальной мобильности Статьи редакции

Россияне смогут ездить на скорости до 25 км/ч при весе устройств не более 35 килограммов.

null