15 Лучшие браузерные расширения для разработчиков (2019)

Самым большим изменением для 2018 стал капитальный ремонт FireFox, и вместе с ним работают дополнения в этом браузере. В результате многие популярные надстройки больше не поддерживаются или стали недоступны.

Большинство дополнений для Firefox также доступны в качестве расширений для Google Chrome. В этой статье мы попытаемся отдать предпочтение кросс-браузерным надстройкам / расширениям, что в этом контексте означает, что они будут работать на Firefox, Chrome и Chromium. Мы также отдадим предпочтение бесплатным расширениям, которые, как известно, не передают вашу информацию третьим лицам и не поддерживаются доходом от рекламы. Мы сосредоточимся больше на расширениях, которые не ограничивают вас определенной технологией разработки.

Немногие разработчики увидят какое-либо преимущество в использовании Microsoft Edge в качестве браузера для разработки, но это хорошо для тестирования после разработки. Можно ожидать, что его будут использовать лишь немногим более 4 на каждом сайте 100, хотя можно ожидать, что это число немного увеличится, поскольку все больше пользователей отказываются от Internet Explorer.

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

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

1. Построен с

Когда вы окажетесь на действительно хорошо сделанном сайте и хотите узнать, как они его сделали, это расширение сэкономит вам много времени и усилий, копаясь в исходном коде. Ссылки для скачивания: Хром / Хром, Firefox

2. топор

Это инструмент аудита доступности. Всегда лучше постараться сделать свои страницы максимально доступными, а axe поможет вам избежать случайного исключения сегмента пользователей с вашего сайта. Ссылки для скачивания: Хром / Хром, Firefox

3. ColorZilla

Старое, но все же полезное, это расширение позволяет вам выбирать цвета прямо со страницы, получать цветовые коды, генерировать градиенты и многое другое. Ссылки для скачивания: Хром / Хром, Firefox

4. Веб-разработчик

Добавляет некоторые полезные дополнения в ваш браузер для контроля CSS, форм, изображений и информации. Одно из самых популярных расширений, когда-либо сделанных. Ссылки для скачивания: Хром / Хром, Firefox

5. Ву Рэнк

Проанализируйте любую веб-страницу для данных SEO. Предоставляет мощный отчет, показывающий все внутренние функции SEO, включая общий балл SEO, предложения по улучшению, облако ключевых слов и многое другое. Ссылки для скачивания: Хром / Хром, Firefox

6. Tab2QR

Сгенерируйте QR-код страницы, на которой вы находитесь, и вы можете перейти на страницу с вашим телефоном, просто отсканировав QR-код. Хорошо подходит для тестирования адаптивных сайтов, даже если вы их не создавали. Ссылки для скачивания: Хром / Хром, Firefox

7. HTTP Request Maker

Это может быть очень полезно для тестирования ответов PHP-форм, когда вы на самом деле не хотите отправлять форму (что может вызвать дополнительную обработку, которую вам не нужно тестировать). С помощью этого инструмента вы можете легко подделывать HTTP-запросы. Обратите внимание, что хотя расширения Chrome и Firefox имеют одно и то же имя и выполняют одни и те же действия, они сделаны разными разработчиками и не совсем одинаковы. Ссылки для скачивания: Хром / Хром, Firefox

8. Тест производительности страницы

Быстро получить отчет о том, как ваша страница работает на разных этапах своего путешествия в браузере. Это похоже на более продвинутую версию tracert. Этот доступен только в Firefox на данный момент. Существуют аналогичные расширения для Chrome и Chromium, но они не так богаты функциями, как этот. Ссылки для скачивания: Firefox

9. Word Count Tool

Это действительно может сделать больше, чем подразумевает название, так как оно также скажет вам, сколько символов и сколько предложений находятся в пределах выделенного блока текста (или всей страницы). Ссылки для скачивания: Хром / Хром, Firefox

10. Контрольный список для веб-разработчиков

Убедитесь, что вы следуете лучшим рекомендациям по веб-разработке с помощью этого инструмента, который покажет, где ваши стандарты, возможно, снизились. Ссылки для скачивания: Хром / Хром, Firefox

11. Редактор карт изображений

Один из трио отличных расширений от немецкого разработчика Heinz-Jürgen Boms, этот делает именно то, что говорит название. Вы можете создать карту изображения непосредственно в браузере, просто проследив области изображения, которые вы хотите отобразить. Ссылки для скачивания: Firefox

12. Расширенный редактор кадров

Еще одно расширение от Heinz-Jürgen Boms, это действительно инструмент стилей CSS, где вы можете создать фрейм непосредственно в браузере, указав его атрибуты. Стоит проверить документации прежде чем начать его использовать. Ссылки для скачивания: Firefox

13. Bootstrap Отзывчивый Помощник

Это очень простое небольшое расширение, которое помогает вам быстро увидеть, правильно ли работают ваши точки останова и какой уровень начальной загрузки используется в текущем режиме. Конечно, вам понадобится это расширение, только если вы действительно работаете в Bootstrap. Версия Chrome разработана Jonathan Defraiteur, а версия Firefox - Кевином Бон. Ссылки для скачивания: Хром / Хром, Firefox

14. Попробуйте сами HTML5 Editor

Если вы предпочитаете, чтобы все было просто и просто выполняли всю работу из одного места, это расширение для вас. Богатый функциями, этот контекстно-зависимый редактор работает непосредственно в браузере и поддерживает HTML, CSS и JavaScript. Это далеко от совершенства, но для быстрого и грязного редактирования без необходимости открывать отдельное приложение, оно выполняет свою работу. Ссылки для скачивания: Firefox

15. Рентгеновские очки

Технически это не расширение, а букмарклет. Но это работает так хорошо, что мы не можем оставить это в списке. Несмотря на то, что он сделан Mozilla, он одинаково хорошо работает в Chrome, потому что оба браузера полностью соответствуют стандартам. Чтобы использовать его, вам нужно сделать панель закладок видимой. Затем перейдите на страницу загрузки, доступ к которой можно получить по ссылкам ниже, и перетащите кнопку «Рентгеновские очки» на панель закладок. Затем просто зайдите на любой сайт, запустите закладку X-Ray Goggles, выберите элемент на странице и вы можете отредактировать код для него. Ссылки для скачивания: Хром / Хром, Firefox

изображение заголовка любезно предоставлено

Богдан Рэнца

Богдан является одним из основателей Inspired Mag, накопив за этот период почти 6-летний опыт. В свободное время он любит изучать классическую музыку и изучать изобразительное искусство. Он тоже одержим исправлениями. У него уже есть 5.