Новые возможности средств разработчика (Microsoft Edge 96)

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

Видео: Microsoft Edge | Новые возможности DevTools 96

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

Команда средств разработчика Microsoft Edge экспериментирует с новым пользовательским интерфейсом средств разработчика: режимом фокусировки. Режим фокусировки уменьшает отвлекающие факторы и беспорядок с помощью более современного и упрощенного макета. Новая панель действий позволяет закреплять избранные инструменты на горизонтальной или вертикальной панели инструментов для более эффективного использования пространства на экране.

Обновление: Вертикальная панель действий больше не поддерживается в Microsoft Edge 144 и более поздних версиях.

Чтобы попробовать этот новый пользовательский интерфейс в Microsoft Edge версии 96, выберите "Параметры" () >"Эксперименты> врежиме фокусировки".

Начиная с Microsoft Edge версии 96, флажок эксперимента называется "Режим фокусировки ", а не "Режим фокусировки" и "Подсказки средств разработчика".

Этот пользовательский интерфейс все еще находится в разработке и может измениться в будущих версиях Microsoft Edge. Мы с нетерпением ждем ваших отзывов об этом новом пользовательском интерфейсе средств разработчика. Отправьте нам свой отзыв в Twitter @EdgeDevTools. Или, включив эксперимент "Режим фокусировки", в нижней части панели действий выберите "Справка" () "Отзывы", > чтобы открыть окно отправки отзыва.

См. также:

• Средства разработчика: пользовательский интерфейс режима фокусировки в репозитории MSEdgeExplainers .

Консоль снова появится на верхней и нижней панелях

С Microsoft Edge версии 87 можно перемещать любой инструмент между верхней и нижней панелями, включая средство "Консоль". Но мы слышали от разработчиков, что многократное перемещение средства консоли было обременительным. В Microsoft Edge версии 96 восстановлен стандартный интерфейс средства "Консоль", что позволяет быстро переключаться между полноэкранным представлением консоли (на верхней панели) и разделенным экраном (при этом консоль отображается на нижней панели), не перемещая инструмент "Консоль".

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

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

Если вы хотите, чтобы средство "Консоль" открывалось только в одном месте, вы можете настроить поведение консоли:

1. На главной панели инструментов или панели инструментов "Ящик" щелкните правой кнопкой мыши вкладку "Консоль " и выберите "Настроить консоль". Откроется страница настроек>.

2. В разделе "Консоль" снимите флажок "Показать вкладку "Консоль" на главной панели и панели, а затем нажмите "Закрыть " (x).

См. также:

• Средства панели действий и средства быстрого просмотра в разделе "О списке средств"
• Перемещение инструментов между верхней и нижней панелями в статье "Новые возможности средств разработчика (Microsoft Edge 87)".

Расширение Microsoft Edge DevTools для Visual Studio Code

Общие сведения об этом расширении см. в статье Расширение Microsoft Edge DevTools для Visual Studio Code.

Отображение веб-проекта в редакторе и имитация различных устройств

Расширение средств разработчика Microsoft Edge для Visual Studio Code теперь содержит подключаемый экранный ролик и эмуляцию устройства:

Вы можете просматривать свой веб-проект на специальной вкладке внутри Visual Studio Code, а также имитировать различные устройства:

Дополнительные сведения об эмуляции устройств см. в статье Эмуляция устройств и состояний.

Встроенные отчеты о проблемах в режиме реального времени

Кроме того, в расширении теперь доступны встроенные отчеты о проблемах в режиме реального времени. Вместо того, чтобы узнавать о проблемах в отдельном средстве, Visual Studio Code выделяет проблемы в исходном коде и сообщает о них в динамическом режиме во время ввода кода:

Дополнительные сведения см. в разделе "Встроенный и динамический анализ проблем".

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

В Microsoft Edge версии 96 средство "Источники " теперь предоставляет несколько уведомлений в пользовательском интерфейсе, когда средства разработчика не могут загрузить исходные карты. На вкладке "Страница " в области "Навигатор " в инструменте "Источники " вместо значка файла отображается значок предупреждения, для которых средства разработчика не могут загрузить исходные карты.

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

В информационной панели вы можете узнать больше о проблеме, нажав кнопку "Открыть в задачах ". Затем инструмент "Проблемы" открывается в консоли (теперь панель быстрого просмотра) в нижней части DevTools и предоставляет сведения о том, как решить проблему и правильно загрузить исходную карту в DevTools:

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

См. также:

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

Открытие исходных файлов в Visual Studio Code теперь лучше интегрируется со средством "Источники"

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

В Microsoft Edge версии 96 эксперимент с файлами с открытым исходным кодом в Visual Studio Code теперь лучше интегрируется со средством "Источники".

• Если средство "Источники" открыто, а затем включен эксперимент "Открытие исходных файлов в Visual Studio Code", настройка точек останова или открытие файлов теперь открывает средство "Источники", а не направляет вас к Visual Studio Code или документации для правильной настройки эксперимента.

  

• Как и в более ранних версиях Microsoft Edge, если средство "Источники" не открыто в средствах разработчика, а затем включен эксперимент "Открытие исходных файлов в Visual Studio Code", установка точек останова или открытие файлов из средств, отличных от инструмента "Источники", открывает файл в Visual Studio Code.

См. также:

• Открытие исходных файлов в Visual Studio Code: интеграция DevTools с Visual Studio Code.

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

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

В Microsoft Edge версии 96 эта проблема устранена. Теперь при выборе значка треугольника для любого раскрывающегося меню в средствах разработчика открывается раскрывающееся меню:

Примечание.

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные Google , и используемые в соответствии с условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Исходная страница для объявлений из проекта Chromium — Что нового в средствах разработчика (Chrome 96), автором которой является Джеслин Йен.

Эта работа предоставляется по лицензии Creative Commons Attribution 4.0 International License.

См. также

• Новые возможности средств разработчика Microsoft Edge
• Заметки о выпуске для веб-платформы Microsoft Edge