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

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

Подробное содержание:

Введение

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

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

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

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

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

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

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

Видео: общие сведения о пользовательском интерфейсе средств разработчика

Эскиз видео

В этом немного более старом видео, выпущенном в сентябре 2022 г., показан устаревший пользовательский интерфейс средств разработчика:

  • Вместо панели действий в видео показана устаревшая основная панель инструментов.
  • Вместо панели быстрого просмотра (в нижней части средств разработчика) в видео показан консоли.

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

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

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

Действие Полученный инструмент
Щелкните правой кнопкой мыши любой элемент на веб-странице и выберите "Проверить". Средство "Элементы " с деревом DOM, развернутым для отображения элемента страницы, щелкнутого правой кнопкой мыши.
Нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Ранее использовавшееся средство или средство Welcome .
Нажмите клавишу F12. Ранее использовавшееся средство или средство Welcome .

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

Действие Полученный инструмент
На панели инструментов Microsoft Edge выберите "Параметры и другое>Другие инструментыСредства>разработчика. Ранее использовавшееся средство или средство Welcome .
Нажмите клавиши 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, развернутым для отображения элемента страницы, находящейся в фокусе.

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

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

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

Откроется средство разработчика с выделенным правой кнопкой мыши элементом в дереве DOM в средстве "Элементы":

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

Открытие средств разработчика с помощью панели инструментов Microsoft Edge

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

Меню

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

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

  1. В командной строке откройте 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 :

  1. В Microsoft Edge перейдите в edge://settings/systemраздел .

  2. Прокрутите вниз до раздела "Средства разработчика" и отключите нажатие клавиши F12, чтобы открыть переключатель "Средства разработчика".

    Страница

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

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

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

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

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

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

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

Чтобы изменить масштаб раздела DevTools в браузере:

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

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

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

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

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

Изменение масштаба параметров средств разработчика:

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

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

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

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

Пользовательский интерфейс средств разработчика состоит из следующих основных областей:

  • Панель действий в верхней части с значками, используемыми для доступа к средствам, параметрам, документации и многому другому.

    • Текущая область инструментов, в которой отображается инструмент, выбранный в данный момент на панели действий .

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

    • Нижняя область инструмента, где отображается инструмент, выбранный в данный момент на панели быстрого просмотра .

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

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

  • Инструменте "Проверка " (значок средства ") выключатель.

  • Кнопка "Средство эмуляции устройства " (значок эмуляции устройства).

  • Средство "Добро пожаловать " (значок средства ").

  • Средство "Элементы " (значок средства ").

  • Средство "Консоль" (значок средства ").

  • Средство "Источники " (значок средства ").

  • Средство "Сеть " (значок средства ").

  • Средство "Производительность " (значок средства ").

  • Средство "Память " (значок средства ").

  • Средство "Приложение

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

  • Средство "Консоль" (значок средства ").

  • Средство "Проблемы " (значок средства ").

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

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

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

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

Чтобы изменить расположение панели быстрого просмотра , на панели инструментов быстрого просмотра нажмите кнопку быстрого просмотра закрепления справа (значок ") или кнопку быстрого просмотра закрепления внизу:

Значок быстрого просмотра закрепления, отображаемый на панели быстрого просмотра в нижней части средства разработчика

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

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

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

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

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

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

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

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

Панель действий и панель быстрого просмотра

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

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

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

  • Вкладки инструментов:

    • Средство Welcome .
    • Средство "Элементы ". Постоянный.
    • Средство "Консоль ". Постоянный.
    • Средство "Источники ". Постоянный.
    • Средство "Сеть ".
    • Средство "Производительность ".
    • Средство "Память ".
    • Средство "Приложение ".

  • Значки:

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

Панель действий с подписями, обозначающими ее функции

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

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

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

  1. Нажмите кнопку "Дополнительные средства " (значок "), чтобы получить список всех доступных средств:

    Меню

  2. Выберите инструмент, чтобы закрепить его на панели действий. После этого инструмент присутствует на панели действий при каждом открытии средств разработчика.

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

Меню

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

Контекстное меню на вкладке средства

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

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

Средство

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

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

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

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

Средство Welcome

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

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

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

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

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

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

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

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

См. "Консоль".

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

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

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

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

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

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

Средство "Производительность"

См. раздел "Анализ производительности среды выполнения (учебное руководство)".

Средство "Память"

См. раздел Устранение проблем с памятью.

Средство "Приложение"

Просмотр, изменение и удаление файлов cookie.

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

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

Настройка меню средств разработчика и управление им

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

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

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

Кнопка "Справка " (значок справки) открывает раскрывающееся меню со следующими элементами:

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

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

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

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

  1. Выберите инструмент на панели действий.

  2. На панели быстрого просмотра щелкните "Другие инструменты " (значок "), а затем выберите нужный инструмент в списке.

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

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

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

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

Краткое описание каждого средства см. в разделе О списке средств.

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

Слова «инструмент», «вкладка» и «панель» в некоторой степени взаимозаменяемы. В меню команд инструменты называются панелями; например, инструмент "Элементы" называется панелью "Элементы". Чтобы перейти к инструменту "Элементы ", щелкните вкладку "Элементы ". Для выбора инструментов есть кнопка " Дополнительные инструменты " (значок ") и список. Средства разработчика также называются панелями средств разработчика.

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

Панель действий и средства быстрого просмотра

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

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

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

См. также

Подсказка. Используйте меню команд

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

меню команд в средствах разработчика

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

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

    • Нажмите кнопку Настройка средств разработчика и управление ими (Настройка средств разработчика и управление ими), а затем выберите команду "Выполнить".
    • Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS).

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

  2. В меню команд начните вводить имя средства, например "изменения", а затем выберите команду "Показать изменения", например "Показать изменения". В меню команд отображаются соответствующие команды:

    После ввода

  3. Нажмите клавишу ВВОД , чтобы выбрать команду Показать (например, Показать изменения). Выбранное средство откроется на панели быстрого просмотра , расположенной внизу:

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

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

См. также Запуск команд с помощью меню команд средств разработчика Microsoft Edge.

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

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

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

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

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

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

Все сочетания клавиш и меню для сопоставления каждого с сочетаниями клавиш из Visual Studio Code

Экспериментальные функции

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

Чтобы ознакомиться с новейшими функциями в средствах разработчика, скачайте Microsoft Edge Canary, сборки которого создаются каждый вечер.

См. также:

См. также

  • Последнее обновление: