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

,

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

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

Эта версия приносит количество улучшений в сетевой панель.

Сетевые фильтры переосмыслены

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

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

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

Чтобы вернуть старую конструкцию фильтра, очистите настройки > Эксперименты > redsign of фильтрации на сетевой панели .

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

Выпуск хрома: 362672528 .

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

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

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

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

Выпуск хрома: 361717594 .

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

Эта версия приносит множество улучшений в панель Elements .

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

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

До и после добавления опции автозаполнения для свойств текста-эмфазиса-*'.

Выпуск хрома: 361471205 .

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

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

До и после маркировки переполнения прокрутки со знаком.

Выпуск хрома: 40670442 .

Голые заявления после вложенных правил не «сдвигаются»

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

В следующей выборке кода голая объявление после вложенного правила теперь не заставляет Chrome неожиданно переупорядочить стили в каскаде: 

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

  background-color: green;
}

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

Выпуск хрома: 358119261 .

Улучшения панели Performance

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

Рекомендации в живых метриках

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

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

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

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

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

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

Эта версия приносит количество улучшений в панель памяти .

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

Панель памяти получает новый тип профиля - отдельные элементы . Он показывает объекты, которые сохраняются с помощью ссылки на JavaScript.

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

Выпуск хрома: 350519222 .

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

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

  • Назван на основе свойств, которые они содержат, например, {firstProperty, secondProperty, ..., *nthProperty} .
  • Обнаружены этими именами, которые построены Devtools.
  • Сгруппировано вместе, если они имеют одинаковые свойства.

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

Выпуск хрома: 350519222 .

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

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

Чтобы отключить динамическую темацию, очистите настройки > Предпочтения > Внешний вид > MATCH CHOLURE и RELOAD DEVTOOLS.

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

Выпуск хрома: 328472696 .

Хромированный эксперимент: совместное использование процессов

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

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

«Эта вкладка делится ресурсами с другими вкладками ...» Infobar.

Обмен процессами может повлиять на отладку точки останова и анализ производительности. Для получения дополнительной информации см. Hrome Experiment: обмен процессами .

Маяк 12.2.1

Панель маяка теперь работает на маяке 12.2.1.

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

Чтобы узнать основы использования панели маяка в 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» .

,

Sofia Emelianova
Sofia Emelianova
GitHub

Network panel improvements

This version brings an number of improvements to the Network panel.

Network filters reimagined

The Network panel gets new filters, reimagined based on your feedback. The type-specific filters stay the same — a set of badges in a clean multi-select bar.

To declutter the UI, hide-, block-, and third-party-related checkboxes move under a drop-down list. The list has a number that tells you how many filters are checked under the drop-down.

Before and after moving hide-, block- and third-party-related filters under a drop-down.

To bring back the old filter design, clear Settings > Experiments > Redesign of the filter bar in the Network panel .

Let us know what you think about the reimagined design.

Chromium issue: 362672528 .

HAR exports now exclude sensitive data by default

To reduce the chances of accidental leaks of sensitive information, the network log exported in HAR format will no longer contain Cookie , Set-Cookie , and Authorization headers by default.

To export logs in HAR format with the sensitive data, turn on Settings > Preferences > Network > Allow to generate HAR with sensitive data . The Network panel will mark the Export button with an arrow. Long-click the button and select Export HAR (with sensitive data) from the drop-down menu.

Before and after adding export options with and without sensitive data to HAR export.

Chromium issue: 361717594 .

Elements panel improvements

This version brings an number of improvements to the Elements panel.

Autocomplete values for text-emphasis-* properties

Autocomplete in the Styles tab now suggests values for the following CSS properties:

Before and after adding autocomplete option for 'text-emphasis-*' properties.

Chromium issue: 361471205 .

Scroll overflows marked with a badge

The Elements panel now marks with a new 'scroll' badge the elements that contain overflowing content and have overflow: scroll or overflow: auto , so you can easily spot scroll overflows. Like the other badges, this badge reflects the current DOM and disappears if the content stops overflowing due to, for example, a size change.

Before and after marking scroll overflows with a badge.

Chromium issue: 40670442 .

Bare declarations after nested rules don't "shift up"

Following the CSS Working Group's decision to allow for bare declarations to come after nested rules, the Styles tab now doesn't "shift up" these declarations during parsing.

In the following code sample, the bare declaration after the nested rule now doesn't cause Chrome to unexpectedly reorder the styles in the cascade: 

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

  background-color: green;
}

Before and after allowing for bare declarations to come after nested rules.

Chromium issue: 358119261 .

Performance panel improvements

This version brings an number of improvements to the Performance panel.

Recommendations in live metrics

Live metrics can now provide metric-specific recommendations that help you configure your development environment as close as possible to what your users experience.

To get recommendations, set up field data fetching from Chrome UX Report (CrUX) and expand the Consider your local test conditions section in each metric card (if any) and Consider real user environments in the Environment settings .

Expanded sections with recommendations.

Follow the recommendations to approximate the experience of your users.

You can now navigate breadcrumbs in the timeline of a performance recording: "jump" back and forth between breadcrumbs, overwrite a child breadcrumbs, and remove multiple childs. Previously, when you selected a parent breadcrumb, its children would disappear.

Memory panel improvements

This version brings an number of improvements to the Memory panel.

New 'Detached elements' profile

The Memory panel gets a new profile type— Detached elements . It shows objects that are retained by a JavaScript reference.

Before and after adding the 'Detached elements' profile type to the Memory panel.

Chromium issue: 350519222 .

Improved naming of plain JS objects

To organize and declutter the Object category in heap snapshots, plain JavaScript objects are now:

  • Named based on the properties they contain, for example, {firstProperty, secondProperty, ..., *nthProperty} .
  • Searchable by these names that are constructed by DevTools.
  • Grouped together if they have the same properties.

Before and after organizing the Object category in heap snapshots.

Chromium issue: 350519222 .

Turn off dynamic theming

You can now turn off the automatic matching of DevTools colors to your custom theme colors in Chrome.

To turn off dynamic theming, clear Settings > Preferences > Appearance > Match Chrome color scheme and reload DevTools.

The before and after turning off dynamic theming.

Chromium issue: 328472696 .

Chrome Experiment: Process sharing

Normally, when you open multiple tabs from the same website (like Google Docs ), Chrome creates a separate renderer process for each. The Process sharing experiment changes this by allowing multiple tabs to share the same renderer process to improve performance.

If you see a message stating "This tab shares resources with other tabs..." infobar while DevTools is open, then you are part of the small group with the Process sharing experiment enabled.

The 'This tab shares resources with other tabs...' infobar.

Process sharing can affect breakpoint debugging and performance analysis. For more information, see Chrome Experiment: Process sharing .

Lighthouse 12.2.1

The Lighthouse panel now runs Lighthouse 12.2.1.

This update introduces a < 20 KB ignore threshold for resource compression suggestions to help you focus only on the meaningful file size savings. See the full list of changes .

To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed .

Chromium issue: 772558 .

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

  • Elements :
  • Console : Fixed a non-escaped ampersand in multi-line strings in cURL commands ( 352651673 ).
  • Memory : Fixed the default selection on pages with service workers, main thread now selected ( 40669896 ).
  • Security : The URL scheme highlighting now correctly updates as the security stage of an origin changes ( 359920086 ).

Download the preview channels

Consider using the Chrome Canary , Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.