Новые возможности средств разработки (Microsoft Edge 90)
Это последние функции в стабильном выпуске Microsoft Edge DevTools.
Группирование инструментов в режиме фокусировки
Режим фокусировки — это экспериментальный интерфейс, который позволяет группировать различные средства на основе собственных сценариев отладки. Новая панель действий , отображаемая слева, содержит предопределенные группы инструментов, такие как Макет и Отладка. Чтобы настроить каждую группу инструментов, закройте инструменты значком Закрыть (X) или добавьте новые средства со значком "Дополнительные инструменты " (+).
Чтобы включить эксперимент, см. статью Включение или отключение эксперимента , а также установите флажки рядом с пунктами Режим фокусировки и Подсказки средств разработки и Меню вкладки Включить и кнопки, чтобы открыть другие инструменты. Дополнительные сведения об этой функции или комментарии с вопросами и идеями см. в статье Средства разработки: пользовательский интерфейс режима фокусировки.
Сведения о средствах разработки с помощью информационных подсказок
Функция Подсказки инструментов devTools помогает узнать обо всех различных средствах и панелях. Наведите указатель мыши на каждую выделенную область средства разработки, чтобы узнать больше об использовании средства. Чтобы включить подсказки, выполните одно из следующих действий.
- Выберите Настройка и управление средствами разработки (
...) >Справка>, чтобы переключить подсказки DevTools. - Нажмите клавиши CTRL+SHIFT+H (Windows, Linux) или COMMAND+SHIFT+H (macOS).
- Откройте меню команд и введите подсказки.
Затем наведите указатель мыши на каждую выделенную область инструментов разработки:
Чтобы отключить подсказки, нажмите клавишу ESC.
Обновление. Эта функция выпущена и больше не является экспериментальной.
Примечание. По состоянию на май 2022 г. подсказки не поддерживаются на панели действий.
Настройка сочетаний клавиш в параметрах
Теперь вы можете настроить сочетание клавиш для любого действия в средствах разработки.
Чтобы изменить сочетание клавиш, выполните приведенные ниже действия.
Откройте DevTools и выберите Параметры Ярлыки>.
Выберите действие, которое нужно настроить.
Щелкните значок Изменить (
).Нажмите клавиши, которые нужно привязать к действию.
Щелкните значок галочки (
).
Дополнительные сведения о настройке и редактировании сочетаний клавиш см . в разделе Настройка сочетаний клавиш в средствах разработки. Сведения об обновлениях этой функции в 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:
См. также:
Улучшено редактирование 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, выполните следующие действия:
- Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.
- В devTools на панели инструментов main выберите вкладку Отрисовка. Если эта вкладка не отображается, нажмите кнопку Дополнительные вкладки (
") или кнопку Дополнительные инструменты (
") . Откроется средство отрисовки . - В раскрывающемся списке Эмуляция css media feature color-gamut (Эмуляция css media feature feature color-gamut ) выберите параметр цветовой гаммы :
Дополнительные сведения о функции см. в color-gamut разделе Качество отображения цвета: функция "цветовая гамма".
Историю этой функции в проекте с открытым кодом Chromium см. в разделе Проблема 1073887.
См. также:
Улучшенные инструменты для прогрессивного веб-приложения
Предупреждение об установке PWA в консоли
Теперь в консоли отображается более подробное предупреждение об установке для прогрессивного веб-приложения (PWA) со ссылкой на улучшение автономной поддержки прогрессивных веб-приложений.
См. также:
Предупреждение о длине описания PWA на панели манифеста
В средстве приложения на панели Манифест теперь отображается предупреждающее сообщение, если описание манифеста превышает 324 символа:
Историю этой функции в проекте с открытым кодом Chromium см. в разделе Проблемы 965802, 1146450 и 1169689.
См. также:
Столбец "Новое удаленное адресное пространство" в средстве "Сеть"
В средстве "Сеть" в новом столбце Удаленное адресное пространство отображается пространство IP-адресов сети для каждого сетевого ресурса. Чтобы отобразить новый столбец Удаленное адресное пространство , выполните следующие действия:
В средствах разработки откройте средство "Сеть ".
В таблице Запросы (main, в нижней части средства "Сеть") щелкните правой кнопкой мыши строку заголовка и выберите Удаленный адресный диапазон:
В таблице Запросы теперь отображается столбец Удаленное адресное пространство :
Чтобы просмотреть журнал этой функции в проекте Chromium с открытым кодом, см. статью 1128885 проблемы.
См. также:
- Добавление или удаление столбцов в справочнике по сетевым функциям.
Отображение разрешенных и запрещенных функций в представлении сведений о кадре
В средстве Приложение узел Кадры в левом нижнем крае открывает представление Сведения о кадре. Представление Сведений о кадре теперь содержит раздел Политика разрешений , в котором отображается список разрешенных и запрещенных функций браузера:
Этот список управляется API веб-платформы политики разрешений, который позволяет веб-странице использовать или блокирует использование веб-страницы указанных функций браузера в отдельном фрейме или в iframes, внедряемых кадром.
Историю этой функции в проекте с открытым кодом Chromium см. в разделе Проблема 1158827.
См. также:
Новый столбец SameParty на панели "Файлы cookie"
В области Файлы cookie в средстве "Приложение " теперь отображается SameParty атрибут для каждого файла cookie:
Атрибут SameParty — это новый логический атрибут, указывающий, включается ли файл cookie в запросы к источникам того же первого набора.
Историю этой функции в проекте с открытым кодом Chromium см. в разделе Проблема 1161427.
См. также:
Свойство 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.
Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.