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

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

Панель конфиденциальности и безопасности

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

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

До и после добавления раздела «Конфиденциальность» в панель «Безопасность».

Проблема с Chromium: 352364594 .

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

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

Откалиброванные предустановки регулирования производительности процессора

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

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

До и после добавления калибровки регулирования.

Выберите различные события, связанные с производительностью, в одном и том же чате с использованием ИИ.

Теперь панель помощи ИИ позволяет изменять выбранное событие в трассировке производительности прямо в чате. Другими словами, вам не нужно начинать новый чат, чтобы обсудить другое событие.

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

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

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

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

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

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

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

Проблема с Chromium: 368135130 .

Анализ «принудительного переформатирования»

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

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

До и после добавления функции "Принудительное переформатирование".

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

Информация по оптимизации размера DOM

Ещё одно важное замечание — оптимизация размера DOM . Большое дерево DOM может замедлить работу страницы.

Анализ производительности выявляет длительные процессы переформатирования и пересчета стилей, вызванные большим размером DOM, и предоставляет статистику по общему количеству элементов, глубине и числу дочерних элементов.

До и после добавления функции «Оптимизировать размер DOM».

Расширьте трассировку производительности с помощью console.timeStamp

API расширяемости теперь поддерживает console.timeStamp . В дополнение к performance.measure и performance.mark , теперь можно создавать пользовательские дорожки в трассировке производительности и фиксировать пользовательские метки с помощью console.timeStamp — более легкой альтернативы, которая не добавляет записи во внутреннюю временную шкалу производительности браузера, а только отображает их в трассировке производительности.

Например, можно использовать следующий синтаксис:

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

В настройках захвата установите « Показать пользовательские дорожки» , и вы увидите свою пользовательскую дорожку в трассировке:

До и после добавления поддержки console.timeStamp.

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

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

Значения анимированных стилей в реальном времени

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

Поддержка псевдокласса :open и различных псевдоэлементов.

Теперь панель «Элементы» поддерживает псевдокласс :open в разделе «Стили > :hov > Принудительное определение состояния элемента» для некоторых HTML-элементов, таких как <details> , <select> , <dialog> и <input> .

До и после добавления опции ':open'.

Кроме того, панель «Элементы» теперь поддерживает несколько новых псевдоэлементов: ::checkmark , ::picker-icon , а также связанные с каруселью ::column , ::scroll-button , ::scroll-marker и ::scroll-marker-group .

Проблемы с Chromium: 383157184 , 379805728 .

Скопировать все сообщения консоли

Теперь вы можете скопировать все сообщения консоли одним щелчком правой кнопки мыши.

До и после добавления опции «Копировать консоль».

Кроме того, аналогичную опцию копирования можно найти в контекстном меню «Сеть» > «Полезная нагрузка запроса» .

Проблемы Chromium: 40206460 , 384967020 .

Байтовые единицы на панели «Память»

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

До и после отображения байтовых единиц.

Проблема с Chromium: 388589515 .

Различные важные моменты

В этом релизе внесены следующие существенные исправления и улучшения:

  • Производительность :
    • Аннотации : Теперь вы можете щелкнуть по метке, чтобы выбрать соответствующую запись ( crbug.com/388224764 ).
    • Аналитика : Теперь при нажатии на CLS на вкладке «Аналитика» выбирается наихудший кластер, а не наихудшее смещение.
  • Список игнорируемых элементов : Внутренние элементы узлов, начинающиеся с node: теперь игнорируются по умолчанию ( crbug.com/382453615 ).
  • Выражения в реальном времени : Исправлена ​​ошибка, из-за которой выражения в реальном времени влияли на команду $_ ( crbug.com/388437265 ).
  • Элементы > Стили : Относительная длина теперь отображается во всплывающем окне, показывающем абсолютное значение ( crbug.com/40778486 ).
  • Доступность : теперь в заголовках столбцов отображается информация о возможности сортировки.
  • Теперь значки вкладок расположены справа от названий вкладок, а не слева.

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

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

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

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

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

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