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

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

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

В этой версии добавлена ​​поддержка функции Console Insights от Gemini для большинства европейских стран.

Список новых стран Европы, получивших поддержку.

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

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

Информация от Gemini о возникшей ошибке в консоли.

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

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

Расширенная сетевая дорожка

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

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

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

Расширенная сетевая дорожка с цветовой легендой, всплывающими подсказками, индикаторами блокировки рендеринга и временными показателями на вкладке «Сводка».

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

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

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

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

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

Пользовательская дорожка на панели «Производительность».

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

Подробности в разделе «Время проведения».

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

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

Номер выпуска Chromium: 345418915 .

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

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

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

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

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

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

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

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

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

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

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

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

Обе функции в действии можно увидеть в следующем видео.

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

Маяк 12.1.0

В панели управления Lighthouse теперь используется Lighthouse 12.1.0.

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

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

Номер выпуска Chromium: 772558 .

Доступность

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

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

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

Различные важные моменты

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

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

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

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

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

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

Что нового в инструментах разработчика

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