Общие сведения о средствах разработки

Статья
12/08/2023

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

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

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

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

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

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

Действие	Результирующий инструмент
Щелкните правой кнопкой мыши любой элемент на веб-странице и выберите пункт Проверить.	Инструмент "Элементы " с деревом 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).	Инструмент "Элементы " с деревом DOM, развернутый для отображения `<body>` элемента.
Нажмите клавиши SHIFT+F10 , чтобы открыть контекстное меню. Чтобы выбрать команду Проверить , нажмите клавишу СТРЕЛКА ВВЕРХ , а затем ВВОД.	Инструмент "Элементы " с деревом DOM, развернутый для отображения `<html>` элемента.
Нажмите клавиши TAB или SHIFT+TAB , чтобы переместить фокус на элемент страницы. Затем нажмите клавиши SHIFT+F10 , чтобы открыть контекстное меню. Чтобы выбрать команду Проверить , нажмите клавишу СТРЕЛКА ВВЕРХ , а затем ВВОД.	Инструмент "Элементы " с деревом DOM, развернутый для отображения элемента страницы с фокусом.

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

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

Щелкните правой кнопкой мыши ссылку

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

Средства разработки, открытые в правой части Microsoft Edge, с элементом DOM, выбранным в дереве DOM в инструменте Elements

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

Меню

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

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

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

Командная строка Windows:
```
start msedge --auto-open-devtools-for-tabs
```
Windows PowerShell:
```
Start-Process -FilePath "msedge" -ArgumentList "--auto-open-devtools-for-tabs"
```
Терминал macOS:
```
/Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --auto-open-devtools-for-tabs
```
Оболочка bash в Linux:
```
microsoft-edge --auto-open-devtools-for-tabs
```

Отключение ускорения запуска

Важно: При запуске с помощью auto-open-devtools-for-tabsне должно быть запущенных процессов Microsoft Edge, поэтому может потребоваться отключить ускорение запуска в edge://settings/system.

Функция ускорения запуска обеспечивает минимальное выполнение процесса Microsoft Edge в фоновом режиме. Это мешает auto-open-devtools-for-tabs работе функции, и ее необходимо отключить для ее использования. Дополнительные сведения см. в разделе Справка по повышению запуска.

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

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

В Microsoft Edge перейдите по адресу edge://settings/system.
Прокрутите вниз до раздела Средства разработчика и отключите переключатель Использовать клавишу F12, чтобы открыть переключатель Средства разработчика.

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

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

См. статью Сочетания клавиш и Навигация по средствам разработки с помощью специальных возможностей.

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

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

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

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

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

Если фокус еще не установлен на средства разработки, щелкните в каком-то месте в средствах разработки.
Нажмите клавиши CTRL++ или CTRL+- (Windows или Linux). Или нажмите клавиши COMMAND++ или COMMAND+- (macOS).

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

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

Восстановление масштаба до 100%:

Убедитесь, что фокус находится на нужной части браузера, в средствах разработки или на отрисоченной странице.
Нажмите клавиши CTRL+0 , CTRL+NumPad0 (Windows или Linux) или COMMAND+0 (macOS).

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

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

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

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

Обзор пользовательского интерфейса

Пользовательский интерфейс DevTools имеет следующие main области:

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

Microsoft Edge с открытыми средствами разработки на стороне с выделенными 4 main областями пользовательского интерфейса

По умолчанию панель действий содержит следующие средства:

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

По умолчанию панель быстрого просмотра содержит следующие средства:

Консольный инструмент ().
Средство "Проблемы " (").

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

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

Изменение расположения панели действий

По умолчанию панель действий отображается горизонтально в верхней части окна Средства разработки. Чтобы максимально увеличить удобное пространство на экране в различных размерах и расположениях окна DevTools, можно изменить расположение панели действий в левой части окна DevTools или задать его автоматически в зависимости от расположения закрепления окна DevTools.

Панель действий может находиться в одном из следующих расположений:

Сверху (по умолчанию): панель действий всегда будет горизонтальной.
Слева:панель действий всегда будет вертикальной.
Адаптация к расположению закрепления. Панель действий будет находиться в горизонтальной или вертикальной ориентации в зависимости от места закрепления средств разработки.
- Если средства разработки закреплены в левой или правой части окна браузера, панель действий будет вертикальной.
- Если средства разработки закреплены в нижней части окна браузера или отстыкованы в собственном окне, панель действий будет горизонтальной.

Если панель действий является горизонтальной, имена инструментов отображаются рядом со значками инструментов, если для их отображения достаточно места.

Если места недостаточно для отображения всех имен инструментов, на горизонтальной панели действий отображаются некоторые вкладки со значками и именами инструментов, а также некоторые вкладки со значками со подсказками:

Горизонтальная панель действий с ограниченной шириной, поэтому у некоторых инструментов нет метки, а только значок с подсказкой

Чтобы изменить расположение панели действий, выполните одно из следующих действий:

Нажмите кнопку Настройка и управление Средствами разработки (), а затем выберите расположение на панели действий:
На панели действий щелкните Переместить панель действий влево () или Переместить панель действий в верхнюю часть ().
Используйте меню Команд. Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS), введите слова панель действий, а затем выберите Переместить панель действий влево или Переместить панель действий в начало. См. раздел Совет по использованию power tip: Use the Command Menu(Командная команда).

