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

Это обновление вносит ряд изменений, включая удаление старой метрики First Meaningful Paint (FMP) в пользу Largest Contentful Paint (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 .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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