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

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

Программа записи экрана поддерживает экспорт в Puppeteer для Firefox.

В рамках поддержки WebDriver BiDi панель записи теперь может экспортировать записи в Puppeteer для Firefox. Благодаря поддержке Firefox в Puppeteer , вы можете записывать пользовательские сценарии с помощью панели записи инструментов разработчика Chrome, экспортировать их и запускать как в Firefox, так и в Chrome.

Фотографии до и после добавления опции «Puppeteer for Firefox» в меню экспорта программы записи.

Для получения более подробной информации см. WebDriver BiDi — будущее кроссбраузерной автоматизации .

Улучшения производительности панели

В этой версии внесен ряд улучшений в панель «Производительность» .

Наблюдения за показателями в реальном времени

Теперь на панели «Производительность» отображаются данные о показателях Core Web Vitals в режиме реального времени, как на вашем локальном компьютере, так и на основе полевых данных из отчета Chrome UX Report . Это позволяет выявлять проблемы с производительностью без необходимости собирать трассировки производительности и понимать, насколько репрезентативен ваш опыт по сравнению с опытом ваших пользователей.

Чтобы просмотреть данные наблюдений в реальном времени по LCP и CLS, откройте панель «Производительность» . Чтобы увидеть INP, выполните какое-либо действие на странице. Чтобы сравнить ваши локальные метрики с агрегированными данными об опыте пользователей из отчета Chrome UX Report, добавьте данные поля: в разделе «Данные поля» справа нажмите «Настроить» , а в диалоговом окне нажмите «ОК» . Наведите курсор на значение метрики, чтобы увидеть всплывающую подсказку с дополнительной информацией.

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

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

Поле поиска на панели «Производительность» теперь работает и в разделе «Сеть» , поэтому вы можете находить запросы с помощью сочетания клавиш Ctrl / Cmd + F.

Сетевой запрос обнаружен с помощью поиска.

См. трассировку стека вызовов performance.mark и performance.measure .

На вкладке «Сводка» в панели «Производительность» теперь отображаются трассировки стека вызовов performance.mark и performance.measure . Вы можете использовать эти вызовы для расширения трассировки производительности собственными данными.

На скриншоте показаны трассировки стека вызовов performance.mark и performance.measure до и после изменений.

Для получения дополнительной информации см. раздел «Настройка данных о производительности с помощью API расширяемости» .

Используйте тестовые данные адреса в панели автозаполнения.

В панели автозаполнения теперь отображаются тестовые данные для адресных форм. Это упрощает тестирование адресных форм на вашем сайте, если у вас нет сохраненных адресов в Chrome или вы используете гостевой профиль.

Чтобы автоматически заполнять адресные формы тестовыми данными, откройте панель «Автозаполнение» , установите Показывать тестовые адреса в меню автозаполнения» , щелкните правой кнопкой мыши по заполненной адресной форме на вашей странице и выберите один из вариантов в меню «Инструменты разработчика» .

Сравнение результатов до и после добавления параметров автозаполнения в выпадающее меню поля адреса.

Улучшения панели элементов

В этой версии внесены некоторые улучшения в панель «Элементы» .

Принудительное добавление состояний для конкретных элементов

В разделе :hov в меню «Элементы > Стили» теперь доступно больше псевдоклассов, которые можно принудительно включить. Новый набор параметров находится в раскрывающемся списке «Принудительное включение определенного состояния элемента» и относится к определенным выбранным элементам. Например, <label> и <input> доступны разные наборы параметров.

Сравнение состояния элементов до и после добавления возможности принудительного изменения их состояния.

Проблема Chromium: 40280012 .

В разделе «Элементы > Стили» теперь автоматически заполняется больше свойств сетки.

Теперь на вкладке «Элементы > Стили» доступны параметры автозаполнения при редактировании названий областей сетки и линий.

Показатели до и после добавления параметров автозаполнения при редактировании названий линий сетки.

Для получения дополнительной информации см. раздел «Проверка макетов сетки CSS» и, в частности, раздел «Показ названий строк» .

Маяк 12.2.0

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

В этом обновлении исправлен ряд ошибок. Полный список изменений смотрите здесь.

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

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

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

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

  • Элементы :
    • Исправлена ​​ошибка, приводящая к некорректному отображению перегруженных свойств длины 357020613 .
    • position-try-options переименован в position-try-fallbacks в соответствии со спецификацией .
    • Теперь обновление страницы восстанавливает выбранный узел даже внутри iframe 40719145 .
    • Доступность : Программы чтения с экрана теперь будут озвучивать кнопку «Показать элемент» 357382536 .
  • Производительность > Сеть : Теперь пункт меню «Показать в сети» открывает вкладку «Заголовки» соответствующего сетевого запроса.
  • Консоль :
    • Теперь ошибки, возникающие при использовании расширений C/C++, не приводят к принудительному открытию консоли 356320158 .
    • Исправлена ​​ошибка с import.meta в модуле JavaScript, из-за которой он не выполнялся в режиме паузы 40743793 .
  • Память : Исправлена ​​ошибка, из-за которой игнорированные при восстановлении ретейнеры не отображались после игнорирования ретейнера 327337527 .

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

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

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

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

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

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