Самым большим изменением для 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-код. Хорошо для тестирования 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
изображение заголовка любезно предоставлено
Комментарии Ответы 0