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

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

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

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

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

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

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

Кроме того, треки «Сеть» и «Основной» теперь отображают сторонние имена, если таковые имеются, во всплывающих подсказках при наведении курсора на события.

Выпуск хрома: 368541957 .

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

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

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

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

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

Дополнительные сведения см. в разделе Избегайте объединения критических запросов в цепочку .

Самое тяжелое выделение стека

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

Древовидное представление специальных возможностей в Elements

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

Чтобы открыть представление дерева доступности, нажмите кнопку Переключиться на представление дерева доступности в правом верхнем углу дерева DOM на панели «Элементы» .

До и после включения полностраничного древовидного представления специальных возможностей по умолчанию.

Дополнительные сведения см. в разделе Полное дерево специальных возможностей в Chrome DevTools .

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

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

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

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

Опция «Спросить AI» перемещена в нижнюю часть меню.

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

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

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

Маяк 12.4.0

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