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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вкладка Performance > Insights получает новое дополнение к набору аналитических данных: Forced reflow . Forced reflow происходит, когда движок рендеринга приостанавливает выполнение скрипта для расчета стиля и макета. Forced reflows могут быть узкими местами, которых вы, возможно, захотите избежать.

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

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

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