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

Чтобы ознакомиться с последними функциями Инструментов разработки 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 версии 91 или более поздней волнистые подчеркивания отображаются под HTML в представлении DOM средства "Элементы ". Волнистые подчеркивания указывают на проблемы и предложения кода, связанные со специальными возможностями, совместимостью, производительностью и т. д.

Чтобы открыть средство "Проблемы " и узнать больше о проблеме и способах ее устранения:

• Нажмите и удерживайте клавишу SHIFT, а затем щелкните волнистый подчеркивание.

• Или щелкните правой кнопкой мыши волнистый подчеркивание и выберите пункт Показать в проблемах.

Выбор подчеркнутой ошибки в средстве "Элементы ":

Отображение сведений об ошибке в средстве "Проблемы ":

См. также:

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

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

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

• Выберите Настройка и управление средствами разработки (...) >Справка>, чтобы переключить подсказки DevTools.
• Нажмите клавиши CTRL+SHIFT+H (Windows, Linux) или COMMAND+SHIFT+H (macOS).
• Откройте меню команд и введите подсказки.

Затем наведите указатель мыши на каждую выделенную область инструментов разработки:

Чтобы отключить подсказки, нажмите клавишу ESC.

Обновление. Эта функция выпущена и больше не является экспериментальной.

Примечание. По состоянию на май 2022 г. подсказки не поддерживаются на панели действий.

Временная шкала обновления рабочей роли службы

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

• Установка
• Wait
• Activate

Сведения об обновлениях этой функции в проекте с открытым кодом Chromium в режиме реального времени см. в разделе 1066604 проблемы.

См. также:

• Жизненный цикл рабочей роли службы в разделе Использование рабочей роли службы для управления сетевыми запросами.
• Улучшения рабочих ролей службы — средства отладки devTools для прогрессивных веб-приложений и рабочих ролей служб.

Прогрессивные веб-приложения больше не отображают предупреждения для значков, не относящихся к квадрату

В Microsoft Edge версии 90 или более ранней, если манифест веб-приложения PWA содержал значок, отличный от квадрата, в разделе Ошибки и предупреждения для каждого значка, не являющегося квадратным, отображается предупреждение. В Microsoft Edge версии 91 или более поздней в разделе Манифест в средстве "Приложение " предупреждения не отображаются, если указать хотя бы один квадратный значок. Если вы не указали квадратные значки, появится следующее предупреждающее сообщение:

Most operating systems require square icons.  Please include at least one square icon in the array.

В Microsoft Edge версии 90 или более ранней для каждого значка, который не является квадратным, отображается ошибка:

В Microsoft Edge версии 91 или более поздней ошибка не отображается при указании хотя бы одного квадратного значка:

Чтобы просмотреть ошибки и предупреждения в манифесте веб-приложения, выберите Средство приложения>Раздел>Манифест приложения. Ошибки и предупреждения перечислены в разделе Ошибки и предупреждения .

Сведения об обновлениях этой функции в проекте с открытым кодом Chromium в режиме реального времени см. в разделе Проблемные 1185945.

См. также:

• Использование манифеста веб-приложения для интеграции PWA в ОС
• PWABuilder: генератор изображений — создает значки приложений для различных платформ, чтобы включить их в манифест веб-приложения.

Локализованные средства разработки теперь поддерживаются в браузерах на основе Chromium

Начиная с Версии 81 Microsoft Edge пользовательский интерфейс Средств разработки Microsoft Edge отображается на вашем языке. Многие разработчики используют средства разработчика, такие как StackOverflow и Visual Studio Code, на своем родном языке. Чтобы обеспечить аналогичную гибкость языка пользовательского интерфейса, команда Разработчиков Microsoft Edge, Команда Chrome DevTools и Команда Google Lighthouse совместно предоставляли одинаковые возможности во всех браузерах на основе Chromium.

См . раздел Изменение параметров языка DevTools.

Дополнительные сведения о совместной работе над этой функцией в проекте с открытым исходным кодом Chromium см. в разделе Проблема 1136655.

Переход к переменным CSS с помощью клавиатуры

Начиная с Microsoft Edge версии 88, в области Стили отображаются переменные CSS и предоставляется ссылка непосредственно на определение каждой переменной. В Microsoft Edge версии 91 или более поздней можно использовать клавиши со стрелками, чтобы легко переходить к переменным CSS. Чтобы открыть определение в области Стили , наведите указатель мыши на переменную и нажмите клавишу ВВОД:

Сведения об обновлениях этой функции в проекте с открытым кодом Chromium в режиме реального времени см. в разделе Проблемные 1187735.

См. также:

• Использование пользовательских свойств CSS (переменных)
• Справочник по функциям CSS

Проблемы автоматически отсортированы по серьезности

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

См. также:

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

Средства разработчика Microsoft Edge для Visual Studio Code версии 1.1.7

