В этом учебном пособии ты познакомишься с техническими инструментами разработчика Microsoft Edge, которые во многих отношениях похожи на технические инструменты разработчика Google Chrome. Ты узнаешь, как открыть и эффективно использовать инструменты, а также различия между этими двумя инструментами разработчика браузера.
Основные идеи
Инструменты разработчика Edge предлагают практически идентичный пользовательский интерфейс по сравнению с инструментами разработчика Chrome, когда речь идет об основных функциях. Отличия в основном касаются пользовательского интерфейса и нескольких дополнительных функций, в то время как базовые инструменты и ярлыки остаются практически неизменными.
Пошаговое руководство:
Чтобы открыть инструменты разработчика Edge, у тебя есть несколько вариантов. Один из способов - нажать F12. Если вы работаете на Mac, вы также можете использовать сочетание клавиш Command + Option + I. Пользователи Windows также могут использовать комбинацию Control + Shift + I. Если вы хотите открыть DevTools через контекстное меню, щелкните правой кнопкой мыши на заголовке веб-страницы и выберите "Исследуйте".
Пользовательский интерфейс инструментов разработчика Edge будет немедленно знаком вам, если вы уже работали с инструментами разработчика Chrome. Вкладки в присутствии, значки выглядят немного иначе и доступ к дополнительным инструментам вы получаете через символ «Плюс» в верхней панели. В Chrome эти дополнительные инструменты были доступны через главное меню.
Чтобы добавить новую вкладку в инструменты разработчика Edge, просто нажмите на символ плюс. Например, вы можете добавить инструмент анимации. После этого он будет отображаться в верхней строке вкладок, подобно Chrome Development Tools.
Также доступна вкладка «Welcome», похожая на страницу «What's New» в Chrome. Здесь вы можете ознакомиться с обзором функций DevTools. Рекомендую вам просмотреть эту вкладку, чтобы, возможно, обнаружить полезные советы и хитрости, о которых мы еще не говорили в курсе.
Еще одна полезная функция инструментов разработчика Edge - возможность перемещения вкладок влево. Это позволяет вертикальное расположение вкладок. Значки появляются в виде всплывающих подсказок, что экономит место и предоставляет больше места для самих инструментов.
Инструменты дизайна можно настраивать через различные настройки, похожие на настройки Chrome. Вы можете настраивать раскрывающиеся меню, документацию и панель активности. Таким образом, вы сохраняете знакомую рабочую среду.
Одним из немногих различий является дополнительный символ для Azure DevOps в инструментах Edge, который отсутствует в Chrome. Это особенно полезно для разработчиков, работающих в среде Azure.
Как только вы окажетесь на соответствующих вкладках, вы обнаружите, что структура и функции в обоих инструментах практически идентичны. Вы можете использовать стили, вычисленные макеты и все остальное, к чему вы привыкли в Chrome, также в Edge.
Однако обновления функций могут немного отличаться. Когда Chrome добавляет новую функцию, возможно, что она будет доступна в Edge с небольшой задержкой или наоборот. Поэтому рекомендуется регулярно проверять, какие новые функции добавляются в различные инструменты.
Это, собственно, все, что вам нужно знать о инструментах разработчика Edge. Если вы уже знакомы с инструментами разработчика Chrome, вы быстро разберетесь с инструментами разработчика Edge.
Вывод
В этом учебном пособии вы узнали о сходствах и различиях между инструментами разработчика Google Chrome и Microsoft Edge. Теперь вы знаете, как открыть инструменты и какие функции у вас есть, чтобы эффективно работать над своими веб-проектами.
