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

Sofia Emelianova

Консольные аналитики Gemini становятся доступны в большинстве европейских стран

Эта версия обеспечивает поддержку консольных функций Gemini в большинстве европейских стран.

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

Обновления панели производительности

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

Расширенный сетевой трек

Трек «Сеть» на панели «Производительность» был улучшен: теперь критически важная информация отображается заранее, например, более подробная информация о длительности и дереве инициаторов сети, а визуальные подсказки и цвета отображаются более наглядно. Таким образом, вам больше не нужно переключаться между панелью «Сеть» и вкладкой « Производительность» > «Сводка» . Кроме того, если вам всё ещё нужно переключиться на панель «Сеть» , мы упростили и ускорили этот процесс.

Трек «Сеть» теперь выполняет следующие функции:

• Показывает цветовую маркировку типов запросов.
• Запросы, блокирующие рендеринг, помечаются красными треугольниками в правом верхнем углу.
• Отображает инициатора запроса при выборе со стрелкой. Это помогает понять дерево инициаторов сети, которое ранее было доступно только на панели «Сеть» .
• При наведении курсора переработанная подсказка теперь показывает структурированную информацию о времени, включая статус блокировки рендеринга и изменения приоритета, если таковые имеются.
• Вкладка «Сводка» теперь также показывает разбивку по времени в столбце справа.

Кроме того, теперь вы можете щёлкнуть правой кнопкой мыши запрос в треке или его URL на вкладке «Сводка» и выбрать «Показать на панели «Сеть»» в раскрывающемся меню. DevTools перейдёт на панель «Сеть» и выделит нужный запрос в таблице.

Настройте данные о производительности с помощью API-интерфейса расширения

В этой версии реализована поддержка данных расширений на панели «Производительность» . Теперь вы можете добавлять пользовательские треки с событиями и описаниями в виде подсказок к трассировке производительности, подробности на вкладку «Сводка» и многое другое . Эта функция может быть полезна разработчикам фреймворков, библиотек и сложных приложений с пользовательским инструментарием.

Пример пользовательского трека можно посмотреть на этой демонстрационной странице . В разделе «Производительность» > «Настройки захвата» установите флажок «Данные расширения» . Начните запись производительности, нажмите «Добавить нового корги» на демонстрационной странице, а затем остановите запись. В трассировке вы увидите пользовательский трек, содержащий события с пользовательскими подсказками и подробностями на вкладке «Сводка» .

Короче говоря, чтобы расширить данные о производительности, передайте определенную структуру параметрам measureOption.detail или markOption.detail вызовов API performance.measure() или performance.mark() .

Подробности в разделе «Тайминги»

Если вы веб-разработчик, использующий часть User Timing API Performance для добавления записей в трек Timings , теперь вы можете просматривать произвольные данные на вкладке Summary для событий mark и measure , а также их временных меток.

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

Копировать все перечисленные запросы на панели «Сеть»

Вместо копирования всего сетевого журнала панель «Сеть» теперь позволяет применять фильтры и копировать только перечисленные запросы.

Более быстрые снимки кучи с именованными HTML-тегами и меньшим беспорядком

Снимки кучи на панели «Память» стали еще быстрее, теперь они содержат объекты, сгруппированные по именованным тегам HTML, лучше соответствуют семантике языка JavaScript, отображая меньше внутренних объектов, и всегда включают числовые значения.

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

Чтобы вручную включить внутренние объекты в снимок, сначала установите флажок Настройки > Эксперименты > флажок Показывать параметр для предоставления внутренних объектов в снимках кучи , затем установите флажок Выставлять внутренние объекты (...) на панели Память .

Проблемы с Chromium: 41490040 , 343341610 , 42203857 .

Откройте панель «Анимация», чтобы захватить анимацию и редактировать @keyframes в реальном времени.

Панель «Анимация» теперь выполняет следующие функции:

• Захватывает анимацию, которая уже выполняется при открытии панели, поэтому вам не нужно обновлять страницу для захвата анимации.
• Поддерживает редактирование @keyframes в реальном времени. Другими словами, обновляет захваченную анимацию при редактировании раздела @keyframes в разделе «Элементы» > «Стили» .

Посмотрите на работу обеих функций в следующем видео.

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

Маяк 12.1.0

Панель Lighthouse теперь работает под управлением Lighthouse 12.1.0.

Это обновление вносит ряд изменений, включая замену старой метрики «Первая значимая отрисовка» (FMP) на «Отрисовка самого большого контента» (LCP) . Полный список изменений см. здесь.

Чтобы изучить основы использования панели Lighthouse в DevTools, ознакомьтесь с разделом Lighthouse: Оптимизация скорости сайта .

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

Доступность

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

• Нажатие клавиши Tab после автодополнения в поле редактирования выражений в реальном времени перемещает фокус на следующую точку фокусировки. Ранее это приводило к отступу текста.
• Нажатие на элемент изменения размера помещает на него фокус, и вы можете перемещать его с помощью клавиш со стрелками вправо и влево.
• Программа чтения с экрана теперь озвучивает поле редактирования « Добавить контрольное выражение» в разделе «Источники» , а поле «Удалить контрольное выражение» теперь четко видно при навигации с помощью клавиатуры.

Проблемы с Chromium: 349939551 , 343942719 , 349334243 , 349428374 .

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

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

• Производительность :
  • Сетевой трек: Добавлены события подключения WebSocket 331351979 .
  • Панель «Производительность» теперь правильно увеличивает масштаб самой загруженной активности основного потока 345599356 .
  • Исправлена ошибка с загрузкой неправильных типов файлов трассировки. Теперь она предотвращает загрузку любого типа, кроме правильного .json или .gz 349864878 .
• Элементы > Стили :
  • Раскрывающийся список единиц измерения в значениях свойств длины теперь устарел 41495618 .
  • Исправлено разрешение активных свойств для вложенных at-правил 346732737 .
  • Неактивные разделы @position-try теперь отображаются серым цветом 40246493 .
• Приложение :
  • Файлы cookie : исправлена ошибка, из-за которой файлы cookie не обновлялись при нажатии кнопки «Обновить» 348683488 .
  • Локальное хранилище : теперь можно сортировать по ключам в алфавитном порядке 341129585 .

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

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

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

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

• Отправляйте отзывы и предложения по функциям нам на crbug.com .
• Сообщить о проблеме с DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме с DevTools в DevTools.
• Напишите твит в @ChromeDevTools .
• Оставляйте комментарии в видеороликах YouTube «Что нового в DevTools» или YouTube «Советы по DevTools» .

Что нового в DevTools

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