Инструменты разработчика присутствуют во всех современных браузерах, в том числе и в Edge. Edge — это браузер нового поколения от компании Microsoft, до этого браузера компания активно продвигала легендарный Internet Explorer. Однако компания Майкрософт отказалась от поддержки всех версий IE и сконцентрировала свои силы на поддержке нового браузера Edge, который по умолчанию установлен в операционной системе Windows.
Сегодня мы рассмотрим, какие инструменты разработчика предлагает нам браузер Edge.
Инструменты разработчика в Edge
Инструменты разработчика в Edge открывают широкие возможности для проверки, отладки и корректировки ваших веб-продуктов в этом обозревателе. Практически все инструменты работают в динамическом отображении изменений. То есть, делая какие-то корректировки в коде, вы сразу будете видеть, как внесенные изменения будут отображаться в самом браузере. Если вас все устроит, то вы сможете смело перенести внесенные изменения в файлы вашего проекта.
Панель инструментов для разработчика
Открыв панель инструментов разработчика в Edge, вы сразу получите доступ к панели инструментов, где можно будет найти следующие вкладки:
Элементы — инструмент для исследования и редактирования HTML и CSS;
Консоль — позволяет запускать JavaScript-скрипты и просматривать журналы браузера, связанные с показом вашего сайта, например, тут можно обнаружить ошибки с отображением каких-либо элементов сайта;
Источники — эта вкладка позволяет отредактировать и отладить JavaScript-скрипты;
Сеть — эта вкладка поможет имитировать различную функциональность вашего ресурса под влиянием разных сетевых условий.
Описанные выше вкладки принадлежат основной панели инструментов и будут «на виду». Но, помимо этих основных вкладок, есть еще дополнительные, которые изначально будут скрыты от глаз разработчика:
производительность — в этой вкладке можно проследить производительность вашего веб-проекта;
память — здесь отражается все, что касается памяти, например, вы можете просмотреть, сколько системной памяти необходимо, чтобы ваш веб-ресурс работал, причем измерять количество памяти можно в различных состояниях вашего веб-приложения;
безопасность — в этой вкладке можно отследить, насколько просматриваемая страница является безопасной, правильно ли на ней реализовано https-соединение и др;
дополнения — отражает несколько дополнительных свойств вашей веб-страницы, например, здесь можно увидеть, как ваш веб-ресурс взаимодействует с базой данных.
Инструменты разработчика Edge: дополнительные расширения
Встроенной панели инструментов в Edge более чем достаточно для работы с веб-проектами. Но бывает такое, что вам необходимы какие-то специфические инструменты, которые недоступны в панели инструментов. Вы можете добавить их в качестве расширения Edge.
Важная особенность. Браузер Edge поддерживает добавление расширений, но у него нет специальных расширений для веб-разработчиков. Однако так как Edge построен на базе Chromium, то в него можно добавлять расширения из магазина расширений Google Chrome. Для этого нужно будет просто включить разрешение на добавление расширений из других магазинов. Как только вы это сделаете, можете пройти в магазин расширений Гугл Хром и установить себе нужное расширение.
Какие задачи можно выполнить, используя инструменты разработчика в Edge
Примерный список задач, которые можно выполнить, применяя инструменты разработчика Edge, выглядит так:
проверить в динамическом режиме, как будут выглядеть вносимые изменения на вашем веб-ресурсе в браузере Edge;
создать эмуляцию поведения веб-ресурса на разных устройствах, в том числе на мобильных телефонах;
изменять, добавлять и удалять стили вашего веб-ресурса в динамическом режиме;
отладить JavaScript, используя точки останова или интерактивную консоль;
отыскать проблемы с доступностью, производительностью, памятью, безопасностью в своих веб-проектах, а потом исправить эти проблемы;
проконтролировать сетевой трафик и изучить проблемы, связанные с ним;
и др.
Заключение
Инструменты разработчика Edge мало чем отличаются от инструментов в другом браузере. Но их обязательно нужно использовать, если ваш веб-проект тесно связан с браузером Edge, чтобы максимально корректно подогнать свой ресурс под этот браузер.
С другой стороны, Edge не является самым популярным браузером, но у него также есть свои последователи. Поэтому если этот браузер является вашим «любимчиком» и вы начали изучать веб-программирование, то вам не нужно будет «пересаживаться» на другой браузер, потому что в Edge есть все необходимые инструменты для веб-разработчика.
Другое
