Бөлісу құралы:


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

Чтобы ознакомиться с последними функциями Инструментов разработки Microsoft Edge и расширения Microsoft Edge DevTools для Microsoft Visual Studio Code и Visual Studio, ознакомьтесь с этими объявлениями.

Чтобы оставаться в курсе событий и получать последние возможности DevTools, скачайте предварительную версию Microsoft Edge для участников программы предварительной оценки. Независимо от того, используете ли вы Windows, Linux или macOS, рассмотрите возможность использования Canary (или другого канала предварительной версии) в качестве браузера разработки по умолчанию. Бета-версии, версии Dev и Canary Microsoft Edge выполняются как отдельные приложения, параллельно с стабильной выпущенной версией Microsoft Edge. См . статью Каналы предварительной оценки Microsoft Edge.

Чтобы узнать последние объявления, следите за новостями команды Microsoft Edge в Twitter. Чтобы сообщить о проблеме с DevTools или запросить новую функцию, отправьте сообщение о проблеме в репозиторий MicrosoftEdge/DevTools .

Объявления от команды разработчиков Microsoft Edge

Использование средств разработки в режиме высокой контрастности Windows

Средства разработки Microsoft Edge теперь отображаются в режиме высокой контрастности, когда Windows находится в режиме высокой контрастности.

Средства разработки Microsoft Edge в режиме высокой контрастности

Следуйте инструкциям, чтобы включить режим высокой контрастности в Windows. Чтобы открыть средства разработки в Microsoft Edge, выберите F12 или CTRL+SHIFT+I. Средства разработки отображаются в режиме высокой контрастности.

Примечание. DevTools в настоящее время поддерживает режим высокой контрастности в Windows, но не в macOS.

Проблема Chromium #1048378

См. также:

Сопоставление сочетаний клавиш в средствах разработки с Visual Studio Code

Из ваших отзывов и общедоступного средства отслеживания проблем Chromium команда Разработчиков Microsoft Edge узнала, что вы хотите настроить сочетания клавиш в DevTools. В Microsoft Edge 84 теперь можно сопоставлять сочетания клавиш в средствах разработки с Visual Studio Code, которая является лишь одной из функций, над которыми команда работает над настройкой сочетаний клавиш.

Сопоставление сочетаний клавиш в средствах разработки с Visual Studio Code

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

  1. В средствах разработки откройте раздел Параметры , нажав кнопку ? или щелкнув значок Параметры (значок параметров средств разработки) в средствах разработки.

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

  3. Перезагрузите средства разработки.

  4. Снова откройте параметры и выберите раздел Ярлыки .

  5. Щелкните раскрывающийся список Сопоставления ярлыков из предустановленного списка, выберите DevTools (По умолчанию) и выберите Visual Studio Code.

Сочетания клавиш в Средствах разработки теперь соответствуют сочетаниям клавиш для эквивалентных действий в Visual Studio Code.

Например, сочетание клавиш для приостановки или продолжения выполнения скрипта в Visual Studio CodeF5. В предустановке DevTools (по умолчанию) это же сочетание клавиш в Средствах разработки — F8, но с предустановкой Visual Studio Code теперь это сочетание клавиши F5.

Эта функция в настоящее время доступна в Microsoft Edge 84 в качестве эксперимента, поэтому поделитесь своим отзывом с командой!

Проблема с Chromium #174309

См. также:

Удаленная отладка эмуляторов Surface Duo

Теперь вы можете удаленно отлаживать веб-содержимое, которое выполняется в эмуляторе Surface Duo , используя все возможности Microsoft Edge DevTools.

С помощью эмулятора Surface Duo вы можете проверить, как веб-содержимое отображается на новом классе складных и двухэкранных устройств. Эмулятор запускает операционную систему Android и предоставляет приложение Microsoft Edge для Android. Загрузите веб-содержимое в приложение Microsoft Edge и отладите его с помощью средств разработки:

Приложение Microsoft Edge, работающее в эмуляторе Surface Duo

На edge://inspect странице в классическом экземпляре Microsoft Edge отображается surfaceDuoEmulator со списком открытых вкладок или PWA , которые выполняются в эмуляторе Surface Duo:

На странице edge://inspect отображается список открытых вкладок в приложении Microsoft Edge, работающем в эмуляторе.

Нажмите кнопку Проверить для вкладки или PWA, которую требуется отладить, чтобы открыть средства разработки. Выполните пошаговые инструкции по удаленной отладке веб-содержимого в эмуляторе Surface Duo: удаленная отладка эмуляторов Surface Duo.

Более простое изменение размера панели быстрого просмотра средств разработки

В Microsoft Edge 83 или более ранней версии вы изменяли размер панели (теперь панель быстрого просмотра ), наведите указатель мыши на панель инструментов ящика. Панель управления вела себя иначе, чем другие элементы управления изменением размера для панелей в средствах разработки, где вы навели указатель мыши на границу области, чтобы изменить ее размер. На следующем рисунке показано, как изменение размера ящика работало в Microsoft Edge версии 83 или более ранней:

Изменение размера ящика в Microsoft Edge 83

Начиная с Microsoft Edge 84, вы можете изменить размер ящика , наведите указатель мыши на границу. Это изменение выравнивает поведение при изменении размера панели с другими панелями в средствах разработки. На следующем рисунке показано, как изменить размер ящика в Microsoft Edge 84 или более поздней версии:

Изменение размера ящика в Microsoft Edge 84

Проблема Chromium #1076112

Фокус отображаются кнопки навигации с помощью экранного вещания

При удаленной отладке устройства Android, устройства с Windows 10 или более поздней версии или эмулятора Surface Duo можно переключать экранную трансляцию с помощью значка Переключить экранную трансляцию в левом верхнем углу средства разработки. Если включена трансляция с экрана, вы можете перемещаться по вкладке в Microsoft Edge на удаленном устройстве из окна Средства разработки.

В Microsoft Edge 84 эти кнопки навигации теперь также доступны с клавиатуры. Например, нажатие клавиш SHIFT+TAB на панели URL-адреса с экранной трансляцией помещает фокус на кнопку Обновить :

Нажатие клавиш SHIFT+TAB на экранной строке URL-адреса помещает фокус на кнопку

Проблема Chromium #1081486

Панель сведений о сети теперь доступна

В Microsoft Edge 84 область Сведения в средстве "Сеть" теперь будет сосредоточена при открытии ресурса в журнале сети. Это изменение позволяет средствам чтения с экрана считывать содержимое панели "Сведения " и взаимодействовать с ним.

Панель

Проблема с Chromium #963183

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

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

Устранение проблем с сайтом с помощью нового средства "Проблемы" в средстве разработки

Новое средство "Проблемы " на панели " Панельбыстрого просмотра " в нижней части devTools снижает усталость и нагрузку на консоль. В настоящее время консоль является центральным местом для разработчиков веб-сайтов, библиотек, платформ и Microsoft Edge для регистрации сообщений, предупреждений и ошибок. Средство "Проблемы " объединяет предупреждения из браузера структурированным, агрегированным и практическим способом. Средство "Проблемы" содержит ссылки на затронутые ресурсы в средствах разработки и содержит рекомендации по устранению проблем.

Со временем в средстве "Проблемы ", а не в консоли, появится больше предупреждений, чтобы упростить сообщения консоли .

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

Средство

Проблема Chromium #1068116

Просмотр сведений о специальных возможностях в подсказке "Режим проверки"

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

Подсказка режима проверки со сведениями о специальных возможностях

Проблема с Chromium #1040025

См. также:

Обновления панели производительности

См. также:

После записи производительности нагрузки на панели Производительность теперь отображаются сведения об общем времени блокировки (ТБT) в нижнем колонтитуле. ТБТ — это метрика производительности нагрузки, которая помогает количественно определить, сколько времени занимает страница, чтобы стать пригодной для использования. TBT по существу измеряет, как долго страница только кажется пригодной для использования (так как содержимое отображается на экране); но страница на самом деле не подходит для использования, так как JavaScript блокирует основной поток и поэтому страница не реагирует на входные данные пользователем. ТБТ — это основная метрика для приближения первой задержки ввода.

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

Вместо этого выберите значок Записи, вручную перезагрузите страницу, дождитесь загрузки страницы, а затем остановите запись.

Если Total Blocking Time: Unavailable отображается значение , Средства разработки Microsoft Edge не получили необходимые сведения из внутренних данных профилирования в Microsoft Edge.

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

Проблема с Chromium #1054381

См. также:

События смены макета в разделе "Новый интерфейс"

Новый раздел "Интерфейс " на панели "Производительность " помогает обнаруживать изменения макета. Совокупное смещение макета (CLS) — это метрика, которая помогает количественно определить нежелательную визуальную нестабильность.

Щелкните событие Shift макета , чтобы отобразить сведения о смене макета в области Сводка . Наведите указатель мыши на поля "Перемещено" и "Перемещено в ", чтобы визуализировать место сдвига макета.

Сведения о смене макета

См. также:

Более точная терминология обещаний в консоли

При ведении журнала Promiseконсоль неправильно указала PromiseStatus значение , равное resolved.

Пример консоли с использованием старой разрешенной терминологии

Консоль теперь использует термин fulfilled, который соответствует спецификацииPromise. Дополнительные сведения о спецификации см. в Promise разделе Состояния и судьбы на сайте GitHub.

Пример консоли с использованием новой реализованной терминологии

Проблема версии 8 No 6751

См. также:

Обновления области стилей

См. также:

Поддержка ключевого слова revert

Пользовательский интерфейс автозавершения области Стили теперь обнаруживает ключевое слово ОТМЕНА CSS, которое возвращает каскадное значение свойства до предыдущего значения, примененного к стилю элемента.

Проблема Chromium #1075437

См. также:

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

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

Наведите указатель мыши на значение фонового изображения

Проблема Chromium #1040019

См. также:

Теперь в палитре используется функциональная цветовая нотация с разделителем пространства

Css Color Module Level 4 указывает, что цветовые функции, такие как rgb(), должны поддерживать аргументы, разделенные пробелами. Например, rgb(0, 0, 0) является эквивалентом rbg(0 0 0).

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

Использование аргументов, разделенных пробелами, в области

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

Microsoft Edge DevTools использует новый синтаксис, так как предстоящие функции CSS, такие как color(), не поддерживают устаревший синтаксис аргументов с разделими-запятыми.

Синтаксис аргумента, разделенного пробелами, некоторое время поддерживается в большинстве браузеров. См . раздел Можно ли использовать: функциональные цветовые нотации с разделим пробелами?

Проблема Chromium #1072952

Устаревание панели "Свойства" на панели "Элементы"

Панель "Свойства " в средстве "Элементы" не рекомендуется использовать. Запустите console.dir($0) в консоли .

Панель нерекомендуемых свойств

Справочные материалы

Поддержка сочетаний клавиш приложений в области манифеста

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

Ярлыки приложений в области манифеста средства

См. также:

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

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