Как открыть панель разработчика в edge

Обзор средств разработчика

Браузер Microsoft Edge поставляется со встроенными средствами веб-разработки, называемыми Средствами разработки Microsoft Edge. DevTools — это набор средств веб-разработки, которые отображаются рядом с отображаемой веб-страницей в браузере. DevTools предоставляет эффективный способ проверки и отладки веб-страниц и веб-приложений. Вы даже можете редактировать исходные файлы и создавать проекты веб-сайтов в среде DevTools.

С помощью Средств разработки можно выполнять следующие действия:

Проверка, настройка и изменение стилей элементов на веб-странице с помощью динамических инструментов с визуальным интерфейсом. Проверьте, где хранится содержимое браузера для создания веб-страницы, .html включая форматы файлов, .css«.js«.png а также форматы файлов.

Эмулировать поведение веб-сайта на разных устройствах и имитировать мобильную среду с разными условиями сети. Проверьте сетевой трафик и просмотрите расположение проблем.

Отладка JavaScript с помощью отладки точек останова и путем использования интерактивной консоли. Поиск проблем с памятью и отрисовки веб-приложений.

Поиск проблем со специальными возможностями, производительностью, совместимостью и безопасностью в продуктах, а также устранение найденных проблем со специальными возможностями с помощью средств разработки.

Используйте среду разработки для синхронизации изменений в DevTools с файловой системой и из Интернета.

Открыть средства разработчика

В Microsoft Edge devTools можно открыть с помощью мыши или клавиатуры любым из следующих способов. То, какое средство открыто, зависит от того, как вы открываете DevTools.

Основные способы:

Действие	Результирующее средство
Щелкните правой кнопкой мыши любой элемент на веб-странице и выберите пункт " Проверить".	Инструмент Elements с расширением дерева DOM для отображения элемента страницы, щелкнув правой кнопкой мыши.
Нажмите Ctrl + Shift + I (Windows, Linux) или Command + Option + I (macOS).	Ранее использованное средство или средство приветствия .
Нажмите клавишу F12 .	Ранее использованное средство или средство приветствия .

Дополнительные способы:

Действие	Результирующее средство
На панели инструментов Microsoft Edge щелкните "Параметры" и другие параметры ( ) > дополнительные средства Средства разработчика.	Ранее использованное средство или средство приветствия .
Нажмите Ctrl + Shift + J (Windows, Linux) или Command + Option + J (macOS).	Средство консоли .
Нажмите Ctrl + Shift + C (Windows, Linux) или Command + Option + C (macOS).	Средство Elements с развернутным деревом DOM, чтобы отобразить <body> элемент.
Нажмите Shift + F10 , чтобы открыть контекстное меню. Чтобы выбрать команду "Проверить ", нажмите Up Arrow и нажмите кнопку . Enter .	Средство Elements с развернутным деревом DOM, чтобы отобразить <html> элемент.
Нажмите Tab и Shift + Tab переместите фокус на элемент страницы. Затем нажмите, Shift + F10 чтобы открыть контекстное меню. Чтобы выбрать команду "Проверить ", нажмите Up Arrow и нажмите кнопку . Enter .	Инструмент Elements с расширением дерева DOM для отображения элемента страницы с фокусом.

Откройте DevTools, щелкнув правой кнопкой мыши элемент на веб-странице

Хороший способ открыть DevTools — щелкнуть правой кнопкой мыши элемент на веб-странице и выбрать пункт "Проверить":

Чтобы открыть devTools, щелкните правой кнопкой мыши любой элемент на веб-странице и выберите пункт "Проверить".

Откроется devTools с выделенным правой кнопкой мыши элементом в дереве DOM в средстве Elements :

Откроется средство DevTools с выделенным правой кнопкой мыши элементом в средстве "Элементы".

Откройте devTools с помощью панели инструментов Microsoft Edge

На панели инструментов Microsoft Edge можно выбрать параметры и другие ( . ) > дополнительные > средства Средства разработчика:

На панели инструментов Microsoft Edge выберите "Параметры и другие" > "Дополнительные инструменты" > "Средства разработчика".

