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

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

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

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

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

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

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

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

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

Калиброванные настройки регулирования ЦП

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

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

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

Выбирайте разные мероприятия в одном чате с искусственным интеллектом.

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

Собственное и стороннее выделение в Performance

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

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

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

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

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

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

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

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

Скопируйте все сообщения консоли

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

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

Кроме того, аналогичную опцию копирования можно найти в контекстном меню Network > Request Payload .

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

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

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

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

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

Разное

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

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

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

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

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

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

Что нового в DevTools

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