Сведения о списке инструментов
DevTools предоставляет более 30 средств:
- Два значка на панели действий для средства "Проверка " (
") и "Эмуляция устройства " (
). - Три постоянные вкладки инструментов на панели действий для инструментов "Элементы", "Консоль" и "Источники ".
- Необязательные вкладки для дополнительных инструментов, таких как средства приветствия и сеть .
- Дополнительные необязательные инструменты в меню Другие инструменты (
"), например инструмент "Трехмерный вид ".
Следующие функции являются дополнительными способами доступа к средствам.
- Панель быстрого просмотра — это дополнительная панель инструментов и область для хранения инструментов под панелью действия или справа от нее.
- Меню команд — это способ прямого использования функций инструментов.
- На страницах Параметры можно включить дополнительные функции инструментов.
Обзор всех средств
Средства разработки Microsoft Edge включают следующие средства.
| Средство | Назначение | Статья |
|---|---|---|
| Инструмент 3D-представления | Изучите веб-страницу, переведенную в трехмерную перспективу. Выполните отладку веб-страницы, перейдя по контексту стека DOM или z-index. | Навигация по слоям веб-страниц, z-индексу и модели DOM с помощью инструмента трехмерного представления |
| Средство анимации | Проверьте и измените эффекты анимации CSS с помощью инспектора анимации в инструменте Анимация . | Проверка и изменение эффектов анимации CSS |
| Средство приложения | Используйте средство приложения для управления хранилищем страниц веб-приложения, включая манифест, рабочие роли служб, локальное хранилище, файлы cookie, хранилище кэша и фоновые службы. | Средство "Приложение" для управления хранилищем |
| Средство "Изменения " | Отслеживает все изменения, внесенные в CSS или JavaScript в средствах разработки. Показывает, какие изменения следует внести в фактические исходные файлы после использования Средств разработки для изменения файлов веб-страниц, отправленных с сервера. | Отслеживание изменений в файлах с помощью средства "Изменения" |
| Консольное средство | Интеллектуальная, многофункциональная командная строка в средствах разработки. Отличный инструмент-компаньон для использования с другими инструментами. Предоставляет мощный способ создания скриптов, проверки текущей веб-страницы и управления текущей веб-страницей с помощью JavaScript. | Общие сведения о консоли |
| Средство покрытия | Помогите найти неиспользуемый код JavaScript и CSS, чтобы ускорить загрузку страницы и сохранить мобильные данные мобильных пользователей. | Поиск неиспользуемого кода JavaScript и CSS с помощью средства покрытия |
| Средство анализатора сбоев | Анализ сбоев веб-приложения. Можно ввести трассировку рабочего стека JavaScript, например для неустранимых исключений JavaScript, а затем применить исходные карты к трассировке стека, чтобы ускорить отладку. | Средство анализатора сбоев |
| Средство обзора CSS | Поможет вам лучше понять CSS страницы и определить потенциальные улучшения. | Средство обзора CSS |
| Средство "Отсоединенные элементы " | Чтобы повысить производительность веб-страницы, найдите отсоединенные элементы, которые браузер не может собирать мусор, а затем определите объект JavaScript, который по-прежнему ссылается на отсоединяемый элемент. Затем измените JavaScript, чтобы освободить элемент, чтобы уменьшить количество отсоединяемых элементов на странице, повысив производительность страницы и скорость реагирования. | Отладка утечек памяти DOM с помощью инструмента "Отсоединенные элементы" |
| Ресурсы для разработчиков | Отображает URL-адреса ресурсов для веб-страницы. | Средство "Ресурсы разработчика" |
| Эмуляция устройства | Используйте средство эмуляции устройства , также называемое режимом имитации устройства или режимом устройства, чтобы приблизительно определить, как страница выглядит и реагирует на них на мобильном устройстве. | Эмуляция мобильных устройств (эмуляция устройств) |
| Инструмент "Элементы " | Проверьте, измените и отладите HTML и CSS. Вы можете изменить в инструменте, отображая изменения в реальном времени в браузере. Выполните отладку HTML-кода с помощью дерева DOM, а затем проверьте css для веб-страницы и поработайте над ней. | Проверка, изменение и отладка HTML и CSS с помощью средства "Элементы" |
| Средство проверки | Используйте средство "Проверка ", чтобы просмотреть сведения об элементе на отрисованной веб-странице. Когда средство "Проверка " активно, наведите указатель мыши на элементы веб-страницы, а средства разработки добавляют на веб-страницу наложение информации и выделение сетки. | Анализ страниц с помощью средства проверки |
| Средство "Проблемы " | Средство "Проблемы " автоматически анализирует текущую веб-страницу, сообщает о проблемах, сгруппированных по типам, а также предоставляет документацию для объяснения и устранения проблем. | Поиск и устранение проблем с помощью средства "Проблемы" |
| Инструмент Lighthouse | Используйте средство Lighthouse для выявления и устранения распространенных проблем, влияющих на производительность, доступность и удобство работы сайта. | Инструмент Lighthouse |
| Средство мультимедиа | Используйте это средство для просмотра информации и отладки проигрывателей мультимедиа на вкладке браузера. | Просмотр и отладка сведений о проигрывателях мультимедиа |
| Средство "Память " | Найдите проблемы с памятью, влияющие на производительность страницы, включая утечки памяти, раздутие памяти и частые сборки мусора. | Устранение проблем с памятью |
| Средство "Инспектор памяти" | Проверьте Массив JavaScriptBuffer с помощью инспектора памяти. | Проверка javaScript ArrayBuffer с помощью средства инспектора памяти |
| Средство "Сеть" | Используйте средство "Сеть ", чтобы убедиться, что ресурсы скачиваются или отправляются должным образом. Проверьте свойства отдельного ресурса, например заголовки HTTP, содержимое или размер. | Проверка сетевой активности |
| Средство "Условия сети " | Используйте средство "Условия сети ", чтобы отключить кэш браузера, настроить регулирование сети, задать строку агента пользователя и задать кодировки содержимого, такие как deflate, gzip и br. | Средство "Условия сети" |
| Средство сетевой консоли | Используйте средство сетевой консоли , чтобы внести изменения в сетевые запросы (сетевые вызовы), чтобы узнать, почему они завершаются сбоем. Изменение и воспроизведение любых сетевых запросов, а также выполнение подробных вызовов сетевого API. | Средство сетевой консоли |
| Средство блокировки сетевых запросов | Используйте средство блокировки сетевых запросов , чтобы протестировать блокирующие сетевые запросы к указанному шаблону URL-адреса и посмотреть, как ведет себя веб-страница. | Средство блокировки сетевых запросов |
| Средство повышения производительности | Анализ производительности среды выполнения— это то, как выполняется страница при ее запуске, а не при загрузке. | Общие сведения о средстве производительности |
| Средство "Монитор производительности " | Предоставляет представление производительности веб-страницы в режиме реального времени, чтобы определить, откуда возникают проблемы с производительностью, что приводит к медленной работе веб-сайта. Определяет, связаны ли проблемы с высокой загрузкой памяти или ЦП, слишком частыми вычислениями макета и стиля или слишком большим количеством узлов DOM и прослушивателей событий. | Измерение производительности страницы во время выполнения с помощью средства "Монитор производительности" |
| Средство быстрого источника | Используйте средство быстрого источника для отображения или редактирования исходных файлов при использовании средства, отличного от средства "Источники ". | Отображение или изменение исходных файлов с помощью средства быстрого доступа к исходному коду |
| Средство записи | Используйте средство "Запись" , чтобы вручную записывать потоки пользователей, а затем автоматически воспроизводить их для ускорения тестирования и анализа производительности. | Запись и воспроизведение потоков пользователей и измерение производительности |
| Средство отрисовки | Используйте инструмент отрисовки , чтобы увидеть, как выглядит ваша веб-страница с различными параметрами отображения или недостатками зрения. | Средство отрисовки, чтобы увидеть, как выглядит веб-страница с разными параметрами отображения или недостатками зрения |
| Средство поиска | Используйте средство поиска , чтобы найти определенные исходные файлы для веб-страницы, включая HTML, CSS, JavaScript и файлы изображений. | Поиск исходных файлов для страницы с помощью средства поиска |
| Средство безопасности | Проверяет безопасность страницы. | Общие сведения о проблемах с безопасностью с помощью средства "Безопасность" |
| Инструмент "Датчики " | Имитирует различные ориентации устройств. | Имитация ориентации устройства с помощью средства "Датчики" |
| Средство мониторинга карт источника | Используйте средство Монитор карт источника для мониторинга исходных карт. | Средство мониторинга карт источника |
| Средство "Источники " | Используйте средство Источники для просмотра, изменения и отладки интерфейсного кода JavaScript, а также проверки и редактирования HTML- и CSS-файлов, составляющих текущую веб-страницу. | Общие сведения о средстве "Источники" |
| Средство WebAudio | Используйте средство WebAudio для мониторинга трафика WebAudio. Средство WebAudio использует API WebAudio. | Средство WebAudio |
| Средство WebAuthn | Используйте средство WebAuthn для создания виртуальных средств проверки подлинности на основе программного обеспечения и взаимодействия с ними. | Эмуляция аутентификаторов и отладка WebAuthn |
| Средство приветствия | Средство приветствия открывается при первом открытии средств разработки. В нем отображаются ссылки на документацию разработчика, последние функции, заметки о выпуске и возможность связаться с командой Средств разработки Microsoft Edge. | Средство приветствия |
Экспериментальные инструменты
Microsoft Edge DevTools потенциально включает в себя дополнительные средства, если выбрать поле проверка эксперимента в разделе Параметры инструментов разработки > Эксперименты. Например:
| Средство | Назначение | Статья |
|---|---|---|
| Средство мониторинга протокола | Отображает сообщения протокола DevTools, отправляемые и полученные средствами разработки для отладки проверенной страницы. | Монитор протокола в экспериментальных функциях. |
Меню "Дополнительные инструменты"
Меню Дополнительные инструменты (+) на панели действий и на панели быстрого просмотра является динамическим: в нем не отображаются все инструменты вкладки, открытые на этой панели инструментов.
Средства панели действий и средства быстрого просмотра
Средства панели действий — это средства, которые по умолчанию открываются на панели действий (верхняя панель). Средства быстрого просмотра — это средства, которые по умолчанию открываются на панели быстрого просмотра (в нижней области). Чтобы отобразить или скрыть панель быстрого просмотра : если фокус находится на средствах разработки, нажмите клавишу ESC.
В меню Команд сначала перечислены средства панели действий (обозначены меткой Панель ), а затем средства быстрого просмотра :
Чтобы переместить инструмент на другую панель инструментов, щелкните правой кнопкой мыши вкладку инструмента и выберите Пункты быстрого просмотра вниз, Перейти в сторону быстрого просмотра, Переместить в верхнюю панель действий или Переместить в левую панель действий:
Чтобы открыть меню Command, нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS). Кроме того, нажмите кнопку Настройка и управление средствами разработки (
), а затем выберите Выполнить команду.
Закрытие вкладок инструментов
Чтобы закрыть вкладку инструментов на панели инструментов, щелкните ее правой кнопкой мыши и выберите команду Удалить из панели действий или Удалить из быстрого представления:
Инструменты "Элементы", "Консоль" и "Источники" являются постоянными вкладками и не могут быть закрыты или перемещены из панели действий на панель быстрого просмотра. Вы можете перетащить их вкладки, чтобы изменить их порядок на панели действий.
Консоль также является постоянной вкладкой на панели быстрого просмотра. В отличие от этого, средство "Проблемы " на панели инструментов быстрого просмотра можно удалить.
Восстановление вкладок инструментов по умолчанию
Чтобы восстановить все вкладки инструментов по умолчанию на панели действий и в режиме быстрого просмотра:
В DevTools выберите Настройка и управление Средствами разработки (
) >Параметры (
) >Параметры.Нажмите кнопку Восстановить значения по умолчанию и обновить . Средства разработки перезапускаются, и вкладки по умолчанию отображаются на обеих панелях инструментов.
См. также
- Общие сведения о средствах разработки . Аналогичный описанию в данной статье, но более широкий охват, с введением верхнего уровня в DevTools.