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

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

LiveReload

LiveReload — один из самых распространённых инструментов, который заставляет браузер автоматически обновлять страницу при изменениях в коде. Очень удобно, когда пишете FrontEnd без использования сборщиков (Gulp, Webpack и др., где есть свои аналогичные решения).

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

Для того, чтобы это работало в редакторе Sublime Text, необходимо его сперва установить через Package Manager, а после чего зайти в Preferences -> Package Settings -> LiveReload -> Settings — User и вставить следующий код:

{
  "enabled_plugins": [
    "SimpleReloadPlugin",
    "SimpleRefresh"
  ]
}

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

Сайт расширения: livereload.com

GoFullPage

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

Страница расширения в Chrome Web Store: https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl

Кстати, если вам нужно сделать скриншот страницы на другом разрешении экрана (допустим у вас 1366×768, а нужно показать как будет выглядеть сайт на FullHD, 2к или 4к мониторах, то вам нужно:

  1. Зайти на нужную страницу, которую необходимо заскриншотить;
  2. Открыть инструменты веб-разработчика;
  3. Нажать сочетание клавиш Ctrl+Shift+M. У вас откроется просмотр мобильной версии сайта;
  4. Сверху нужно прописать желаемое разрешение экрана. Слишком много не стоит прописывать, если у вас слабое железо
  5. После чего сверху справа открываем меню и выбираем «Полноразмерный скриншот».

IP Whois & Flags Chrome & Websites Rating

Очень полезное расширение, которое даст вам информацию по любому сайту; в частности:

  • IP сервера, на котором расположен сайт;
  • Название хостинга, на котором расположен сайт;
  • Приблизительная посещаемость сайта;
  • WHOIS информация по домену сайта;
  • Анализ сайта инструментом Alexa (показывает посещаемость, источник трафика на сайт, SEO и другие вещи)

Ссылка на загрузку расширения: https://chrome.google.com/webstore/detail/ip-whois-flags-chrome-web/kmdfbacgombndnllogoijhnggalgmkon

Wappalyzer

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

Ссылка на загрузку расширения: https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg

Font Finder

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

Ссылка на загрузку расширения: https://chrome.google.com/webstore/detail/font-finder/bhiichidigehdgphoambhjbekalahgha

Be1.ru

Расширение для SEO-анализа сайта. Показывает ключевые слова, краткое описание, возраст домена, посещаемость, размер страницы сайта, скорость загрузки, индексируемость сайта в популярных поисковых системах, ИКС, антиплагиат, Google PageSpeed Ingights, анализ robots.txt, sitemap.xml и ещё очень очень много всего.

Ссылка на загрузку расширения: https://chrome.google.com/webstore/detail/seo-анализ-сайта-от-be1ru/hgoppfmeamohhpdlgmbondkfcijhklbo

Оцените статью