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

Чтобы проверка последние возможности Microsoft Edge DevTools и расширения 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 .

Группирование инструментов в режиме фокусировки

Режим фокусировки — это экспериментальный интерфейс, который позволяет группировать различные средства на основе собственных сценариев отладки. Новая панель действий , отображаемая слева, содержит предопределенные группы инструментов, такие как Макет и Отладка. Чтобы настроить каждую группу инструментов, закройте инструменты значком Закрыть (X) или добавьте новые средства со значком "Дополнительные инструменты " (+).

Чтобы включить эксперимент, см. статью Включение или отключение эксперимента , а также установите флажки рядом с пунктами Режим фокусировки и Подсказки средств разработки и Меню вкладки Включить и кнопки, чтобы открыть другие инструменты. Дополнительные сведения об этой функции или комментарии с вопросами и идеями см. в статье Средства разработки: пользовательский интерфейс режима фокусировки.

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

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

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

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

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

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

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

Настройка сочетаний клавиш в параметрах

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

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

1. Откройте DevTools и выберите Параметры Ярлыки>.

2. Выберите действие, которое нужно настроить.

3. Щелкните значок Изменить ().

4. Нажмите клавиши, которые нужно привязать к действию.

5. Щелкните значок галочки ().

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

Microsoft Edge DevTools для расширения Visual Studio Code обновление 1.1.4

В средствах разработчика Microsoft Edge для Visual Studio Code версии 1.1.4 для Microsoft Visual Studio Code теперь отображается favicon рядом с каждым из экземпляров DevTools. Сообщения консоли из Microsoft Edge теперь отображаются в консоли DevTools в разделе Выходные данные Microsoft Visual Studio Code. Microsoft Visual Studio Code автоматически обновляет расширения. Сведения о том, как вручную выполнить обновление до версии 1.1.4, см. в статье Обновление расширения вручную. Вы можете отправить сведения о проблемах и внести свой вклад в расширение в репозитории vscode-edge-devtools GitHub.

На следующем рисунке показаны сообщения с примера веб-страницы, зарегистрированной в средстве консоли в Microsoft Edge:

На следующем рисунке отображаются те же сообщения с примера веб-страницы, вошедшего в консоль DevTools в разделе Выходные данные Microsoft Visual Studio Code:

См. также:

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

Улучшено редактирование CSS Flexbox с помощью визуального редактора Flexbox и нескольких наложений

DevTools теперь имеет специальные средства отладки CSS Flexbox. display: flex Если стиль ИЛИ display: inline-flex CSS применяется к элементу HTML, рядом с этим элементом в инструменте Элементы появится гибкий значок. Чтобы отобразить (или скрыть) наложение flex на веб-странице, щелкните значок flex .

Чтобы открыть редактор Flexbox , в средстве Элементы перейдите на вкладку Стили и щелкните новый значок рядом со стилем display: flex или display: inline-flex . Редактор Flexbox предоставляет быстрый способ изменения свойств flexbox:

Кроме того, в разделе Flexbox на панели Макет отображаются все элементы flexbox на веб-странице. Вы можете переключить наложение каждого элемента:

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

См. также:

• Изменение стилей и параметров шрифтов CSS в области Стили
• Обновление файлов .css из вкладки Стили (css зеркало редактирование)

Улучшения навигации с помощью клавиатуры для сетевых запросов

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

В Microsoft Edge версии 90 можно развернуть или свернуть цепочку запросов с помощью клавиш со стрелками на клавиатуре в области инициатора . Теперь выделенный сетевой запрос в цепочке также выделен.

Щелкните сетевой запрос, а затем щелкните область Инициатор :

Разверните или свернуть цепочку инициатора запроса и следуйте выделенной строке:

Дополнительные сведения об инициаторах в средстве "Сеть" см. в разделе Отображение инициаторов и зависимостей.

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

Фильтрация в консоли является более согласованной

При фильтрации с помощью боковой панели консоли фильтры в раскрывающемся списке Уровни журналов недоступны. Ранее раскрывающийся список Уровни журналов выделялся при наведении указателя мыши на него, даже если был выбран фильтр на боковой панели консоли . В Microsoft Edge версии 90 раскрывающийся список Уровни журнала больше не выделяется при наведении на него указателя мыши при выборе фильтра на боковой панели консоли .

