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

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

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

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

Список новых поддерживаемых европейских стран

Австрия, Бельгия, Болгария, Швейцария, Кипр, Чехия, Германия, Дания, Эстония, Испания, Финляндия, Франция, Великобритания, Греция, Хорватия, Венгрия, Ирландия, Исландия, Италия, Лихтенштейн, Литва, Люксембург, Латвия, Мальта, Нидерланды , Норвегия, Польша, Португалия, Румыния, Швеция, Словения, Словакия.

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

Инсайт от Gemini по поводу ошибки в Консоли.

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

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

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

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

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

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

Улучшенное отслеживание сети с цветовой легендой, подсказками, индикаторами блокировки рендеринга и временем на вкладке «Сводка».

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

Контекстное меню запроса с опцией «Показать на панели сети».

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

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

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

Пользовательский трек на панели Performance.

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

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

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

Пользовательское событие на дорожке «Тайминги» с отметкой времени и подробностями.

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

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

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

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

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

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

Объекты, сгруппированные по именованным тегам HTML.

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

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

Проблемы с хромом: 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.

Что нового в DevTools

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