Что нового в 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 Report (CrUX) и разверните раздел «Учитывайте локальные условия тестирования» в каждой карточке метрики (если есть) и «Учитывайте реальные пользовательские среды» в настройках среды .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Совместное использование процессов может повлиять на отладку точек останова и анализ производительности. Дополнительную информацию см. в разделе «Эксперимент Chrome: совместное использование процессов» .

Маяк 12.2.1

На панели «Маяк» теперь работает 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» .