Поделиться через


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

Это последние функции в стабильном выпуске Microsoft Edge DevTools.

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

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

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

Отображение панели действий.

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

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

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

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

Режим подсказок devTools

Чтобы отключить подсказки, нажмите клавишу 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:

Отображение сообщения в консоли в средствах разработки Microsoft Edge

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

Отображение того же сообщения в консоли средств разработки в разделе Выходные данные Microsoft 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:

Средства отладки CSS Flexbox

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

Раздел Flexbox в области Макет

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

См. также:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Консоль выводит строки 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 ) выберите параметр цветовой гаммы :

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

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

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

См. также:

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

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

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

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

См. также:

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

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

Предупреждение об усечении описания PWA

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

См. также:

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

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

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

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

    В контекстном меню выберите Удаленный адресный диапазон.

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

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

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

См. также:

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

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

Разрешенные и запрещенные функции на основе политики разрешений

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

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

См. также:

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

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

Столбец SameParty на панели

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

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

См. также:

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

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

Пример свойства fn.name для управления именами отладки для функций

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

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

См. также:

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

Экспериментальная функция

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

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

Отображение представления дерева DOM

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

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

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

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

См. также:

Примечание.

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

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

См. также