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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проблема Chromium: 402353313 .

Снижение уровня шума в графике производительности.

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

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

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

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

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

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

Номер выпуска Chromium: 414734883 .

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

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

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

Проблема Chromium: 40074843 .

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

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

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

Для облегчения отладки сложных значений CSS вкладка «Элементы > Стили» теперь отображает всплывающую подсказку при наведении курсора:

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

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

Фотографии до и после добавления всплывающей подсказки с цепочками определений и расширяемыми сложными вычислениями.

Проблема Chromium: 396080529 .

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

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

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

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

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

has-request-header filter

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

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

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

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

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

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

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

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

Различные важные моменты

В этом релизе внесены следующие существенные исправления и улучшения:

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

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

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

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

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

Что нового в инструментах разработчика

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