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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сетевой запрос найден при поиске.

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

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

До и после показаны трассировки стека для вызовов performance.mark и performance.measure.

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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