Что нового в DevTools, Chrome 138

Софья Емельянова
Sofia Emelianova
GitHub

Улучшения панели производительности

В этой версии реализовано несколько улучшений панели «Производительность» .

Предварительно подключенные источники в представлении «Дерево сетевых зависимостей»

В разделе «Производительность» > «Аналитика» > «Аналитика дерева сетевых зависимостей» теперь отображается список используемых или неиспользуемых предварительно подключенных источников и кандидатов на предварительное подключение, если таковые имеются.

Подсказки предварительного подключения позволяют вашему сайту устанавливать ранние соединения с важными сторонними источниками и повышать скорость загрузки страниц.

До и после добавления предварительно подключенных источников и кандидатов в «Дерево сетевых зависимостей».

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

Время ответа сервера и перенаправления в отчете «Задержка запроса документа»

В разделе «Производительность» > «Аналитика» > «Аналитика задержки запроса документов» теперь отображается время ответа сервера, а также количество перенаправлений и время перенаправления, если таковые имеются.

До и после добавления времени перенаправления и ответа сервера к показателю «Задержка запроса документа».

Перенаправления в сводке сетевых запросов

Панель «Производительность» теперь отображает URL-адреса перенаправления в сводке сетевых запросов и в их подсказках.

До и после добавления URL-адресов перенаправления в сводку и подсказки сетевых запросов.

Проблема с хромом: 402353313 .

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

Панель производительности теперь не будет отображать события из категории compile движка JavaScript v8 . Раньше эти события вызывали много ненужных накладных расходов и шума, в частности событие compile code .

До и после удаления событий «компиляция кода» из трассировки производительности.

Если вы заметили, что некоторые важные для вас события теперь отсутствуют, не стесняйтесь оставлять свои отзывы на crbug.com/414330508 .

Устаревшее «Отключить примеры JavaScript»

Параметр «Отключить образцы JavaScript» в настройках «Performace > Captures» устарел и удален из-за редкой полезности и редкого использования.

До и после удаления параметра «Отключить образцы JavaScript» из «Настроек захвата».

Проблема с хромом: 414734883 .

Параметр точности геолокации в датчиках

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

До и после добавления параметра «Точность» к эмуляции геолокации на панели «Датчики».

Проблема с хромом: 40074843 .

Улучшения панели элементов

В этой версии реализовано несколько улучшений панели «Элементы» .

Упрощенная отладка сложных значений CSS

Чтобы помочь вам отладить сложные значения CSS, вкладка «Элементы» > «Стили» теперь отображается в подсказке при наведении:

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

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

До и после добавления подсказки с цепочками определений и расширяемыми сложными вычислениями.

Проблема с хромом: 396080529 .

Поддержка @function в Элементах > Стили

В рамках подготовки к поддержке @function в Chrome вкладка «Элементы» > «Стили» теперь связывает имена ваших пользовательских функций с их определениями в специальном разделе.

До и после привязки имени вашей пользовательской функции к соответствующему разделу.

Улучшения сетевой панели

В этой версии реализовано несколько улучшений панели «Сеть» .

фильтр has-request-header

Панель «Сеть» теперь поддерживает фильтр has-request-header , который позволяет фильтровать по определенному имени заголовка запроса.

До и после добавления фильтра «has-request-header» на панель «Сеть».

Проблема с хромом: 397481040 .

Прямые сокеты в изолированных веб-приложениях

На панели «Сеть» теперь можно отслеживать трафик изолированных веб-приложений (IWA) через TCPSocket, UDPSocket (в связанном режиме), UDPSocket (в подключенном режиме).

Для этого выберите соединение directscoket рядом с обычными запросами в таблице и на вкладке Сообщения выберите сообщение.

До и после добавления поддержки прямых сокетов в IWA на панель «Сеть».

Изолированные веб-приложения (IWA) обеспечивают модель безопасности с высоким уровнем доверия для веб-приложений. Для получения дополнительной информации см. раздел Начало работы с изолированными веб-приложениями и ознакомьтесь с демонстрационным приложением , реализующим API Direct Sockets .

Разные моменты

Вот некоторые важные исправления и улучшения в этом выпуске:

  • Приложение > Хранилище : Удален устаревший параметр Web SQL ( crbug.com/412707590 ).
  • Элементы :
  • Сеть : Удален заголовок HTTP Referrer-Policy из параметра «Копировать как выборку », поскольку это заголовок ответа для управления поведением браузера, а не инструкция на стороне клиента ( crbug.com/413904896 ).
  • Производительность : Удалены предупреждения о «длительных задачах» из рабочих потоков, поскольку они не блокируют основные потоки ( crbug.com/40248589 ).
  • Вопросы . Теперь отчеты:
    • Если какие-либо ресурсы, подозреваемые в отслеживании пользователей, блокируются.
    • Снижение риска отслеживания отказов независимо от того, осуществляется ли доступ к хранилищу во время перенаправления или нет.
  • Доступность . Следующие элементы в меню «Элементы» > «Стили» теперь можно фокусировать с помощью клавиатуры:

Загрузите каналы предварительного просмотра

Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти каналы предварительного просмотра предоставляют вам доступ к новейшим функциям DevTools, позволяют тестировать передовые API веб-платформ и помогают находить проблемы на вашем сайте до того, как это сделают ваши пользователи!

Свяжитесь с командой Chrome DevTools

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

Что нового в DevTools

Список всего, что было рассмотрено в серии «Что нового в DevTools» .