Расширение Microsoft Edge Tools for Visual Studio Code версии 1.1.7 предоставляет средства разработки из Microsoft Edge версии 88. Теперь это расширение поддерживает устройства ARM и больше не зависит от расширения Отладчика для Microsoft Edge.

Версия 1.1.7 включает следующие исправления ошибок и улучшения:

• Обновлена надежность закрытия целевого объекта.

• Обновлена боковая панель для автоматического обновления при отладке созданных или уничтоженных целевых объектов.

• Добавлено новое контекстное меню, которое обеспечивает более быстрый доступ к параметрам расширения и последней версии журнала изменений.

• Обновлен и упрощен выпуск документации по расширению, включая новейшие функции.

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

См. также:

• Расширение Средств разработки Microsoft Edge для Visual Studio Code

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

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

Визуализация привязки прокрутки CSS

В инструменте Элементы теперь можно переключить scroll-snap значок, чтобы проверить выравнивание при прокрутке CSS. Если к нему применен ЭЛЕМЕНТ HTML на веб-странице scroll-snap-type , рядом scroll-snap с ним отображается значок в инструменте Элементы . scroll-snap Щелкните значок, чтобы переключиться, чтобы отобразить наложение при прокрутке на веб-странице.

Пример веб-страницы см. в разделе Демонстрация прикрепления прокрутки. В примере точки отображаются на краях привязки. Порт прокрутки имеет сплошной контур, а элементы привязки имеют пунктирные контуры. Заполнение прокрутки заполнено зеленым цветом, а поле прокрутки — оранжевым:

Историю этой функции в проекте с открытым кодом Chromium см. в разделе Проблема 862450.

См. также:

• Проверка сетки CSS
• Справочник по функциям CSS

Новое средство инспектора памяти

Используйте новое средство инспектора памяти для проверки ArrayBuffer в памяти JavaScript и Wasm:

См. следующие статьи:

• Проверка javaScript ArrayBuffer с помощью средства инспектора памяти
• Использование панели отладчика для отладки кода JavaScript

Историю этой функции в проекте с открытым кодом Chromium см. в разделе Проблема 1166577.

Панель "Новые параметры эмблемы" в инструменте "Элементы"

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

1. Щелкните элемент правой кнопкой мыши и выберите пункт Параметры эмблемы. Область параметров эмблемы откроется в верхней части средства "Элементы ":

   

2. Чтобы отобразить (или скрыть) индикаторы событий, установите (или снимите) флажок рядом с именем значка.

См. также:

• Проверка, изменение и отладка HTML и CSS с помощью средства "Элементы"

Расширенный предварительный просмотр изображения с информацией о пропорциях

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

• Отрисованный размер
• Пропорции отрисовки
• Внутренний размер
• Внутреннее пропорции
• Размер файла

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

Историю этой функции в проекте с открытым кодом Chromium см. в разделе Проблемы 1149832 и 1170656.

См. также:

• Проверка, изменение и отладка HTML и CSS с помощью средства "Элементы"
• Проверка сетевой активности

Новые параметры для настройки кодирования содержимого в средстве "Сетевые условия"

В средстве "Сеть " нажмите кнопку Новые условия сети... рядом с раскрывающимся меню Регулирование , чтобы открыть средство "Условия сети ". Чтобы проверить, правильно ли кодируются ответы сервера для браузеров, которые не поддерживают gzip, brotli или другое будущее Content-Encoding:

1. Откройте средство "Условия сети ".

2. Перейдите в раздел Принятое кодирование содержимого.

3. Снимите флажок рядом с элементом, Content-Encoding который требуется протестировать.

См. также:

• Средство "Условия сети"

Историю этой функции в проекте с открытым кодом Chromium см. в разделе Проблема 1162042.

Усовершенствования области стилей

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

Теперь, чтобы отобразить вычисляемое значение CSS на вкладке Стили в инструменте Элементы :

1. Щелкните правой кнопкой мыши свойство CSS и выберите Пункт Просмотр вычисляемого значения:

   

См. также:

• Просмотрите только css, который фактически применяется к элементу в справочнике по функциям CSS.
• Просмотрите панель вычисленной боковой панели в области Стили в разделе Новые возможности в средствах разработки (Microsoft Edge 87).
• Изучите все вычислимые стили в навигации по средствам разработки с помощью специальных возможностей.

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

Поддержка ключевого слова accent-color

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

Дополнительные сведения о состоянии реализации Chromium см. в статье Свойство CSS Feature: accent-color. Чтобы включить эту функцию, перейдите к edge://flags#enable-experimental-web-platform-features и установите флажок Включено.

Историю этой функции в проекте с открытым исходным кодом Chromium см. в разделе Проблема 1092093.

См. также:

• Справочник по функциям CSS

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

Политика разрешений — это API веб-платформы, который предоставляет веб-сайту возможность разрешать или блокировать использование функций браузера в отдельном фрейме или в внедренном iframe им кадре. Чтобы отобразить сведения о том, почему функция заблокирована, выполните следующие действия:

