Для разработчика может быть утомительно использовать многочисленные специализированные инструменты для каждой задачи. Однако надстройки веб-браузера могут повысить вашу продуктивность, предоставляя доступ к различным функциям с одной платформы просмотра.
Все популярные браузеры поставляются с расширениями для профессионалов. А если вы используете Microsoft Edge, ваши задачи разработки могут упроститься с помощью некоторых надстроек для браузера. Здесь мы обсудим лучшие надстройки Microsoft Edge, которые должны использовать веб-разработчики.
Инструменты разработчика React — это надстройка DevTools для веб-браузера. Он добавит две новые вкладки с именами «Компоненты» и «Профилировщик» в ваши Edge DevTools. Надстройке с открытым исходным кодом потребуется ваше разрешение для доступа к дереву React на странице.
На вкладке «Компоненты» отображаются корневые компоненты React страницы вместе с подкомпонентами. Выберите любой компонент из дерева, чтобы проверить и отредактировать его текущие реквизиты, состояние и хуки на правой панели.
Вы также можете использовать это дополнение, чтобы узнать, содержит ли приложение React.js или нет. Используя вкладку Profiler, разработчики могут записывать информацию о производительности.
Если вы занимаетесь анализом кода GitHub, надстройка Octotree может расширить возможности проверки и исследования кода GitHub. Он показывает дерево кода, похожее на IDE, и позволяет выполнять поиск файлов и папок.
Это высокопроизводительное дополнение способно работать с репозиториями любого размера. Кроме того, он поддерживает частные репозитории и позволяет добавлять в закладки запросы на вытягивание, репо, файлы и проблемы.
Вы также можете подписаться на PRO-версию этого дополнения, чтобы получить некоторые дополнительные функции. К ним относятся поддержка нескольких учетных записей GitHub и GitHub Enterprise, несколько вкладок, настройки шрифта кода, проверка кода запроса на вытягивание, темы значков файлов и изменение положения стыковки.
Accessibility Insights for Web — это надстройка для браузера Microsoft Edge, которая позволяет обнаруживать и устранять проблемы со специальными возможностями в различных веб-приложениях и веб-сайтах. Вы можете использовать его для проверки соблюдения около 50 положений о доступности.
Благодаря четким инструкциям и визуальному помощнику вы можете быстро определить важные проблемы с доступом к клавиатуре, включая ловушки клавиатуры, отсутствующие позиции табуляции и неправильный порядок табуляции.
Это также поможет вам выполнить двухэтапный процесс, чтобы найти распространенные, но серьезные проблемы со специальными возможностями в течение нескольких минут. Однако для использования этого дополнения вам потребуется Microsoft Edge Insider v.75 или более поздней версии.
Анализ HTML-кода страницы — частая задача разработчика. С помощью надстройки Design Analysis вы можете анализировать HTML-страницу, включая и отключая различные компоненты этой страницы.
Связанный: Крутые HTML-эффекты, которые каждый может добавить на свой сайт
Он позволяет отключать внутренние и внешние (в том числе печатные и портативные) CSS, скрывать изображения и фон. изображения, отображение атрибутов alt изображения, контурные заголовки, рамки, внешние ссылки, таблицы, плавающие элементы и скоро.
Кроме того, это дополнение поставляется с различными инструментами, которые помогают отображать скрытые элементы, перезагружать изображений и внешнего CSS, просматривать исходный код, линеаризовать страницы и отмечать все ссылки как посещенные или не посещенный.
Это дополнение не хранит и не передает какие-либо личные данные. Вся информация, необходимая для его функционирования, остается на вашем устройстве.
Используя надстройку «Сохранить как MHTML», разработчики могут сохранить текущую веб-страницу в формате MHTML (MIME HTML)/MHT. Надстройка поставляется с кнопкой на панели инструментов для легкого использования. Он сохраняет все онлайн-ссылки в автономном формате.
MHTML — это формат файла архива, который сохраняет содержимое веб-страницы для просмотра в автономном режиме. Тип файла включает все ресурсы, такие как изображения, апплеты и Flash-анимации, в документы HTML во время процесса.
Надстройка имеет два разных инструмента, которые вы можете использовать для редактирования содержимого веб-страницы перед сохранением его в файле MHTML.
Вы можете выбрать режим дизайна для таких задач, как изменение формата текста на полужирный и курсив, добавление изображения или удаление любого содержимого. Или вы можете выбрать раздел страницы и попросить это дополнение сделать из него новый документ.
Разработчики имеют незаменимые отношения с файлами cookie. Cookie-Editor — это мощное дополнение, позволяющее выполнять стандартные операции с файлами cookie на этапе разработки и тестирования веб-страницы.
Это дополнение поставляется с простым в использовании интерфейсом, который позволяет вам управлять файлами cookie вручную. С его помощью вы можете быстро создавать, редактировать и удалять файлы cookie, не выходя из вкладки.
Одним щелчком мыши Cookie-Editor удалит все файлы cookie текущей страницы. Он также может импортировать/экспортировать файлы cookie в текстовом формате.
Node.js V8 — это дополнение, которое можно использовать с Edge DevTools для оптимизации цикла разработки Node.js. Он может управлять жизненным циклом окна/вкладки Edge DevTools, поэтому у вас будет больше времени, чтобы сосредоточиться на отладке кода.
Связанный: Что отлаживает Rubber Duck?
Надстройка Node.js V8 позволяет отслеживать локальные и удаленные сеансы отладки, управляя интерфейсом DevTools как вручную, так и автоматически. Вы также можете использовать его для отладки процессов узла VSCode и настройки продолжительности между проверками инспектора v8.
С его помощью вы можете автоматически открывать и закрывать Edge DevTools во вкладке или окне и делать DevTools активным или неактивным при запуске. Его функция проверки избавляет вас от копирования и вставки URL-адреса DevTools, автоматически определяя сгенерированный URL-адрес при запуске узла.
BugReplay — это прежде всего надстройка, используемая для демонстрации экрана и отладки сети. Это помогает вам записывать свой экран синхронно с сообщениями консоли JavaScript и сетевым трафиком. Благодаря этому дополнению все, что вам нужно сделать, это проследить шаги, чтобы зафиксировать ошибки в режиме реального времени.
Разработчику не нужно постоянно общаться с конечными пользователями или руководителями службы поддержки. Они могут легко узнать, когда и где возникла ошибка, из записанной информации и решить проблему в кратчайшие сроки.
Запись ошибки становится проще с надстройкой BugReplay. Вы также можете просмотреть ошибку, прежде чем поделиться ею с коллегами. Дополнение также предлагает возможность сделать его общедоступным.
Выберите свои любимые надстройки Edge для разработки
Изучив этот список надстроек Microsoft Edge, вы сможете выбрать те, которые помогут вам в разработке веб-сайтов и приложений. Помните, что у Microsoft Edge есть и другие надстройки для обычных пользователей. Вы можете просмотреть и найти основные расширения для других задач, таких как управление паролями.
Запомнить все ваши разные пароли может быть сложно, поэтому вот девять лучших надстроек Microsoft Edge для удобного управления паролями.
Читать далее
- Программирование
- Microsoft Edge
- Расширения браузера
- Веб-разработка

Тамал — внештатный писатель в MakeUseOf. Получив значительный опыт в области технологий, финансов и бизнеса процессов на своей предыдущей работе в ИТ-консалтинговой компании, он стал писать на постоянной основе 3 года назад. Хотя он и не пишет о производительности и последних технических новостях, он любит играть в Splinter Cell и смотреть Netflix/Prime Video.
Подписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!
Нажмите здесь, чтобы подписаться