Share via

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

  • Статья

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

Импорт и экспорт экземпляров DevTools с помощью новой расширенной функции трассировки

В Microsoft Edge 109 можно включить новые параметры для экспорта расширенных трассировок из средств производительности и памяти . Эти расширенные трассировки содержат дополнительные сведения, например:

  • Сообщения, зарегистрированные в консоли.
  • JavaScript, выполняющийся на странице во время записи.
  • Моментальные снимки модели DOM.

При сохранении профилей производительности, моментальных снимков кучи, временных шкал выделения или выборки выделения теперь можно экспортировать файл нового .devtools формата. При импорте .devtools файла открывается новый экземпляр Средства разработки с сохранением состояния инструментов Elements, Console и Sources . Эти расширенные трассировки предоставляют новый мощный способ совместной работы и совместного использования информации в средствах разработки.

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

  1. В средствах разработки нажмите кнопку Параметры (значок параметров).

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

    > Параметры Параметры: > флажки Сохраняемость

  3. Если вы хотите сохранить сообщения консоли, JavaScript или моментальные снимки DOM, установите соответствующие флажки.

  4. Нажмите кнопку Закрыть (x) в разделе Параметры инструментов разработки.

  5. В средстве Производительность сделайте запись.

  6. Нажмите кнопку Сохранить профиль (значок сохранить профиль).

  7. В диалоговом окне Сохранить как сохраните новый .devtools файл.

Импорт:

  1. .devtools Импортируйте файл из средства производительности, нажав кнопку Загрузить профиль (значок загрузки профиля).

    Импорт трассировки из средства производительности

  2. Откроется новое окно DevTools, содержащее подмножество инструментов, включая средство "Производительность ", загруженное с только что записанным профилем. Инструменты Элементы, Консоль и Источники также предварительно заполнены их сохраненным состоянием:

    Консоль импорта трассировки

Вы также можете экспортировать данные из средства "Память ", используя новый .devtools формат файла. Это новая функция, с которыми активно экспериментирует команда DevTools, поэтому отправьте нам свой отзыв в [Отзыв] Расширенный эксперимент трассировки No 122.

См. также:

Отладка длительных событий recalculate Style с помощью новой статистики селектора

В Microsoft Edge 109 в средстве Производительность можно включить параметр Включить расширенное инструментирование отрисовки (медленно) в средстве производительности , чтобы получить доступ к новой функции селектора статистики.

Если этот параметр включен, выполните следующие действия:

  1. Выберите Запись, а затем запустите сценарий, который вы хотите улучшить на веб-сайте или в приложении.

  2. Нажмите кнопку Остановить.

  3. Выберите событие Recalculate Style . В нижней части средства "Производительность " выберите вкладку Статистика выбора :

    Флажок

На вкладке Статистика выбора представлен список всех селекторов CSS, которые были рассчитаны подсистемой браузера во время события Recalculate Style . Вы можете сортировать селекторы по времени, затраченное на обработку, или по количеству элементов, которые они совпадают (столбец Счетчик совпадений ). Используйте эти данные, чтобы:

  • Найдите селекторы, обработка которыми занимает много времени в браузере, и упростите их.
  • Чтобы повысить производительность, сделайте селекторы более конкретными.

См. также:

Отслеживание объектов, отброшенных сборкой мусора при выборке выделения

В Microsoft Edge 109 тип профилирования выборки выделения в средстве "Память " теперь имеет два новых варианта:

  • Включите объекты, отбрасываемые основной сборкой мусора.

  • Включите объекты, отбрасываемые дополнительными сборками мусора.

Без выбора этих параметров средство "Память " будет продолжать работать, как и раньше, сообщив о выделениях, которые по-прежнему активны в конце сеанса профилирования. В этом режиме объекты, созданные и собранные мусором (GC'd), а затем исчезают, не отслеживаются выборкой выделения.

Выберите оба варианта, если вы хотите отслеживать мусор, создаваемый веб-сайтом или приложением. В результирующем профиле вы увидите мусор, созданный функциями JavaScript, которые в то время были GC.d. Используйте эти параметры, если вы хотите уменьшить количество мусора, создаваемого кодом. Дополнительные сведения о различиях между основными и дополнительными сборками мусора см. в статье Мусорное обсуждение: сборщик мусора Orinoco.

Параметры профилирования выборки выделения

См. также:

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

Добавьте новое расширение визуализатора моментальных снимков кучи в Microsoft Edge, чтобы получить новые визуализации данных, которые есть в куче snapshot файлов. При установке этого расширения добавляется новое средство визуализатора моментальных снимков кучи в средства разработки. В средстве визуализатора моментальных снимков кучи можно загрузить кучу snapshot файл, чтобы увидеть ее представленную в виде направленного графа или дерева. Эти новые визуализации позволяют исследовать цепочку хранителей из корня сборки мусора (GC) в отдельный узел.

Представление графа:

Визуализатор моментальных снимков кучи в режиме графа

Представление дерева:

Визуализатор моментальных снимков кучи в режиме дерева

См. также:

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

Мы выслушали ваши отзывы и улучшили параметры быстрого просмотра в режиме фокусировки. Вместо того, чтобы предлагать только подмножество средств в раскрывающемся списке Быстрого просмотра, теперь можно выбрать любое средство DevTools, нажав кнопку Дополнительные инструменты (значок "), например на панели инструментов main DevTools. Загрузите любое средство на панели быстрого просмотра в средствах разработки, чтобы одновременно отобразить несколько инструментов.

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

Добавление средства на панель быстрого просмотра

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

  • Показать стили
  • Отображение вычисляемых стилей

Меню команд с командами

См. также:

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

Microsoft Edge 109 также включает следующие обновления из проекта Chromium: