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

Чтобы ознакомиться с последними функциями Инструментов разработки 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 и Microsoft Edge WebDriver теперь доступны в Linux

Microsoft Edge Dev теперь поддерживается в дистрибутивах Ubuntu, Debian, Fedora и openSUSE. Скачайте и установите microsoft Edge Dev .deb или .rpm пакет непосредственно с сайта программы предварительной оценки Microsoft Edge или используйте стандартные средства управления пакетами дистрибутива Linux.

Если вы используете среду Linux в решениях непрерывной интеграции и доставки (CI/CD), Microsoft Edge WebDriver также доступен в Linux. Чтобы приступить к автоматизации Microsoft Edge с помощью Microsoft Edge WebDriver, см. статью Последние версии на странице Microsoft Edge WebDriver. Сведения об автоматизации Microsoft Edge с помощью Microsoft Edge WebDriver см. в статье Использование WebDriver для автоматизации тестирования.

См. также:

• Использование WebDriver для автоматизации Microsoft Edge

Улучшенные веб-подсказки и советы по платформе в средстве "Проблемы"

webhint — это средство с открытым кодом, которое предоставляет отзывы в режиме реального времени для веб-сайтов и локальных веб-страниц. Начиная с Microsoft Edge версии 85, см. отзыв webhint в средстве "Проблемы ". Проблемы, отображаемые в средстве "Проблемы ", теперь легче увидеть с добавлением следующих категорий.

• Специальные возможности
• Compatibility
• Производительность
• Ловушек
• PWA
• Безопасность

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

Чтобы помочь вам увидеть проблемы, обнаруженные webhint, средство "Проблемы" теперь отображает следующие сведения:

• Улучшенные фрагменты кода.
• Ссылки на другие соответствующие панели.
• Ссылки на документацию по устранению проблем на веб-сайте.

См. также:

• Поиск и устранение проблем с помощью средства "Проблемы"
• расширение webhint для Visual Studio Code

Составные слои теперь находятся в трехмерном представлении

Теперь вы можете визуализировать содержимое слоев вместе со значениями z-index и моделью DOM. Эта функция позволяет выполнять отладку без переключения между инструментом трехмерного просмотра и инструментами слоев .

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

См. также:

• Навигация по z-index, DOM и слоям с помощью инструмента трехмерного представления

Определения переменных CSS в области стили

В области Стили инструмента Элементыпеременные CSS теперь связываются непосредственно с каждым определением. Щелкните переменную, чтобы легко просмотреть или изменить определение переменной CSS. В этом примере DevTools отображает атрибуты CSS для body элемента .

Например, чтобы отобразить определение переменной для переменной --theme-body-background CSS, выполните следующие действия:

1. На панели Стили инструмента Элементы наведите указатель мыши на стиль --theme-body-background переменной var(--theme-body-background)CSS . Появится подсказка Перейти к определению:

1. Щелкните стиль --theme-body-background. В области Стили отображается определение стиля:

См. также:

• Изменение стилей и параметров шрифтов CSS в области Стили
• Справочник по функциям CSS

Улучшения отладки рабочей роли службы

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

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

См. также:

• Улучшения рабочей роли службы

Средство приложения

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

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

1. В средстве Приложения слева выберите Service Workers.

2. Щелкните ссылку Сетевые запросы :

   

   Средство "Сеть" откроется на панели Быстрого просмотра в нижней части DevTools и отображает все сетевые запросы, связанные с рабочей ролью службы. Сетевые запросы фильтруются с помощью is:service-worker-intercepted:

   

3. Чтобы переместить средство "Сеть " на верхнюю панель, закройте панель Быстрого просмотра :

   

См. также:

• Средство приложения для управления хранилищем
• Улучшения рабочей роли службы

Средство "Сеть"

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

• Начало запроса и длительность начальной загрузки.
• Изменения в регистрации рабочей роли службы.
• Среда выполнения обработчика fetch событий.
• Среда выполнения всех fetch событий для загрузки клиента.

