Поделюсь своим списком расширений для 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к мониторах, то вам нужно:
- Зайти на нужную страницу, которую необходимо заскриншотить;
- Открыть инструменты веб-разработчика;
- Нажать сочетание клавиш Ctrl+Shift+M. У вас откроется просмотр мобильной версии сайта;
- Сверху нужно прописать желаемое разрешение экрана. Слишком много не стоит прописывать, если у вас слабое железо
- После чего сверху справа открываем меню и выбираем «Полноразмерный скриншот».
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