Работая в качестве веб-разработчика, вы, вероятно, много времени используете браузер. Сегодня почти каждый браузер имеет свои собственные инструменты для разработчиков, которые позволяют увидеть, что происходит за кулисами. Некоторые из браузеров имеют множество расширений, которые помогут вам оптимизировать процесс веб-разработки.
В этом посте мы собрали наши любимые и полезные расширения для Google Chrome, помогающие упростить жизнь веб-разработчика.
1 Web Developer
Web Developer Tools является одним из самых полезных расширений для любого разработчика. Он добавляет панель инструментов в Chrome. С её помощью можно удобно редактировать CSS, просматривать JavaScript и многое другое. Расширение доступно для браузеров Chrome, Firefox и Opera.
2 Accessibility Web Developer Tools
Миллионы людей пользуются Интернетом, в том числе люди с ограниченными возможностями. Поэтому обязательно ваши сайты должны быть доступны этой категории пользователей. Это расширение позволяет запустить проверку доступности на любой странице в сети. Добавьте его в список инструментов для веб-разработчика. Чтобы использовать его, щелкните на вкладке аудиты, выберите аудит доступности, далее пункт выполнить. Если страница нарушает какие-либо правила, они будут отображаться в виде списка с одним или несколькими нарушениями элементов на странице.
3 Responsive Web Design Tester
Используйте расширение Responsive Web Design Tester, чтобы проверить, как страница реагирует на различные устройства. Оно отражает размер и браузер мобильного устройства, поставляется с пресетами различных Android устройств. Он также работает в автономном режиме, который полезен при разработке сайтов на локальном хостинге без доступа к Интернету.
4 Wappalyzer
Если вы когда-либо использовали Built With, вы будете знакомы с концепцией Wappalyzer. Это расширение определяет системы управления контентом, платформы электронной коммерции, веб-серверы, базы JavaScript, аналитические инструменты и многое другое. Кроме того, приложение доступно для браузера Firefox.
5 PerfectPixel
Благодаря этому расширению, вы можете быть уверены, что дизайн будет идеально соответствовать полученному коду. Просто установите расширение, это позволит вам поставить полупрозрачные наложения изображения поверх веб-страницы, чтобы сравнить изображение с версткой. Накладки могут быть различными для каждого сайта и сохраняются между сессиями просмотра.
6 Refined GitHub
Если вы разочарованы пользовательским интерфейсом GitHub, это расширение является обязательным для вас. Оно упрощает интерфейс GitHub по умолчанию и добавляет все виды дополнительных функций: маркировка вопросов; выделение запросов, как непрочитанных; добавление кнопки быстрого редактирования; добавление авторской ссылки и многое другое.
7 CDN Headers & Cookies
Это расширение позволяет просматривать все HTTP-заголовки и куки в одном месте. Это легкое и простое расширение. Вы можете добавлять, редактировать или удалять пользовательские заголовки запросов и куки, а также заголовки запросов на экспорт и куки в файл CSV.
8 User Agent Switcher
Используйте это расширение, чтобы изменить агента пользователя для подмены устройства и/или браузера. Вы можете быстро переключаться между различными пользователями или добавлять свои собственные с настройками, имитирующими Internet Explorer, iPhone, или имитирую работу Google бота. Это полезно для отладки и тестирования поведения сайта на различных устройствах.
9 JSON Viewer
Расширение для печати JSON и JSONP, которое вы можете настроить под свой вкус. Оно включает в себя такие функции, как разборные узлы; интерактивные URL-адреса; блокнот, в который вы можете внести JSON формат на неопределенное время с помощью одной кнопки или комбинации клавиш; 27 встроенных тем и много другое.
10 Check My Links
Если вы регулярно редактируете страницы с большим количеством ссылок, не забудьте включить это расширение в свой список помощников для веб-разработчика. Оно может быстро найти все ссылки на странице и проверить каждую из них. Хорошие ссылки выделяются зеленым цветом, а битые красным. Расширение также будет публиковать полные URL-адреса битых ссылок в журнале консоли.
11 Usersnap
Часто веб-разработчики ежедневно сотрудничают с несколькими людьми, работая над проектом. Это небольшое расширение позволит упорядочить процесс совместной работы, поскольку оно создает скриншоты текущего контента. Вы сможете общаться более эффективно по различным вопросам, обмениваться обратной связью между другими разработчиками, клиентами и другими людьми, участвующими в веб-разработке проекта.
12 IE Tab
IE Tab эмулирует Internet Explorer, используя свой движок рендеринга непосредственно в Chrome. Приложение позволяет использовать элементы управления ActiveX для проверки разрабатываемых сайтов с различными версиями IE, начиная от IE6 до IE9.
13 DevTools AutoSave
Использование инструментов разработчика для внесения изменений на лету с целью тестирования, дальнейшая вставка произведенных изменений в текстовый редактор и загрузка на сервер могут обернуться адскими муками. К счастью, это расширение приходит как спасатель, поскольку оно позволяет автоматически сохранять любые внесенные в CSS и JS сайта изменения в исходный файл.
14 Chrome MySQL Admin
Если вы ежедневно работаете с базами данных, рассмотрите возможность включения этого расширения в свой рабочий процесс. Это простой MySQL клиент со всеми необходимыми инструментами для управления базами данных и таблиц MySQL. Вы сможете подключиться к базам данных и управлять ими, выполнять запросы, создавать и удалять таблицы и многое другое в быстром и легком интерфейсе приложения.
15 Grunt Devtools
Это расширение инструментов разработчика Chrome добавляет инструменты с поддержкой фоновых задач и позволяет выполнять задачи для многочисленных проектов в одном окне.
Если вы используете другие полезные веб-разработчику расширения для Google Chrome, то поделитесь ими в комментариях к статье. Нам интересно узнать, что используют другие программисты и верстальщики в своей работе.