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

Sofia Emelianova

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

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

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

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

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

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

Дайте нам знать, что вы думаете об обновленном дизайне.

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

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

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

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

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

Улучшения панели «Элементы»

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

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

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

• сокращение text-emphasis
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

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

Чтобы отключить динамическую тему, очистите настройки «Настройки » > «Настройки» > «Внешний вид» > check_box_outline_blank «Согласовать цветовую схему 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.

• Отправьте нам предложение или отзыв через crbug.com .
• Сообщите о проблеме DevTools, используя дополнительные параметры. > Справка > Сообщить о проблемах DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к нашим видеороликам «Что нового в DevTools на YouTube» или «Советы по DevTools» на YouTube .

Что нового в DevTools

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