Изменение расположения быстрого просмотра

По умолчанию панель Быстрого просмотра находится в нижней части devTools. Вы также можете поместить панель быстрого просмотра в правой части средства разработки.

Чтобы отобразить панель быстрого просмотра , нажмите клавишу ESC.

Чтобы изменить расположение панели быстрого просмотра , на панели быстрого просмотра нажмите кнопку Закрепить быстрое представление справа или док-панель быстрого просмотра вниз ().

Значок

Функции панели действий

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

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

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

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

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

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

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

Есть две панели инструментов: панель действий в верхней части средства разработки и панель быстрого просмотра внизу при нажатии клавиши ESC.

Панель действий содержит следующие функции:

Инструменты значков:
- Кнопка переключения средства проверки ().
- Кнопка Эмуляция устройства ().

Вкладки инструментов:
- Средство приветствия .
- Инструмент "Элементы ". Постоянного.
- Консольное средство. Постоянного.
- Средство "Источники ". Постоянного.
- Средство "Сеть ".
- Средство повышения производительности .
- Средство "Память ".
- Средство приложения .
Иконки:
- Кнопка Переместить панель действий влево ().
- Кнопка "Другие инструменты" (")
- Кнопка меню "Настройка и управление средствами разработки (")
- Кнопка "Справка).
- Закрыть Кнопка DevTools ().

Функции панели действий описаны ниже.

Закрепление и изменение порядка инструментов на панели действий

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

Щелкните Другие инструменты (+), чтобы получить список всех доступных средств:
Выберите средство, чтобы закрепить его на панели действий. Затем средство отображается на панели действий при каждом открытии средств разработки.

Если на панели действий недостаточно места для отображения всех закрепленных инструментов, некоторые средства могут переполняться в меню Дополнительные инструменты :

Меню Другие инструменты, в котором отображаются некоторые закрепленные средства, которые не могут поместиться на панели действий

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

Щелкните правой кнопкой мыши меню на вкладке средства

Средство проверки

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

Средство

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

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

Отображение этой статьи в средствах разработки на эмулированном мобильном телефоне

См. раздел Эмуляция мобильных устройств (эмуляция устройств).

Средство приветствия

Содержит сведения о новых функциях DevTools, способах связи с командой и содержит сведения о некоторых функциях.

Инструмент "Элементы"

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

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

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

В средстве "Консоль" можно:

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

Средство "Консоль" всегда присутствует на панели действий и на панели быстрого просмотра .

См. раздел Консоль.

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

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

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

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

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

См . раздел Проверка сетевой активности.

Кнопка "Дополнительные инструменты"

Чтобы добавить средство на панель действий, нажмите кнопку Другие инструменты (") .

Кнопка Настройка и управление средствами разработки () открывает раскрывающееся меню для следующих способов:

Закрепление средств разработки.
Закрепление панели действий.
Выберите тему.
Показывать сочетания клавиш.
Измените параметры средства разработки.
Откройте эмуляцию устройства.
Переключите панель Быстрого просмотра .
Выполните команду.
Выполните поиск кода.
Откройте файл.

Кнопка "Справка"

Кнопка Справка () открывает раскрывающееся меню, предоставляющее доступ к документации по devTools, заметкам о выпуске и инструменту "Обратная связь ( ).

Чтобы отправить сообщение о проблемах, проблемах или предложить идеи с помощью команды Разработчиков Microsoft Edge, нажмите кнопку Отзыв . Откроется диалоговое окно Отправить отзыв . Введите сведения для описания того, что произошло, и включите снимок экрана. См . статью Обращение к команде разработчиков Microsoft Edge.

Кнопка "Закрыть средства разработки"

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

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

Выберите средство на панели действий.
На панели быстрого просмотра щелкните Другие инструменты (+), а затем выберите другое средство из списка.

Например, откройте средство отрисовки на панели "Быстрое представление " под средством "Сеть ", открытым на панели действий:

Средства разработки с инструментом

Чтобы скрыть или развернуть быстрое представление, щелкните Свернуть быстрое представление () или Развернуть быстрое представление () или нажмите клавишу ESCAPE .

Обзор всех средств

Сводку по каждому средству см. в статье Общие сведения о всех средствах в разделе Сведения о списке инструментов.

Инструмент, вкладка или панель

Слова "tool", "tab" и "panel" являются несколько взаимозаменяемыми. В меню команд средства называются панелями; Например, инструмент "Элементы " называется панелью "Элементы ". Чтобы переключиться на инструмент Элементы , перейдите на вкладку Элементы . Есть кнопка "Дополнительные инструменты " (+) и список, используемые для выбора инструментов, которые также называются панелями.

Вы можете настроить каждый из инструментов, и содержимое средства может изменяться в зависимости от контекста.

Сведения о панели действий и средствах быстрого просмотра

Кнопка Дополнительные инструменты (+) отображается как на панели действий , так и на панели быстрого просмотра . При открытии средства из списка Дополнительные средства , расположенного на панели действий, средство отображается на панели действий. При открытии средства из списка Дополнительные средства на панели быстрого просмотра средство открывается на панели быстрого просмотра .

Задача	Действия
Открытие средства на панели действий в верхней части средства разработки	На панели действий в верхней части средства разработки щелкните Другие инструменты (+), а затем выберите средство.
Открытие средства на панели быстрого просмотра	Когда в средствах разработки будет фокус, нажмите клавишу ESC , чтобы отобразить панель быстрого просмотра , если она еще не показана. На панели быстрого просмотра нажмите кнопку Дополнительные инструменты (+) и выберите средство.
Перемещение средства с панели быстрого просмотра на панель действий	Когда в средствах разработки будет фокус, нажмите клавишу ESC , чтобы отобразить быстрый просмотр. На панели быстрого просмотра щелкните правой кнопкой мыши вкладку средства и выберите Переместить в верхнюю панель действий или Переместить в левую панель действий.
Перемещение средства из панели действий на панель быстрого просмотра	На панели действий щелкните правой кнопкой мыши вкладку средства, а затем выберите Пункт Быстрый просмотр вниз или Перейти в сторону Быстрого просмотра.
Открытие средства на панели инструментов по умолчанию (панель действий или быстрое представление)	Когда в средствах разработки будет фокус, откройте меню Команд , нажав клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS). Введите имя средства, а затем выберите команду Показать <инструмент> .

