Что нового в 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 с помощью нового значка «прокрутки», чтобы вы могли легко обнаружить переполнение прокрутки. Как и другие значки, этот значок отражает текущий 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» .