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

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

  • Статья

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

Средства разработки в Microsoft Edge в Linux

См. также:

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

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

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

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

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

Средство

См. также:

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

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

Панель составных слоев

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

См. также:

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

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

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

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

Переменная 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

Файл service-worker.js и стек вызовов, выделение инициатора запроса

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

Веб-страница (индекс) является инициатором запроса.

См. также:

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

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

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

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

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

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

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

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

См. также:

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

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

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

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

Сочетания клавиш для аккордов

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

См. также:

Журнал в проекте 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

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

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

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

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

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

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

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

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

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

Ошибки CORS

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

См. также:

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

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

См. также:

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

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

Состояние изоляции между источниками теперь отображается в разделе Изоляция & безопасности . В новом разделе доступность 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 для инициатора сети

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

Копирование stacktrace

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

См. также:

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

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

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

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

См. также:

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

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

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

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

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

Примечание.

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

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

См. также