Помимо панели действий и средств быстрого просмотра , средства разработки включают в себя следующие средства:

Средство проверки . См . статью Использование средства проверки для обнаружения проблем со специальными возможностями путем наведении указателя мыши на веб-страницу.
Средство эмуляции устройства . См. раздел Эмуляция мобильных устройств (эмуляция устройств).
Меню "Команда". См . раздел Выполнение команд с помощью меню команд Microsoft Edge DevTools.

См. также

Сведения о списке инструментов

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

В меню команд средства называются панелями; Например, инструмент "Элементы " называется панелью "Элементы ". Чтобы переключиться на инструмент Элементы , перейдите на вкладку Элементы .

Чтобы открыть меню "Команда", выполните одно из следующих действий:
- Нажмите кнопку Настройка и управление Средствами разработки () и выберите Выполнить команду.
- Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS).
Меню команд позволяет вводить команды для отображения, скрытия или запуска функций в средствах разработки.
В меню Команд начните вводить имя средства, например изменения, а затем выберите команду Показать , например Показать изменения. В меню Команды отображаются соответствующие команды:
Нажмите клавишу ВВОД , чтобы выбрать команду Показать , например Показать изменения. Выбранное средство откроется на панели Быстрого просмотра в нижней части экрана:

Инструмент "Изменения " полезен при редактировании CSS. В этом примере меню команд предоставляет быструю альтернативу выбору Дополнительных средств (+) и последующему выбору Изменений. Этот пример также предоставляет альтернативу редактированию .js файла в средстве "Источники ", а затем щелкните правой кнопкой мыши и выберите Локальные изменения.

См. также раздел Выполнение команд с помощью меню Microsoft Edge DevTools Command.

Настройка средств разработки

Вы можете настроить Средства разработки в соответствии с вашими потребностями в соответствии с тем, как вы работаете. Чтобы изменить параметры, нажмите кнопку Настройка и управление средствами разработки (), а затем выберите Параметры () или нажмите клавишу F1.

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

Все параметры в средствах разработки

Вы также можете изменить параметры дополнительных функций, таких как:

Добавление локальных файлов в рабочую область.
Фильтрация кода библиотеки с помощью списка "Игнорировать".
Определите устройства , которые необходимо включить в режим имитации и тестирования устройств. Дополнительные сведения см. в разделе Эмуляция мобильных устройств (эмуляция устройств).
Выберите профиль регулирования сети.
Определение имитированных расположений.
Настройка сочетаний клавиш. Например, чтобы использовать те же сочетания клавиш в средствах разработки, что и в Visual Studio Code, выберите пункт Сопоставить ярлыки из предустановленного>Visual Studio Code.

Все сочетания клавиш и меню, соответствующие сочетаниям клавиш в Visual Studio Code

Пробные экспериментальные функции

Команда DevTools предоставляет новые возможности в виде экспериментов в DevTools. Вы можете включить или отключить каждый из экспериментов. Чтобы просмотреть полный список экспериментальных функций в Microsoft Edge DevTools, в средствах разработки выберите Параметры (), а затем выберите Эксперименты.

Чтобы просмотреть последние функции, доступные в DevTools, скачайте Microsoft Edge Canary, который выполняет сборку ночью.

См. также:

Общие сведения о средствах разработки