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

Sofia Emelianova

Recorder поддерживает экспорт в Puppeteer для Firefox

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

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

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

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

Наблюдения за текущими показателями

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

Чтобы увидеть живые наблюдения по LCP и CLS, откройте панель Performance . Чтобы увидеть INP, выполните взаимодействие на странице. Чтобы сравнить локальные метрики с агрегированным пользовательским опытом из отчета Chrome UX, добавьте данные полей: в разделе Field data справа нажмите Set up и в диалоговом окне нажмите Ok . Наведите указатель мыши на значение метрики, чтобы увидеть подсказку с дополнительной информацией.

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

Поисковые запросы в сетевом треке

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

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

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

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

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

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

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

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

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

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

Раздел :hov в Elements > Styles теперь предоставляет вам больше псевдоклассов, которые вы можете принудительно включить. Новый набор параметров находится в раскрывающемся списке Force Specific element state и относится к определенным выбранным вами элементам. Например, <label> и <input> имеют разные наборы параметров.

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

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

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

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

Маяк 12.2.0

Панель Lighthouse теперь работает под управлением Lighthouse 12.2.0.

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

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

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

Разные моменты

Вот некоторые важные исправления и улучшения в этом выпуске:

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

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

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

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

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

• Отправляйте нам отзывы и запросы на новые функции на crbug.com .
• Сообщить о проблеме DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Твитните @ChromeDevTools .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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