• Статья
  • Чтение занимает 7 мин

В следующих разделах приводится список объявлений от команды Microsoft Edge DevTools. Чтобы попробовать новые функции в DevTools, расширениях Microsoft Visual Studio Code и многом другом, просмотрите объявления. Чтобы узнавать о последних и лучших функциях в средствах разработчика, скачайте Предварительные каналы Microsoft Edge и подпишитесь на команду Microsoft Edge DevTools в Twitter.

Совет

Конференция Microsoft Build 2021 прошла 25–27 мая. Вот видео с конференции Build об обновлениях средств разработчика: Microsoft Edge | Состояние платформы — Microsoft Edge предоставляет комплексную согласованную платформу с инструментами для разработчиков. По мере прекращения поддержки наших устаревших браузеров Microsoft Edge скоро станет единственным поддерживаемым браузером от Майкрософт для Windows 10 и более поздних версий. Присоединяйтесь к нам, чтобы узнать о последних новостях платформы Microsoft Edge, средствах и веб-приложениях.

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

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

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

Быстрое добавление инструментов с помощью новой кнопки «Дополнительные средства»

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

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

Меню Дополнительные средства было доступно в качестве эксперимента Microsoft Edge версии 89 и теперь присутствует всегда.

Кнопка "Дополнительные средства" на верхней панели инструментов и панели инструментов приложения

Кнопка Дополнительные средства на верхней панели инструментов и панели инструментов приложения

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

Меню Дополнительные средства

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

  • Интервал вокруг вкладки.
  • Интервал вокруг кнопки закрытия (x) на вкладке.
  • Цвет фона при наведении курсора на вкладку.
  • Подсказка для кнопки закрытия (x) вкладки.
  • Более высокая контрастность для кнопки закрытия (x) вкладки.

Например, в инструменте Производительность Performance при наведении курсора на вкладку Сеть эти улучшения помогают предотвратить случайное закрытие инструмента Сеть.

Вкладки до переформатирования:

Вкладки до переформатирования

Вкладки после переформатирования:

Вкладки после переформатирования

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

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

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

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

Улучшенная поддержка средств чтения с экрана в консоли

До Microsoft Edge версии 92 в консоли специальные возможности, например средства чтения с экрана, не объявляли предложения автозаполнения или результаты оцениваемых выражений. Это исправлено.

В разделе Консоль: средства чтения с экрана теперь объявляют текущее выбранное предложение автозаполнения:

В разделе "Консоль": средства чтения с экрана теперь объявляют текущее выбранное предложение автозаполнения

В разделе Консоль: средства чтения с экрана теперь объявляют результат оцениваемого выражения:

В разделе "Консоль": средства чтения с экрана теперь объявляют результат оцениваемого выражения

Средство просмотра исходного порядка

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

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

Активация средства просмотра исходного порядка показывает порядок элементов в источнике в виде наложения на странице

Активация средства просмотра исходного порядка показывает порядок элементов в источнике в виде наложения на странице

Дополнительные сведения см. в статье Тестирование поддержки клавиатуры с помощью средства просмотра исходного порядка.

Чтобы просмотреть историю этой функции в проекте с открытым исходным кодом Chromium, перейдите к проблеме 1094406.

Подсказки агента пользователя клиенту для устройств на вкладке «Состояние сети»

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

Агент пользователя

Агент пользователя

Дополнительные сведения см. в статье Подсказки агента пользователя для клиента.

Чтобы просмотреть историю этой функции в проекте с открытым исходным кодом Chromium, перейдите к проблеме 1174299.

В расширении Средства разработчика Microsoft Edge для Visual Studio Code версии 1.1.8 для Microsoft Visual Studio Code реализованы следующие изменения по сравнению с предыдущим выпуском. Microsoft Visual Studio Code обновляет расширения автоматически. Чтобы вручную выполнить обновление до версии 1.1.8, перейдите в раздел Обновление расширений вручную.

Вы можете сообщить о проблемах и принять участие в работе над расширением в репозитории GitHub vscode-edge-devtools.

Контекстная документация и пользовательский интерфейс, чтобы упростить использование расширения средств разработчика

Версия 1.1.8 расширения Средства разработчика Microsoft Edge для Visual Studio Code теперь содержит более простой способ запуска нового экземпляра Microsoft Edge с инструкциями, кнопками, ссылками и страницей документации для руководства.

  • При нажатии кнопки Средства Microsoft Edge в панели действий Visual Studio Code вместо пустой панели открывается панель Средства Microsoft Edge: цели, содержащая пояснительный текст, кнопки и ссылки для руководства.

  • Когда вы открываете новый экземпляр Microsoft Edge из Visual Studio Code, Microsoft Edge теперь вместо пустой страницы демонстрирует начальную страницу с объяснением, как использовать расширение средств разработчика.

  • Панель Средства Microsoft Edge: цели теперь содержит кнопку создания launch.json и инструкции для запуска проекта по отладке в Microsoft Edge.

Дополнительные сведения см. в статье Использование средств.