Автоматическое открытие devTools при открытии новой вкладки

Чтобы средства разработчика автоматически открывались при открытии новой вкладки в браузере:

В командной строке откройте Microsoft Edge, передав —auto-open-devtools-for-tabs флаг следующим образом:

Командная строка Windows:

Оболочка bash в macOS:

Оболочка bash в Linux:

Отключение сочетания клавиш F12

Чтобы запретить нажатие F12 клавиши DevTools:

В Microsoft Edge перейдите по следующему пути edge://settings/system :

В разделе "Средства разработчика " отключите open the DevTools при нажатии клавиши F12.

В параметрах Edge отключите клавишу F12 для открытия средств разработки.

Поддержка клавиатуры

Вы можете взаимодействовать с devTools с помощью мыши или клавиатуры. Сочетания клавиш обеспечивают быстрый доступ к функциональным возможностям и необходимы для специальных возможностей. Различные средства становятся все более доступными с помощью клавиатуры и специальных возможностей, таких как средства чтения с экрана.

Изменение места закрепления DevTools в браузере

Вы можете закрепить средства разработки в правой, левой или нижней части браузера или открепить их в отдельном окне. См . раздел "Изменение размещения средств разработки" (открепка, закрепление снизу, закрепление слева).

Увеличение масштаба средств разработки

Пользовательский интерфейс DevTools реализуется с помощью HTML и CSS, например веб-страниц, чтобы можно было увеличивать и увеличивать масштаб с помощью стандартных сочетаний клавиш. Уровни масштабирования для средств разработки и отображаемой страницы независимы.

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

Если фокус еще не установлен на Средства разработки, щелкните где-нибудь в DevTools.
Нажмите Ctrl + + или Ctrl + — (Windows или Linux). Или нажмите или Command«- + + Command +(macOS).

Масштаб средств разработки уменьшен.

Чтобы увеличить отображаемую страницу, щелкните страницу и используйте те же сочетания клавиш, что и выше.

Чтобы восстановить масштаб до 100 %:

Убедитесь, что основное внимание уделяется нужной части браузера— devTools или отрисовке страницы.
Нажмите Ctrl«0 +или Ctrl«NumPad0 +(Windows или Linux) или Command + 0 (macOS).

Чтобы увеличить масштаб параметров devTools, выполните следующие действия.

В разделе " Параметры devTools" нажмите кнопку " Закрыть" (x) в правом верхнем углу.
Измените уровень масштабирования средств разработки, как описано выше.
Нажмите кнопку "Параметры " ( "Параметры").

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

Нажмите кнопку меню "Настройка и управление devTools ( ) и выберите команду "Выполнить".
В меню команд начните вводить масштаб, а затем выберите команду масштабирования:
- Сброс масштаба
- Увеличение масштаба
- Уменьшить

Отображение подсказок devTools

Функция “Подсказки по средствам разработчика” поможет вам узнать обо всех различных инструментах и панелях. Наведите курсор на каждую выделенную область средств разработчика, чтобы узнать больше о том, как пользоваться инструментом. Чтобы включить подсказки, выполните одно из следующих действий:

Выберите Настройка и управление средствами разработчика ( . ) > Справка > Переключение подсказок средств разработчика.
Нажмите Ctrl + Shift + H (Windows, Linux) или Cmd + Shift + H (macOS). и введите tooltips .

Затем наведите указатель мыши на каждую выделенную область средств разработчика:

Подсказки devTools.

Чтобы отключить подсказки, нажмите клавишу Esc .

Функции главной панели инструментов

DevTools предоставляет множество функций для проверки, отладки и изменения веб-сайта, отображаемого в браузере. Большинство средств отображают изменения в динамическом режиме. Динамические изменения делают средства очень удобными при настройке внешнего вида и навигации или функциональности веб-продукта без необходимости его обновления или сборки.

Панели инструментов с вкладками, содержащие вкладки и страницы