1. Перейдите в раздел Политика разрешений OOPIF.
2. Откройте средство "Приложение ".
3. Щелкните кадр.
4. Перейдите в раздел Политика разрешений .
5. Найдите свойство Отключенные компоненты .
6. Щелкните Показать сведения.
7. Щелкните значок рядом с каждой политикой, чтобы перейти к запросу iframe или сети, который заблокировал функцию.

См. также:

• Объяснение политики разрешений
• Средство приложения для управления хранилищем

Сведения о журнале этой функции в проекте с открытым кодом Chromium см. в разделе Проблемные 1158827.

Фильтрация экспериментов в параметре Эксперименты

Поиск экспериментов быстрее с помощью нового фильтра экспериментов. Например, чтобы включить новые эксперименты для проблем с кодом:

1. В средствах разработки выберите Параметры () >Эксперименты.

2. В текстовом поле Фильтр начните вводить проблемы:

См. также:

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

Столбец "Новый заголовок Vary" в области хранилища кэша

В области Хранилища кэша средства приложения используйте новый Vary Header столбец, чтобы отобразить значения заголовков Vary HTTP-ответов:

Историю этой функции в проекте с открытым исходным кодом Chromium см. в разделе Проблема 1186049.

См. также:

• Различаются в протоколе передачи гипертекста (HTTP/1.1): семантика и содержимое.
• Просмотр данных кэша

Улучшения инструментов источников

Поддержка новых функций JavaScript

DevTools теперь поддерживает новые частные проверки торговой марки a.k.a. #foo in obj Функция языка JavaScript. Функция проверки частной торговой марки расширяет оператор для поддержки in частных полей класса (#) для определенного объекта. Попробуйте его в средствах консоли и источников .

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

1. В средстве Источники перейдите в область отладчика .
2. Разверните раздел Область :

См. также:

• Частные проверки торговой марки a.k.a. #foo in obj в v8.dev.
• в операторе MDN.
• Поля частного класса на v8.dev.

Историю этой функции в проекте с открытым кодом Chromium см. в проблеме 11374.

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

В Microsoft Edge версии 90 или более ранней devTools задают только точки останова в одном пакете. В Microsoft Edge версии 91 или более поздней при отладке общего компонента средства разработки правильно задают точки останова в нескольких пакетах.

Современные пакеты JavaScript, такие как Webpack и Накопительный пакет , поддерживают разделение кода на пакеты. См. раздел Разделение кода.

Историю этой функции в проекте с открытым исходным кодом Chromium см. в разделе Проблемы 1142705, 979000 и 1180794.

См. также:

• Приостановка кода с помощью точек останова

Поддержка предварительного просмотра при наведении курсора с помощью нотации скобок

Средство "Источники" теперь поддерживает предварительный просмотр выражений элементов JavaScript, использующих [] нотацию:

Историю этой функции в проекте с открытым кодом Chromium см. в разделе Проблема 1178305.

См. также:

• Функции отладки JavaScript

Улучшена структура HTML-файлов

DevTools теперь имеет улучшенную поддержку структуры для .html файлов. В средстве Источники откройте .html файл. Чтобы включить (или отключить) структуру кода, нажмите клавиши CTRL+SHIFT+O в Windows/Linux или COMMAND+SHIFT+O в macOS. Ранее в средствах разработки отображались только некоторые функции. На следующем рисунке devTools теперь правильно перечисляют все функции в структуре:

Историю этой функции в проекте с открытым исходным кодом Chromium см. в разделе Проблемы 761019 и 1191465.

См. также:

• Сочетания клавиш для инструментов источников в сочетаниях клавиш
• Обзор средства "Источники" с помощью области редактора

Правильная трассировка стека ошибок для отладки Wasm

В Microsoft Edge версии 90 или более ранней средства разработки отображали только универсальные ссылки Wasm в трассировках стека ошибок. В Microsoft Edge версии 91 или более поздней devTools разрешает встроенные запросы функции и отображает исходное расположение в разделе Трассировки стека ошибок для отладки Wasm. Дополнительные сведения о трассировке стека ошибок в консоли см. в разделе Errorстатьи Справочник по API объектов консоли.

В Microsoft Edge версии 91 или более поздней devTools разрешает встроенные запросы функций и отображает правильные трассировки стека ошибок для отладки Wasm.

В Microsoft Edge версии 90 и более ранних исходное расположение не отображается в трассировках стека ошибок. Исходные расположения включают .dsquare Предыдущие трассировки стека ошибок для отладки Wasm:

В Microsoft Edge версии 91 и более поздних исходное расположение отображается в трассировках стека ошибок. Правильные трассировки стека ошибок для отладки Wasm:

Историю этой функции в проекте с открытым исходным кодом Chromium см. в разделе Проблема 1189161.

Примечание.

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

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