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

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

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

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

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

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

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

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

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

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

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

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

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

Выбирайте различные события в одном чате ИИ

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

Подсветка первой и третьей стороны в Performance

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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