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

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

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

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

До и после добавления опции «Кукловод для Firefox» в меню экспорта рекордера.

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

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

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

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

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

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

Живые наблюдения за показателями на панели «Производительность».

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

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

Сетевой запрос, найденный с помощью поиска.

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

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

До и после отображения трассировок стека для Performance.mark и производительности. измерять звонки.

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

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

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

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

Параметры до и после добавления тестовых данных автозаполнения в раскрывающееся меню поля формы адреса.

Улучшения панели «Элементы»

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

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

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

До и после добавления возможности форсировать определенные состояния элемента.

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

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

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

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

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

Маяк 12.2.0

На панели «Маяк» теперь работает 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.

Что нового в DevTools

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