Объявления из проекта Chromium

В следующих разделах представлены дополнительные функции, доступные в Microsoft Edge, которые были внесены в открытый проект Chromium.

Редактор сетки CSS

Теперь с помощью нового редактора сетки CSS вы можете просматривать и создавать макеты сетки CSS.

Если к элементу HTML на вашей странице применен параметр display: grid или display: inline-grid, рядом с ним отображается значок сетки на вкладке Стили. Щелкните значок сетки, чтобы отобразить или скрыть редактор сетки CSS. В редакторе сетки CSS щелкните любой из значков (например, justify-content: space-around) для предварительного просмотра макета на отрисованной странице. Гибкий макет работает аналогично.

Редактор сетки CSS

Редактор сетки CSS

Чтобы просмотреть историю этой функции в проекте с открытым исходным кодом Chromium, перейдите к проблеме 1203241.

Поддержка повторного объявления параметра const в консоли

Консоль теперь поддерживает повторное объявление переменных const в отдельных сценариях REPL (например, при запуске оператора в консоли) в дополнение к повторным объявлениям существующих параметров let и class. Эта поддержка позволяет экспериментировать с различными объявлениями для переменных const, не обновляя страницу. Ранее в средствах разработчика возникала синтаксическая ошибка при повторном объявлении привязки const.

См. пример ниже. const повторное объявление поддерживается в отдельных сценариях REPL (см. переменную a). Обратите внимание, что следующие сценарии не поддерживаются по умолчанию.

  • const повторное объявление сценариев страниц не допускается в сценариях REPL.
  • const повторное объявление в том же сценарии REPL не допускается (см. переменную b).

В консоли разрешено повторное объявление переменной const

В консоли разрешено повторное объявление переменной const

Чтобы узнать, как запустить одиночный сценарий REPL или многострочный сценарий REPL, см. статью Запуск JavaScript в консоли.

Чтобы просмотреть историю этой функции в проекте с открытым исходным кодом Chromium, перейдите к проблеме 1076427.

Новый ярлык для просмотра сведений iframe

Чтобы быстро просмотреть сведения iframe, теперь можно щелкнуть правой кнопкой мыши элемент iframe в инструменте Элементы и выбрать Показать сведения об iframe.

представление сведений об iframe

представление сведений об iframe

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

Сведения о фрейме в средстве "Приложение"

Сведения о фрейме в средстве Приложение

Чтобы просмотреть историю этой функции в проекте с открытым исходным кодом Chromium, перейдите к проблеме 1192084.

Расширенная поддержка отладки CORS

Ошибки общего доступа к ресурсам независимо от источника (CORS) теперь отображаются на вкладке Проблемы. Существуют различные потенциальные причины ошибок CORS. Щелкните, чтобы развернуть каждую проблему для ознакомления с возможными причинами и решениями.

Проблемы CORS на вкладке "Проблемы"

Проблемы CORS на вкладке «Проблемы»

Чтобы просмотреть историю этой функции в проекте с открытым исходным кодом Chromium, перейдите к проблеме 1141824.

Переименование XHR-фильтра на Fetch/XHR

В средстве Сеть фильтр XHR теперь переименован на Fetch/XHR. Благодаря этому изменению проще понять, что этот фильтр включает как сетевые запросы API XMLHttpRequest, так и Fetch.

Средство "Сеть" теперь отображает Fetch/XHR вместо XHR

Средство Сеть теперь отображает Fetch/XHR вместо XHR

Дополнительные сведения:

  • Спецификация XMLHttpRequest
  • Спецификация Fetch

Чтобы просмотреть историю этой функции в проекте с открытым исходным кодом Chromium, перейдите к проблеме 1201398.

Фильтрация типа ресурса Wasm в средстве «Сеть»

В средстве Сеть теперь можно выбрать новый фильтр Wasm для фильтрации сетевых запросов WebAssembly.

Фильтр по Wasm

Фильтр по Wasm

Чтобы просмотреть историю этой функции в проекте с открытым исходным кодом Chromium, перейдите к проблеме 1103638.

Пересечения вычислений теперь включены в инструмент «Производительность»

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

Пересечения вычислений в инструменте "Производительность"

Пересечения вычислений в инструменте Производительность

Дополнительные сведения о наблюдателях пересечений см. в статье Доверяй, но наблюдай: наблюдатель пересечений версии 2. Сведения об использовании схемы пламени см. в статье Анализ записи производительности. Чтобы просмотреть историю этой функции в проекте с открытым исходным кодом Chromium, перейдите к проблеме 1199137.

Скачивание предварительных каналов Microsoft Edge

Если вы используете операционную систему Windows, Linux или macOS, рассмотрите возможность использования предварительных каналов Microsoft Edge в качества браузера для разработки по умолчанию. Предварительные каналы предоставляют доступ к новейшим функциям средств разработчика.

Лицензия Creative Commons. Эта работа предоставляется в рамках международной лицензии Creative Commons Attribution 4.0 International License.