Что нового в 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» .