Дополнительные сведения о фильтрации в консоли см. в статье Фильтрация сообщений в разделе Справочник по функциям консоли.

Ранее, если открыть боковую панель консоли и наведите указатель мыши на уровни по умолчанию, она была выделена:

Начиная с Microsoft Edge 90, если щелкнуть боковую панель консоли и наведите указатель мыши на уровни по умолчанию, он не выделяет:

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

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

Консоль теперь экранирует символы с двойными кавычками

Ранее консоль не выводла допустимые символы с двойными кавычками (") в строках JavaScript. Начиная с Microsoft Edge версии 90 , консоль выводит строки JavaScript, используя символы с двойными кавычками (") в escape-формате:

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

См. также:

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

Эмуляция функции мультимедиа с цветовой гаммой CSS

Запрос мультимедиа цветовой гаммы имитирует приблизительный диапазон цветов, поддерживаемых браузером и тестируемым устройством. Раскрывающийся список в разделе Эмуляция функции мультимедиа CSS содержит цветовые пространства, которые могут эмулировать средства разработки. Например, чтобы активировать color-gamut: p3 запрос к мультимедиа, выберите color-gamut: p3 в раскрывающемся списке.

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

1. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.
2. В devTools на панели инструментов main выберите вкладку Отрисовка. Если эта вкладка не отображается, нажмите кнопку Дополнительные вкладки (") или кнопку Дополнительные инструменты (") . Откроется средство отрисовки .
3. В раскрывающемся списке Эмуляция css media feature color-gamut (Эмуляция css media feature feature color-gamut ) выберите параметр цветовой гаммы :

Дополнительные сведения о функции см. в color-gamut разделе Качество отображения цвета: функция "цветовая гамма".

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

См. также:

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

Улучшенные инструменты для прогрессивного веб-приложения

Предупреждение об установке PWA в консоли

Теперь в консоли отображается более подробное предупреждение об установке для прогрессивного веб-приложения (PWA) со ссылкой на улучшение автономной поддержки прогрессивных веб-приложений.

См. также:

• Обзор прогрессивных веб-приложения (PWA)

Предупреждение о длине описания PWA на панели манифеста

В средстве приложения на панели Манифест теперь отображается предупреждающее сообщение, если описание манифеста превышает 324 символа:

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

См. также:

• Средство приложения для управления хранилищем

Столбец "Новое удаленное адресное пространство" в средстве "Сеть"

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

1. В средствах разработки откройте средство "Сеть ".

2. В таблице Запросы (main, в нижней части средства "Сеть") щелкните правой кнопкой мыши строку заголовка и выберите Удаленный адресный диапазон:

   

   В таблице Запросы теперь отображается столбец Удаленное адресное пространство :

   

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

См. также:

• Добавление или удаление столбцов в справочнике по сетевым функциям.

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

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

Этот список управляется API веб-платформы политики разрешений, который позволяет веб-странице использовать или блокирует использование веб-страницы указанных функций браузера в отдельном фрейме или в iframes, внедряемых кадром.

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

См. также:

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

Новый столбец SameParty на панели "Файлы cookie"

В области Файлы cookie в средстве "Приложение " теперь отображается SameParty атрибут для каждого файла cookie:

Атрибут SameParty — это новый логический атрибут, указывающий, включается ли файл cookie в запросы к источникам того же первого набора.

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

См. также:

• Просмотр, изменение и удаление файлов cookie

Свойство fn.displayName в средстве консоли теперь устарело

Ранее свойство позволяло управлять именами отладки для функций, fn.displayName отображаемых в error.stack трассировках стека DevTools и в ней. Начиная с Microsoft Edge версии 90 свойство fn.displayName теперь устарело и заменяется свойством fn.name :

Используйте стандартный Object.defineProperty метод для определения fn.name свойства . Дополнительные сведения о fn.nameсм. в разделе Function.name.

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

См. также:

• Справочник по функциям консоли
• Функции и селекторы средств консоли

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

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

Чтобы отобразить представление дерева DOM, нажмите кнопку Переключиться на представление дерева DOM в верхней части экрана:

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

Чтобы включить эксперимент, см. статью Включение или отключение эксперимента и установите флажок Рядом с параметром Включить полное представление дерева специальных возможностей на панели Элементы.

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

См. также:

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

Примечание.

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

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