См. также:

• Отображение разбивки по времени запроса в справочнике по сетевым функциям.
• Улучшения рабочей роли службы

Средство "Источники"

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

Чтобы найти инициатор запроса, используйте стек вызовов кода JavaScript в рабочей роли службы. Стек вызовов на следующем рисунке начинается с кода JavaScript в рабочей роли службы (service-worker.js) и отображает ссылку на исходный запрос веб-страницы как (index):157. Отображается service-worker.js файл, а стек вызовов выделяет инициатор запроса : (index):157

На следующем рисунке выбрана ссылка и откроется инициатор, выполнивший запрос. Веб-страница (index) является инициатором запроса:

См. также:

• Просмотр стека вызовов в функциях отладки JavaScript
• Улучшения рабочей роли службы

Копирование значения свойства сетевого запроса

В средстве "Сеть" скопируйте значение свойства сетевого запроса с помощью нового параметра Копировать значение . Значение свойства копируется в виде декодированного значения JSON. В предыдущих версиях Microsoft Edge необходимо было скопировать значение, выполнив одно из следующих действий:

• Выделите весь текст и скопируйте его.
• Сохраните значение как глобальную переменную, если применимо, и скопируйте его из консоли DevTools.

Чтобы скопировать значение свойства в буфер обмена, см. статью Копирование форматированного ответа JSON в буфер обмена в справочнике по сетевым функциям.

Копирование значения свойства в devTools:

Вставка значения свойства в Microsoft Visual Studio Code:

См. также:

• Общие сведения о консоли

Сведения об истории в проекте с открытым кодом Chromium см. в разделе Проблема 1132084.

Настройка сочетаний клавиш с несколькими нажатиями

Начиная с Microsoft Edge версии 87, вы можете настроить сочетания клавиш для любого действия в средствах разработки. В Microsoft Edge версии 88 теперь можно создавать сочетания клавиш с несколькими нажатиями.

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

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

См. также:

• Измените сочетание клавиш для действия DevTools в разделе Настройка сочетаний клавиш.

Сведения об истории в проекте Chromium с открытым кодом см. в разделе Проблема #174309.

Пользовательский интерфейс DevTools теперь соответствует языку браузера

Если в Microsoft Edge версии 87 вы включили параметр Сопоставить язык браузера в разделе Параметры средств разработки, язык пользовательского интерфейса DevTools не соответствовал языку пользовательского интерфейса браузера. В Microsoft Edge версии 88 средства разработки теперь соответствуют языку браузера, если включить параметр "Сопоставить язык браузера ". См . раздел Изменение параметров языка DevTools.

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

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

Новые инструменты визуализации углов CSS

DevTools теперь имеет лучшую поддержку отладки углов CSS. Если к элементу HTML на странице применен угол CSS, рядом с ним отображается значок часов в инструменте Стили . Чтобы переключить наложение часов, щелкните значок часов. Чтобы изменить угол, щелкните в любом месте часов, перетащите иглу или используйте сочетания клавиш и мыши.

Для примера используется следующий угол CSS:

background: linear-gradient(100deg, lightblue, pink);

Дополнительные сведения см. в разделе Изменение значения угла с помощью справочника по функциям углов в CSS.

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

Имитация размера квоты хранилища на панели Хранилища

Теперь можно переопределить размер квоты хранилища на панели Хранилище . Эта функция позволяет моделировать различные устройства и тестировать поведение веб-сайта или приложения в сценариях с низким уровнем доступности диска. Чтобы имитировать квоту хранилища, выполните следующие действия:

1. Перейдите кхранилищуприложений>.
2. Установите флажок Имитация пользовательской квоты хранилища .
3. Введите допустимый номер.

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

Сообщение об ошибках CORS в средстве "Сеть"

