Откройте для себя 15 лучших расширений браузера для разработчиков

Если вы подпишитесь на услугу по ссылке на этой странице, Reeves and Sons Limited может получить комиссию. Смотрите наши заявление об этике.

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

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

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

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

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

1. Построен с

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

2. топор

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

3. ColorZilla

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

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

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

5. Ву Рэнк

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

6. Tab2QR

Создайте QR-код страницы, на которой вы находитесь, и вы сможете посетить страницу со своего телефона, просто отсканировав QR-код. Хорошо для тестирования responsive сайты, даже если вы их не создавали. Ссылки для скачивания: Хром / Хром, 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. Загрузочный Responsive Помощник

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

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

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

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

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

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

Богдан Рэнца

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

Комментарии Ответы 0

Оставьте комментарий

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

Рейтинг *

Этот сайт использует Akismet для уменьшения количества спама. Узнайте, как обрабатываются ваши данные комментариев.