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

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

Улучшения сетевой панели

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

Переосмысление сетевых фильтров

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

Чтобы не перегружать интерфейс, флажки «Скрыть», «Заблокировать» и «Связать со сторонними фильтрами» перемещаются в раскрывающийся список. В списке есть число, которое указывает, сколько фильтров отмечено в раскрывающемся списке.

До и после перемещения фильтров скрытия, блокировки и сторонних фильтров в раскрывающийся список.

Чтобы вернуть старый дизайн фильтра, очистите настройки > Эксперименты > Изменение дизайна панели фильтров на панели «Сеть» .

Поделитесь с нами своим мнением об обновленном дизайне.

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

Экспорт HAR теперь по умолчанию исключает конфиденциальные данные.

Чтобы снизить вероятность случайной утечки конфиденциальной информации, сетевой журнал, экспортированный в формате HAR, больше не будет содержать заголовков Cookie , Set-Cookie и Authorization по умолчанию.

Чтобы экспортировать журналы в формате HAR с конфиденциальными данными, установите «Разрешить генерировать HAR с конфиденциальными данными» «Настройки» > «Настройки » > «Сеть» . На панели «Сеть» кнопка « » будет отмечена стрелкой. Нажмите кнопку и удерживайте её, чтобы выбрать «Экспортировать HAR (с конфиденциальными данными)» в раскрывающемся меню.

До и после добавления параметров экспорта с конфиденциальными данными и без них в экспорт HAR.

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

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

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

Значения автодополнения для свойств text-emphasis-*

Функция автозаполнения на вкладке «Стили» теперь предлагает значения для следующих свойств CSS:

До и после добавления параметра автозаполнения для свойств «text-emphasis-*».

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

Переполнение прокрутки отмечено значком

Панель «Элементы» теперь отмечает элементы, содержащие выходящий за пределы элемент со свойством overflow: scroll или overflow: auto , новым значком «прокрутка», что позволяет легко обнаружить переполнение при прокрутке. Как и другие значки, этот значок отражает текущую DOM-модель и исчезает, если содержимое перестает выходить за пределы элемента, например, из-за изменения размера.

До и после маркировки переполнений прокрутки значком.

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

Голые объявления после вложенных правил не «смещаются вверх»

В соответствии с решением рабочей группы CSS разрешить размещение пустых объявлений после вложенных правил , вкладка «Стили» теперь не «смещает» эти объявления во время анализа.

В следующем примере кода пустое объявление после вложенного правила теперь не приводит к тому, что Chrome неожиданно переупорядочивает стили в каскаде:

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

До и после того, как были разрешены пустые объявления после вложенных правил.

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

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

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

Рекомендации в реальных метриках

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

Чтобы получить рекомендации, настройте извлечение полевых данных из отчета Chrome UX (CrUX) и разверните раздел Учитывайте локальные условия тестирования в каждой карточке метрики (если таковые имеются), а также Учитывайте реальные пользовательские среды в настройках среды .

Расширенные разделы с рекомендациями.

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

Теперь вы можете перемещаться по навигационным цепочкам на временной шкале записи выступления: «переходить» между навигационными цепочками, перезаписывать дочерние навигационные цепочки и удалять несколько дочерних. Раньше при выборе родительской навигационной цепочки её дочерние цепочки исчезали.

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

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

Новый профиль «Отдельные элементы»

На панели «Память» появился новый тип профиля — «Отсоединённые элементы» . Он отображает объекты, удерживаемые ссылкой JavaScript.

До и после добавления типа профиля «Отдельные элементы» на панель «Память».

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

Улучшенное именование простых объектов JS

Для организации и наведения порядка в категории Object в снимках кучи простые объекты JavaScript теперь выглядят следующим образом:

  • Именуются на основе содержащихся в них свойств, например, {firstProperty, secondProperty, ..., *nthProperty} .
  • Поиск возможен по этим именам, созданным DevTools.
  • Группируются вместе, если имеют одинаковые свойства.

До и после организации категории «Объект» в моментальных снимках кучи.

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

Отключить динамическую тему

Теперь вы можете отключить автоматическое сопоставление цветов DevTools с цветами вашей темы в Chrome.

Чтобы отключить динамическую тему, очистите настройки > Настройки > Внешний вид > Соответствие цветовой схеме Chrome и перезагрузите DevTools.

До и после отключения динамической темы.

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

Эксперимент Chrome: совместное использование процессов

Обычно при открытии нескольких вкладок одного сайта (например, Google Docs ) Chrome создаёт отдельный процесс рендеринга для каждой из них. Эксперимент с совместным использованием процессов меняет это, позволяя нескольким вкладкам использовать один и тот же процесс рендеринга для повышения производительности.

Если вы видите сообщение «Эта вкладка использует общие ресурсы с другими вкладками...» на информационной панели при открытом DevTools, то вы являетесь частью небольшой группы, в которой включен эксперимент по совместному использованию процессов .

Информационная панель «Эта вкладка использует общие ресурсы с другими вкладками...».

Совместное использование процессов может повлиять на отладку точек останова и анализ производительности. Подробнее см. в статье Chrome Experiment: Process Sharing .

Маяк 12.2.1

Панель Lighthouse теперь работает под управлением Lighthouse 12.2.1.

Это обновление вводит порог игнорирования предложений по сжатию ресурсов < 20 KB чтобы помочь вам сосредоточиться только на существенной экономии размера файла. Полный список изменений см. здесь.

Чтобы изучить основы использования панели Lighthouse в DevTools, ознакомьтесь с разделом Lighthouse: Оптимизация скорости сайта .

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

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

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

  • Элементы :
    • Множественные исправления для редактирования вложенного CSS ( 41486635 , 361477264 , 328263458 , 41487826 ).
    • Исправлена ​​ошибка, из-за которой определенные, но имеющие пустое значение пользовательские свойства обрабатывались как неопределенные ( 365578428 ).
  • Консоль : исправлен неэкранированный амперсанд в многострочных строках в командах cURL ( 352651673 ).
  • Память : исправлен выбор по умолчанию на страницах с сервис-воркерами, теперь выбран основной поток ( 40669896 ).
  • Безопасность : Подсветка схемы URL теперь корректно обновляется при изменении уровня безопасности источника ( 359920086 ).

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

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

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

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

Что нового в DevTools

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