Поделиться через

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

  • Статья

DevTools предоставляет более 30 средств, состоящих из средств по умолчанию и дополнительных инструментов.

Средства по умолчанию

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

  • Значок Проверка средства
  • Значок эмуляции устройства Эмуляция устройства
  • Значок приветствия
  • Значок элементов Элементы
  • Значок консоли Консоль
  • Значок источников Источники
  • Значок сети Сеть
  • Значок производительности Производительность
  • Значок памяти Память
  • Значок приложения Приложение

Инструменты по умолчанию, включая два значка и восемь вкладок на панели действий

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

Средство Назначение Статья
Значок средства Используйте средство "Проверка ", чтобы просмотреть сведения об элементе на отрисованной веб-странице. Когда средство "Проверка " активно, наведите указатель мыши на элементы веб-страницы, а средства разработки добавляют на веб-страницу наложение информации и выделение сетки. Анализ страниц с помощью средства проверки
Значок эмуляции устройства Эмуляция устройства Используйте средство эмуляции устройства , также называемое режимом имитации устройства или режимом устройства, чтобы приблизительно определить, как страница выглядит и реагирует на них на мобильном устройстве. Эмуляция мобильных устройств (эмуляция устройств)
Значок приветствия Средство приветствия открывается при первом открытии средств разработки. В нем отображаются ссылки на документацию разработчика, последние функции, заметки о выпуске и возможность связаться с командой Средств разработки Microsoft Edge. Средство приветствия
Значок элементов Элементы Проверьте, измените и отладите HTML и CSS. Вы можете изменить в инструменте, отображая изменения в реальном времени в браузере. Выполните отладку HTML-кода с помощью дерева DOM, а затем проверьте css для веб-страницы и поработайте над ней. Проверка, изменение и отладка HTML и CSS с помощью средства "Элементы"
Значок консоли Консоль Интеллектуальная, многофункциональная командная строка в средствах разработки. Отличный инструмент-компаньон для использования с другими инструментами. Предоставляет мощный способ создания скриптов, проверки текущей веб-страницы и управления текущей веб-страницей с помощью JavaScript. Общие сведения о консоли
Значок источников Источники Используйте средство Источники для просмотра, изменения и отладки интерфейсного кода JavaScript, а также проверки и редактирования HTML- и CSS-файлов, составляющих текущую веб-страницу. Общие сведения о средстве "Источники"
Значок сети Сеть Используйте средство "Сеть ", чтобы убедиться, что ресурсы скачиваются или отправляются должным образом. Проверьте свойства отдельного ресурса, например заголовки HTTP, содержимое или размер. Проверка сетевой активности
Значок производительности Производительность Анализ производительности среды выполнения— это то, как выполняется страница при ее запуске, а не при загрузке. Анализ производительности среды выполнения (руководство)
Значок памяти Память Найдите проблемы с памятью, влияющие на производительность страницы, включая утечки памяти, раздутие памяти и частые сборки мусора. Устранение проблем с памятью
Значок приложения Приложение Используйте средство приложения для управления хранилищем страниц веб-приложения, включая манифест, рабочие роли служб, локальное хранилище, файлы cookie, хранилище кэша и фоновые службы. Средство "Приложение" для управления хранилищем

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

Дополнительные инструменты

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

