Лучшие браузерные расширения для работы с сайтом

Обсудить
Лучшие браузерные расширения для работы с сайтом

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

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

Разработчикам и дизайнерам

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

Web Developer

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

Расширение Web Developer позволяет оснастить браузер панелью, содержащей множество различных инструментов. С их помощью можно отключить JavaScript, управлять расположением страницы и работать с изображениями.

Ссылка на скачивание: Google Chrome, Firefox

Eye Dropper

Пипетка в браузере расширение Eye Dropper

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

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

Ссылка на скачивание: Google Chrome, Opera, FireFox

Site Palette

Как узнать палитру сайта с помощью расширения Site Palette

Еще одно расширение для работы с цветом. Его можно назвать аналогом Eye Dropper, но работает Site Palette несколько иначе. Оно позволяет извлечь с сайта используемые цвета и оформить их в виде цветовой палитры. Дополнительно ко всему плагин поддерживает несколько способов генерирования палитр, позволяет ими делиться, поддерживает возможность печати палитр и умеет конвертировать их в PDF.

Ссылка на скачивание: Google Chrome

Google Font Previewer for Chrome

Как узнать шрифт на сайте с помощью расширения Google Font Previewer for Chrome

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

Ссылка на скачивание: Google Chrome

Project Naptha

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

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

Ссылка на скачивание: Google Chrome

Library Sniffer

Как узнать на чем создан сайт с помощью расширения Library Sniffer

Library Sniffer – это отличный инструмент для тех, кто хочет быстро узнать с помощью каких средств, библиотек или фреймворков созданы просматриваемые им страницы. Можно посмотреть, на чем собран сайт – WordPress, Drupal, React, Vue.js, AngularJS или чем-то другом.

Ссылка на скачивание: Google Chrome

What Font

 Как быстро узнать шрифт на сайте с помощью расширения What Font

Это то расширение, которое нужно каждому дизайнеру. Достаточно его запустить и навести курсор мыши на любое слово – в результате будет показан шрифт. А если кликнуть по любому слову на странице, то будет выведена дополнительная информация: размер шрифта, его цвет, высота и прочее.

Ссылка на скачивание: Google Chrome, FireFox

SVG Grabber

Как скачать все SVG со страницы сайта с помощью расширения SVG Grabber

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

Ссылка на скачивание: Google Chrome, FireFox

Lighthouse

Альт – Браузерное расширение для работы с сайтом Lighthous

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

Ссылка на скачивание: Google Chrome, Firefox

Page Ruler

Браузерное расширение для работы с сайтом Page Ruler

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

Ссылка на скачивание: Google Chrome, FireFox

CSS Scan 2.0

Как быстро скопировать CSS на сайте с помощью расширения CSS Scan 2.0

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

Ссылка на скачивание: Google Chrome

React Developer Tools

Браузерное расширение для работы с сайтом React Developer Tools

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

Ссылка на скачивание: Google Chrome

JSONVue

 Браузерное расширение для работы с сайтом JSONVue

Простое расширение JSONVue, которое быстро и аккуратно форматирует JSON-данные.

Ссылка на скачивание: JSONVue

Talend API Tester

Браузерное расширение для работы с сайтом Talend API Tester

Talend API Tester – расширение, позволяющее работать из браузера с различными API. Например, это могут быть API, основанные на технологиях REST, SOAP и HTTP. Бесплатная версия расширения поддерживает выполнение всех видов HTTP-запросов, безопасный обмен данными и аутентификацию.

Ссылка на скачивание: Google Chrome

Window Resizer

Браузерное расширение для работы с сайтом Window Resizer

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

Ссылка на скачивание: Window Resizer

Daltonize

Браузерное расширение для работы с сайтом Daltonize

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

Ссылка на скачивание: Daltonize

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Подписаться

SEO-плагины

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

Seo Meta in 1 Click

Браузерное расширение для анализа SEO Seo Meta in 1 Click

Анализирует SEO-информацию:

  • метатеги: Title, Description, Canonical, Robots Tag и другое;
  • h1-h6 заголовки, изображения, значения их alt и title, ссылки;
  • разметку Open Graph;
  • имеет горячие ссылки на sitemap.xml и robots.txt;
  • проверяет установленные счетчики аналитики.

