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

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

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

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

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

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

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

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

Номер выпуска Chromium: 368541957 .

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

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

Сравнение результатов до и после добавления данных с мест проведения работ для анализа "LCP по этапам".

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

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

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

Подсветка наиболее тяжелого стека

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

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

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

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

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

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

Проблема Chromium: 40808541 .

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

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

Сравнение состояния «пустое пространство» в панелях «Сеть» и «Поиск» до и после улучшения.

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

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

Фотографии «До» и «После» перемещения опции «Задать вопрос ИИ» в нижнюю часть выпадающего меню.

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

Маяк 12.4.0

В панели управления Lighthouse теперь используется версия Lighthouse 12.4.0.

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

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

Проблема Chromium: 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.

Что нового в инструментах разработчика

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