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

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

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

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

Ссылки на источники и скрипты для вызовов профилей и функций в Performance

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

До и после добавления источника и происхождения на вкладку «Сводка».

Кроме того, при наведении курсора на события в подсказках для сетевых и основных треков теперь отображаются имена третьих лиц (если таковые имеются).

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

Поддержка полевых данных «LCP по фазе»

При включении полевых данных аналитика «Производительность» > «Статистика» > «LCP по фазам» теперь показывает 75-й процентиль времени изображения из отчета Chrome UX в дополнительной таблице, что позволяет сравнивать время прямо в аналитике.

До и после добавления полевых данных в аналитическую информацию «LCP по фазам».

Понимание «дерева сетевых зависимостей»

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

Более подробную информацию см. в статье Избегайте цепочки критических запросов .

Самая тяжелая подсветка стека

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

Древовидная структура доступности в Elements

Вид дерева доступности на всю страницу теперь включен по умолчанию на панели «Элементы» .

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

До и после включения полностраничного представления дерева доступности по умолчанию.

Дерево доступности позволяет вам проверить, как вспомогательные технологии воспринимают ваш контент, и отображает атрибуты ARIA и вычисляемые свойства доступности узлов DOM. Подробнее см. в разделе Полное дерево доступности в Chrome DevTools .

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

Улучшены пустые состояния для различных панелей.

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

До и после улучшения пустых состояний на панелях «Сеть» и «Поиск».

Пункт «Спросить ИИ» перемещен в нижнюю часть меню.

Опция «Спросить ИИ» теперь находится внизу раскрывающихся меню, а не вверху.

До и после перемещения опции «Спросить ИИ» в нижнюю часть раскрывающегося меню.

Не стесняйтесь оставлять свои отзывы о панели помощи ИИ на crbug.com/364805393 .

Маяк 12.4.0

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

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

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

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

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

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

  • Производительность > Сводка : заменены две строки «Общее время» и «Собственное время» на одну строку «Длительность» , которая также показывает (self time) в скобках, если таковое имеется ( crbug.com/395572753 ).
  • Проблемы : Добавлены новые типы проблем: проблемы <select> в дереве доступности и ошибки подписи сообщений SRI, возникающие во время анализа или проверки в сетевой службе ( crbug.com/381044049 , crbug.com/347890366 ).
  • Доступность : вкладка «Элементы» > «Стили» теперь отображает элементы, по которым вы перемещаетесь с помощью клавиатуры ( crbug.com/396311936 ).
  • Элементы : проблемы с <select> теперь поддерживаются и выделяются волнистым подчеркиванием ( crbug.com/378738916 ).
  • Сеть : значки «точки переопределения» и предупреждения о файлах cookie теперь отображаются справа от имени вкладки, а не слева ( crbug.com/390556283 ).

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

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

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

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

Что нового в DevTools

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