Интерфейс с удобной структурой вкладок, в одной из которых имеются ссылки для быстрой проверки страницы в других инструментах Google. К ним относятся: Mobile Friendly, Google PageSpeed, проверка микроразметки и другие. С помощью этого плагина можно быстро просмотреть важные SEO-параметры.

Ссылка на скачивание: Google Chrome, FireFox

RDS bar

Браузерное расширение для анализа SEO RDS bar

Расширение RDS bar анализирует входящие ссылки, количество ссылок на сайт, наличие и позицию в поисковых системах.

Особенности:

  • удобный интерфейс, наглядность – выдача Title, Description и заголовка страницы в фоновом блоке;
  • большое количество статистических данных: индексация страницы в крупных поисковиках – Яндекс, Google, Yahoo, Bing, а также в Твиттере, количество упоминаний домена поисковыми роботами, имя хоста, провайдера и многое другое.

Ссылка на скачивание: Google Chrome, FireFox

MozBar

Браузерное расширение для анализа SEO MozBar

MozBar – еще одно расширение из категории SEO. Оно отображает ключевые слова, по которым страница появляется в результатах Google, отслеживает Page Authority, Domain Authority, Link Profile. Также проводит подробный анализ результатов поисковой выдачи.

Из особенностей стоит отметить широкий спектр дополнительных фишек в виде анализа скорости сайта, заголовков любых сайтов и alt-текстов. Любое ключевое слово, которое вы ищите на странице, можно подсветить плагином – это поможет в анализе переспама страницы.

Ссылка на скачивание: Google Chrome

Google Analytics Debugger

Браузерное расширение для анализа SEO Google Analytics Debugger

Расширение от Google извлекает данные из кода, передаваемого в счетчик Google Analytics. Оно поможет получить сведения об успешно выполненных командах. С его помощью также можно получить подробную информацию о каждом обращении, отправленном в Google Analytics. Это позволит проверить, какие именно данные отслеживаются и правильно ли настроен инструмент Google Analytics.

Ссылка на скачивание: Google Chrome, FireFox

Яндекс.Метрика

Браузерное расширение для анализа SEO Яндекс.Метрика

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

Данное расширение отлично подойдет для тех, у кого много сайтов – доступ к метрике можно получить всего в несколько кликов.

Ссылка на скачивание: Google Chrome, FireFox

Check My Links

Браузерное расширение для анализа SEO Check My Links

Расширение проверяет ссылки 200 и 404. Оно сканирует страницу и отслеживает битые ссылки. В конце сканирования утилита представляет подробный отчет по URL таких ссылок и коды ошибок. Из преимуществ стоит отметить простоту использования – настроек всего две: опция исключения из проверки ссылок, которые принадлежат конкретным доменам, и тип запроса.

Ссылка на скачивание: Google Chrome

Web Developer checklist

Браузерное расширение для анализа SEO Web Developer checklist

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

Ссылка на скачивание: Google Chrome, FireFox, Opera

Расширения общего назначения

Главред

Браузерное расширение для работы с сайтом Главред

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

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

Ссылка на скачивание: Google Chrome

Loom

Браузерное расширение для работы с сайтом Loom

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

Ссылка на скачивание: Google Chrome

Вместо заключения

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

Если в вашей коллекции есть еще ряд интересных расширений, было бы интересно узнать о них в комментариях. А на этом у меня все, до встречи!

Наши постоянные авторы и читатели делятся лайфхаками, основанными на личном опыте. Полная свобода самовыражения.

Комментарии

Ваш баланс 10 ТК
1 ТК = 1 ₽
О том, как заработать и потратить Таймкарму, читайте в этой статье
Чтобы потратить Таймкарму, зарегистрируйтесь на нашем сайте
С помощью соцсетей
У меня нет аккаунта Зарегистрироваться
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
С помощью соцсетей
У меня уже есть аккаунт Войти
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.
Пожалуйста, укажите email вашего аккаунта
Войти в Комьюнити
Регистрация в Комьюнити
Восстановление пароля