Что нового в 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.

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

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