Опробуйте эту функцию, перейдя к демонстрационной версии ошибки CORS. Откройте средство "Сеть ", обновите страницу и просмотрите неудачный сетевой запрос CORS. В столбце состояние отображается ошибка CORS. При наведении указателя мыши на ошибку всплывающая подсказка теперь отображает код ошибки. В Microsoft Edge версии 87 и более ранних devTools отображали только общее состояние (сбой) для ошибок CORS.

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

См. также:

• Улучшенная поддержка отладки CORS в новых возможностях в средствах разработки (Microsoft Edge 92)
• Справочник по сетевым функциям

Обновления представления сведений о кадре

В средстве "Приложение " есть раздел "Кадры ", который предоставляет подробное представление для каждого кадра.

См. также:

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

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

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

Состояние изоляции между источниками теперь отображается в разделе Изоляция & безопасности . В новом разделе доступность API отображается доступность s (SAB) и возможность совместного SharedArrayBufferиспользования буферов с помощью postMessage(). Предупреждение об устаревании отображается, если sab и postMessage() в настоящее время доступны, но контекст не изолирован между источниками.

Дополнительные сведения об изоляции между источниками и о том, почему она необходима для таких функций, как SharedArrayBuffers, см. в разделе WindowOrWorkerGlobalScope.crossOriginIsolated.

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

См. также:

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

Сведения о новых веб-рабочих ролей в представлении сведений о кадре

DevTools теперь упорядочивает веб-рабочие роли в соответствующем родительском кадре. Например, если someName кадр создает worker.js, он worker.js отображается в someName списке Кадры . Чтобы просмотреть сведения о веб-рабочей роли, выполните следующие действия:

1. Откройте средство "Приложение ".
2. В списке слева в разделе Кадры разверните кадр, содержащий веб-рабочие роли.
3. Разверните дерево Рабочие роли .
4. Щелкните рабочую роль.

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

См. также:

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

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

DevTools теперь упорядочивает открытые окна под соответствующим родительским кадром. Например, если top кадр открывает Window для https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium, то в списке WindowКадров отображается элемент под top .

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

1. Откройте средство "Приложение ".
2. Слева в разделе Кадры внизу разверните рамку.
3. Разверните узел Открытая windows и щелкните Window элемент для родительского кадра, о которой вы хотите знать.
4. Щелкните ссылку Фрейм открывателя .

Отображаются сведения о том, какой кадр вызвал открытие другого Window. Чтобы отобразить средство открытия в инструменте "Элементы" , выполните следующие действия:

1. Откройте средство "Приложение ".
2. Слева в разделе Кадры внизу разверните рамку.
3. Щелкните открытое окно, чтобы открыть Window сведения.
4. Щелкните ссылку Фрейм открывателя .

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

См. также:

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

Копирование stacktrace для инициатора сети

В средстве "Сеть", чтобы скопировать стектрак в буфер обмена, щелкните правой кнопкой мыши стек и выберите команду Копировать>копировать стектракт:

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

См. также:

• Отображение трассировки стека, вызвавшей запрос, в справочнике по сетевым функциям

Предварительный просмотр значения переменной Wasm при переходе мыши

В средстве Источники используйте эту функцию для просмотра значения переменной WebAssembly (Wasm) при приостановке кода. Чтобы отобразить текущее значение переменной, наведите указатель мыши на переменную:

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

См. также:

• Общие сведения об использовании панели "Отладчик" для отладки кода JavaScript в средстве "Источники"

Согласованные единицы измерения размеров файлов и памяти

DevTools теперь постоянно использует kB для отображения размеров файлов и памяти. Ранее средства разработки смешали kB и KiB.

• kB или килобайт (10^3 или 1000 байт)
• KiB или кибибайт (2^10 или 1024 байта)

Например, средство "Сеть" ранее использовалось kB в метках, но использовалось KiB в вычислениях. Ваш отзыв показал, что это несоответствие вызвало путаницу.

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

Примечание.

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

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