Кроме нескольких инструментов значков (средство проверки **** и эмуляция устройств), средства devTools делятся на набор средств с вкладками, таких как инструмент " Элементы", средство консоли и **** средство "Источники". В меню команд средства называются панелями. Вкладка средства содержит панель, содержащую пользовательский интерфейс средства.

Вкладки более высокого уровня:

Инструменты организованы в набор вкладок на главной панели инструментов и на панели инструментов панели инструментов. Большинство средств также называются панелями. Панель — это внутренний пользовательский интерфейс средства. Средство имеет вкладку, которая может присутствовать на главной панели инструментов и панели инструментов панели инструментов.

Вкладки нижнего уровня:

На панели некоторых инструментов есть один или несколько наборов вкладок (панелей вкладок). Например, инструмент Elements содержит набор вкладок, включающих стили , прослушиватели событий и вкладки специальных возможностей. **** Для других средств на панели средства есть страницы, перечисленные слева.

Главная панель инструментов и панель инструментов "Панель"

Есть две панели инструментов: главная панель инструментов в верхней части devTools и панель в нижней части при **** нажатии. Esc

Главная панель инструментов содержит следующие функции:

Переключатель "Проверить средство " ( )
Кнопка "Эмуляция устройства" ( )

Средство приветствия .
Средство "Элементы ". Постоянного.
Консольное средство. Постоянного.
Средство "Источники ". Постоянного.
Сетевое средство.
Средство производительности .
Средство " Память".
Средство приложения .
Средство безопасности .
Средство Lighthouse .
Средство обзора CSS .

Кнопка "Дополнительные вкладки" (
Кнопка "Дополнительные инструменты" (
Счетчик ошибок JavaScript (значок )
Кнопка "Счетчик проблем" (
Кнопка " Параметры" ( Параметры").
Кнопка "Отправить отзыв " ( )
Настройка и управление меню DevTools (
Закрыть Кнопка DevTools ( )

Ниже описаны функции панели инструментов.

Средство "Проверка"

При нажатии кнопки "Проверить средство "Проверка" ( значок средства проверки) можно выбрать элемент на текущей веб-странице. Пока средство **** проверки активно, можно навести указатель мыши на разные части веб-страницы, чтобы получить подробные сведения об элементах страницы, а также много цветное наложение, показывающее размеры макета, заполнение и поле элемента страницы.

Средство проверки при наведении указателя мыши на первый заголовок этой статьи.

Эмуляция устройства

Нажмите кнопку "Эмуляция устройства " ( ), чтобы отобразить текущий веб-сайт в режиме эмулированного устройства. Средство Эмуляция устройства позволяет запускать и тестировать реакцию продукта при изменении размера браузера. Оно также предоставляет вам оценку макета и поведения на мобильном устройстве.

Средства разработки отображают эту статью на эмулированном мобильном телефоне.

Средство Welcome

Включает сведения о новых функциях средств разработчика, способ связи с командой и предоставляет информацию о некоторых функциях.

Средство "Элементы"

Позволяет проверять, изменять и отлаживать HTML и CSS. Изменения можно изменить в средстве при отображении изменений в браузере.

Инструмент Elements всегда присутствует на главной панели инструментов.

Средство "Консоль"

В средстве консоли можно:

Просмотр и фильтрация зарегистрированных сообщений из сетевых запросов или из инструкций журнала JavaScript.
Введите инструкции JavaScript для оценки в режиме реального времени. Выражения вычисляются в текущем контексте, например при приостановке отладчика JavaScript в средстве " Источники" в точке останова.

Средство консоли всегда присутствует на главной панели инструментов и панели инструментов панели инструментов.

Средство "Источники"

Средство "Источники " — это редактор кода и отладчик JavaScript. Вы можете редактировать проекты, поддерживать фрагменты кода и выполнять отладку текущего проекта.

Средство "Источники " всегда присутствует на главной панели инструментов.

Средство "Сеть"

Средство " Сеть" позволяет отслеживать и проверять запросы или ответы из кэша сети и браузера. Вы можете фильтровать запросы и ответы в соответствии со своими потребностями и имитировать различные сетевые условия.