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

Sofia Emelianova

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

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

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

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

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

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

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

Сетевой трек теперь выполняет следующие действия:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Маяк 12.1.0

На панели «Маяк» теперь работает Lighthouse 12.1.0.

Это обновление вносит ряд изменений, в том числе удаление ста��ой метрики First Meaningful Paint (FMP) в пользу Largest Contentful Paint (LCP) . См. полный список изменений .

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

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

Доступность

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

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

Проблемы с хромом: 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, используя дополнительные параметры. > Справка > Сообщить о проблемах DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к нашим видеороликам «Что нового в DevTools на YouTube » или «Советы по DevTools» на YouTube .

Что нового в DevTools

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