На панели быстрого просмотра в нижней части devTools также есть кнопка Другие инструменты (значок ". Чтобы отобразить или скрыть панель быстрого просмотра , нажмите клавишу ESC; или щелкните Настройка и управление средствами разработки (...) в правом верхнем углу, а затем выберите пункт Переключить панель быстрого просмотра.

Обзор инструментов в меню "Дополнительные инструменты"

Средство Назначение Статья
Трехмерный вид Изучите веб-страницу, переведенную в трехмерную перспективу. Выполните отладку веб-страницы, перейдя по контексту стека DOM или z-index. Навигация по слоям веб-страниц, z-индексу и модели DOM с помощью инструмента трехмерного представления
анимация; Проверьте и измените эффекты анимации CSS с помощью инспектора анимации в инструменте Анимация . Проверка и изменение эффектов анимации CSS
Изменения Отслеживает все изменения, внесенные в CSS или JavaScript в средствах разработки. Показывает, какие изменения следует внести в фактические исходные файлы после использования Средств разработки для изменения файлов веб-страниц, отправленных с сервера. Отслеживание изменений в файлах с помощью средства "Изменения"
Охват Помогите найти неиспользуемый код JavaScript и CSS, чтобы ускорить загрузку страницы и сохранить мобильные данные мобильных пользователей. Поиск неиспользуемого кода JavaScript и CSS с помощью средства покрытия
Анализатор сбоев Анализ сбоев веб-приложения. Можно ввести трассировку рабочего стека JavaScript, например для неустранимых исключений JavaScript, а затем применить исходные карты к трассировке стека, чтобы ускорить отладку. Средство анализатора сбоев
Общие сведения о CSS Поможет вам лучше понять CSS страницы и определить потенциальные улучшения. Средство обзора CSS
Ресурсы разработчиков Отображает URL-адреса ресурсов для веб-страницы. Средство "Ресурсы разработчика"
Issues Средство "Проблемы " автоматически анализирует текущую веб-страницу, сообщает о проблемах, сгруппированных по типам, а также предоставляет документацию для объяснения и устранения проблем. Поиск и устранение проблем с помощью средства "Проблемы"
Маяк Используйте средство Lighthouse для выявления и устранения распространенных проблем, влияющих на производительность, доступность и удобство работы сайта. Инструмент Lighthouse
Media Используйте это средство для просмотра информации и отладки проигрывателей мультимедиа на вкладке браузера. Просмотр и отладка сведений о проигрывателях мультимедиа
Инспектор памяти Проверьте Массив JavaScriptBuffer с помощью инспектора памяти. Проверка массива JavaScriptBuffer с помощью средства инспектора памяти
Условия сети Используйте средство "Условия сети ", чтобы отключить кэш браузера, настроить регулирование сети, задать строку агента пользователя и задать кодировки содержимого, такие как deflate, gzip и br. Средство "Условия сети"
Сетевая консоль Используйте средство сетевой консоли , чтобы внести изменения в сетевые запросы (сетевые вызовы), чтобы узнать, почему они завершаются сбоем. Изменение и воспроизведение любых сетевых запросов, а также выполнение подробных вызовов сетевого API. Средство сетевой консоли
Блокировка сетевых запросов Используйте средство блокировки сетевых запросов , чтобы протестировать блокирующие сетевые запросы к указанному шаблону URL-адреса и посмотреть, как ведет себя веб-страница. Средство блокировки сетевых запросов
Монитор производительности Предоставляет представление производительности веб-страницы в режиме реального времени, чтобы определить, откуда возникают проблемы с производительностью, что приводит к медленной работе веб-сайта. Определяет, связаны ли проблемы с высокой загрузкой памяти или ЦП, слишком частыми вычислениями макета и стиля или слишком большим количеством узлов DOM и прослушивателей событий. Измерение производительности страницы во время выполнения с помощью средства "Монитор производительности"
Быстрый источник Используйте средство быстрого источника для отображения или редактирования исходных файлов при использовании средства, отличного от средства "Источники ". Отображение или изменение исходных файлов с помощью средства быстрого доступа к исходному коду
Рекордер Используйте средство "Запись" , чтобы вручную записывать потоки пользователей, а затем автоматически воспроизводить их для ускорения тестирования и анализа производительности. Запись и воспроизведение потоков пользователей и измерение производительности
Перевод Используйте инструмент отрисовки , чтобы увидеть, как выглядит ваша веб-страница с различными параметрами отображения или недостатками зрения. Средство отрисовки, чтобы увидеть, как выглядит веб-страница с разными параметрами отображения или недостатками зрения
Поиск Используйте средство поиска , чтобы найти определенные исходные файлы для веб-страницы, включая HTML, CSS, JavaScript и файлы изображений. Поиск исходных файлов для страницы с помощью средства поиска
Безопасность Проверяет безопасность страницы. Общие сведения о проблемах с безопасностью с помощью средства "Безопасность"
Датчики Имитирует различные ориентации устройств. Имитация ориентации устройства с помощью средства "Датчики"
Монитор карт источника Используйте средство Монитор карт источника для мониторинга исходных карт. Средство мониторинга карт источника
WebAudio Используйте средство WebAudio для мониторинга трафика WebAudio. Средство WebAudio использует API WebAudio. Средство WebAudio
WebAuthn Используйте средство WebAuthn для создания виртуальных средств проверки подлинности на основе программного обеспечения и взаимодействия с ними. Эмуляция аутентификаторов и отладка WebAuthn

Меню Дополнительные инструменты (+) на панели действий и на панели быстрого просмотра является динамическим: в нем не отображаются все инструменты вкладки, открытые на этой панели инструментов.

Дополнительные способы доступа к средствам

Следующие функции являются дополнительными способами доступа к средствам.

  • Панель быстрого просмотра — это дополнительная панель инструментов и область для хранения инструментов под панелью действия или справа от нее.

  • Меню команд — это способ прямого использования функций инструментов.

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

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

Microsoft Edge DevTools потенциально включает в себя дополнительные средства, если выбрать поле проверка эксперимента в разделе Параметры инструментов разработки > Эксперименты. Например:

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

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

Средства панели действий — это средства, которые по умолчанию открываются на панели действий (верхняя панель). Средства быстрого просмотра — это средства, которые по умолчанию открываются на панели быстрого просмотра (в нижней области). Чтобы отобразить или скрыть панель быстрого просмотра : если фокус находится на средствах разработки, нажмите клавишу ESC.

В меню Команд сначала перечислены средства панели действий (обозначены меткой Панель ), а затем средства быстрого просмотра :

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

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

Контекстное меню для инструмента на панели быстрого просмотра, включая команду

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

Закрытие вкладок инструментов

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

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

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

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

Восстановление вкладок инструментов по умолчанию

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

  1. В DevTools выберите Настройка и управление Средствами разработки (значок Настройка и управление средствами разработки) >Параметры (значок параметров) >Параметры.

  2. Нажмите кнопку Восстановить значения по умолчанию и обновить . Средства разработки перезапускаются, и вкладки по умолчанию отображаются на обеих панелях инструментов.

См. также