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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проблема Chromium: 361717594 .

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

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

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

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

До и после добавления опции автозаполнения для свойств 'text-embasis-*'.

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

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

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

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

Проблема Chromium: 40670442 .

Простое объявление после вложенных правил не "сдвигается вверх".

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

В приведенном ниже примере кода простое объявление после вложенного правила теперь не приводит к неожиданной перестановке стилей в каскаде в Chrome:

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

  background-color: green;
}

До и после разрешения размещения простых объявлений после вложенных правил.

Номер выпуска Chromium: 358119261 .

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

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

Рекомендации в режиме реального времени на основе метрик

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отключите динамическое оформление.

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

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

Фотографии до и после отключения динамического оформления.

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

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

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

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

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

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

Маяк 12.2.1

В панели управления Lighthouse теперь используется версия Lighthouse 12.2.1.

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

Чтобы узнать основы использования панели Lighthouse в инструментах разработчика, см. статью «Lighthouse: оптимизация скорости веб-сайта» .

Номер выпуска Chromium: 772558 .

Различные важные моменты

В этом релизе внесены следующие существенные исправления и улучшения:

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

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

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

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

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

Что нового в инструментах разработчика

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