Блог
  • Разработка
Еще не оценен

35 браузерных плагинов для Google Chrome в помощь разработчику

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

Что такое плагины и зачем они нужны

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

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

Плагины для Google Chrome улучшают пользовательский опыт по следующим причинам:

  • Экономят время. Предоставляют быстрый доступ к необходимым функциям, автоматизируют стандартные операции.

  • Легко осваиваются и редко требуют специальных навыков.

  • Следят за безопасностью. Система защиты Google пресекает несанкционированный доступ хакеров и вредоносного ПО.

  • Быстро настраиваются и содержат широкие функции под разные типы задач.

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

При этом AdBlock — это далеко не единственный аддон для Google. Какие ещё расширения применяются в Chrome, читайте в следующем разделе.

Плагины для настройки дизайна веб-страниц

Image Downloader

Плагин, который автоматически распознаёт, выделяет и загружает на ваш компьютер любое (даже скрытое) изображение в форматах JPG, PNG и GIF.

Может скачать несколько картинок одновременно и работает со множеством веб-ресурсов, в том числе с соцсетями.

Stylus

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

А ещё Stylus поддерживает ряд CSS-препроцессоров, например SASS, LESS и SCSS, и позволяет создавать более эффективный программный код.

Fonts Ninja

Расширение для идентификации, предпросмотра и загрузки шрифтов с любого сайта, в том числе с Google Fonts, Typekit и прочих ресурсов.

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

Ещё одна особенность Fonts Ninja — настройка таблицы стилей, которая позволит разработчикам быстрее завершать проекты.



ColorZilla

Покажет название, RGB и HEX-код любых цветов на сайте, из которых можно будет создавать собственную палитру для будущих проектов.

А встроенный CSS Gradient editor автоматически сгенерирует CSS-код для градиента, экономя время на ручной настройке.

PerfectPixel

С этим плагином можно наложить полупрозрачный HTML-шаблон на изображение оригинального PSD-макета, проверив, сходятся ли они «пиксель в пиксель».

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

CSS-Shack

Расширение, в котором можно создать стили слоёв, а затем перенести их в один CSS-файл.

Здесь также есть множество функций, поддерживаемых стандартными графическими редакторами.

Responsive Viewer

Плагин для тестирования веб-проектов под разные разрешения экранов.

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

Расширения для работы с кодом и отладки сайтов

HTML-Validator

Расширение для распознания проблем в HTML-коде. Вычисляет и показывает общее число ошибок в строке состояния браузера, подробности которых можно посмотреть в DevTools.

Talented API Tester

Аддон для работы с API (на базе REST, HTTP и SOAP) без выхода из Chrome.

В Talented API Tester можно выполнять все виды HTTP-запросов, обмениваться информацией и настраивать аутентификацию.

DomFlags

Существенно облегчит генерирование DOM-элементов в DevTools с помощью создания горячих клавиш.

Кроме того, здесь можно сформировать панель ссылок для быстрого доступа к нужному коду.

DevTools Autosave

Поможет автоматически сохранить корректировки кода, которые внесли на сайт через DevTools.

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

Code Cola

Плагин для просмотра исходного кода веб-сайтов и корректировки их CSS-свойств.

Проделанные в Code Cola модификации можно скопировать и добавить в текущий код страницы.

Octotree

Упрощает просмотр и изучение кода на GitHub.

В Octotree можно формировать IDE-дерево кода, универсальные закладки, PR-навигацию и кодовые шрифты.

JsonViewer

Продвинутая версия оригинального расширения JsonView от Gildas. С ним можно формировать JSONP и JSON в более удобном формате.

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

Web Developer

Изначально расширение создавалось для Firefox, но теперь доступно и в Chrome.

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

Этот плагин упрощает задачи не только девелоперам, но и специалистам по digital-маркетингу.

React Developer Tools

Плагин для отладки и проверки иерархии компонентов React в веб-приложениях и для выявления проблем с их производительностью.

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

Аддоны для оптимизации работы девелопера

Clear Cache

Расширение для быстрой очистки кеша и прочей браузерной информации.

Clear Cache позволяет выбрать категорию удаляемых данных: загруженные файлы, кеш приложений, прошлую историю, данные формы, пароли.

Плагин работает «за кадром» и не отвлекает пользователей всплывающими диалоговыми окнами.