Эта страница переведена с помощью Cloud Translation API.

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

Sofia Emelianova

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

Эта версия обеспечивает поддержку консольной аналитики 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.

Производительность 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 .