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

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

Отладка сетевых запросов, исходных файлов и трассировка производительности с помощью Gemini

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

Подобно контекстному меню на панели «Элементы» , чтобы открыть панель помощи ИИ и начать чат с Gemini, щелкните правой кнопкой мыши и выберите «Спросить ИИ» или щелкните значокКнопка «Спросить ИИ» рядом со следующим:

  • Сетевой запрос на панели «Сеть» .
  • Файл на вкладке Источники > Страница .
  • Занятие в разделе «Выступление» > «Основное направление».

Кнопки и пункты меню «Спросить ИИ» в разделах «Сеть», «Источники» и «Производительность».

Gemini примет во внимание контекст выбранного запроса, файла или действия.

Команда DevTools с нетерпением ждет ваших отзывов на crbug.com/364805393 .

История чата ИИ

Теперь вы можете восстанавливать и просматривать прошлые чаты с Gemini на панели помощи ИИ , нажав кнопку нового чата в левом верхнем углу панели или используя кнопки «Спросить ИИ» и пункты меню панели «Сеть» , «Источники» > вкладка «Страница» и «Производительность » > «Основной трек».

Чтобы просмотреть один из предыдущих чатов, выберите соответствующий запрос из раскрывающегося меню под кнопкой « » . Панель помощи ИИ запомнит историю чата, пока открыт DevTools.

История чата ИИ в раскрывающемся списке под кнопкой «История».

Управляйте хранилищем расширений в разделе «Приложение» > «Хранилище».

Подобно локальному и сеансовому хранилищу, теперь вы можете просматривать и изменять записи хранилища расширений в разделе Приложение > Хранилище .

До и после добавления раздела «Расширенное хранилище» на панель приложений.

Проблема с Chromium: crbug.com/40963428 .

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

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

Фазы взаимодействия в живых метриках

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

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

Как сообщается в расширении Web Vitals, теперь в DevTools , выпуск этих функций знаменует собой окончание поддержки расширения Web Vitals.

Проблема с Chromium: crbug.com/369097528 .

Отображать информацию о блокировках на вкладке «Сводка»

При выборе сетевого запроса, отмеченного красным треугольником на вкладке «Производительность» > «Сеть» , на вкладке «Сводка» в дополнение к (переработанной) подсказке теперь также отображается информация о том, что запрос блокирует рендеринг.

До и после добавления информации о блокировке рендеринга на вкладку «Сводка».

Поддержка событий scheduler.postTask и их стрелок-инициаторов

В разделе «Производительность > Основной трек» теперь отображаются события scheduler.postTask() и следующие стрелки инициатора между:

  • Schedule postTask -> Fire postTask
  • Schedule postTask -> Abort postTask

До и после добавления поддержки событий scheduler.postTask и их стрелок-инициаторов.

Проблема с Chromium: crbug.com/40775984 .

Улучшения панели «Анимации» и вкладки «Элементы» > «Стили»

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

На вкладке «Элементы» > «Стили» значки панели «Перейти к анимации» теперь располагаются рядом со значениями свойств animation , чтобы вы могли легко просматривать анимации там.

До и после добавления ссылки из вкладки «Стили» на панель «Анимация».

Обновления в реальном времени на вкладке «Вычисления»

Вкладка «Элементы» > «Вычисляемые» теперь обновляет вычисляемые значения в режиме реального времени, например, когда их обновляет анимация.

Эмуляция вычислительного давления в датчиках

Панель датчиков теперь позволяет эмулировать Nominal , Fair , Serious и Critical загрузку ЦП.

До и после добавления опции эмуляции давления ЦП на панель датчиков.

Проблема с Chromium: crbug.com/362277525 .

Объекты JS с одинаковым именем, сгруппированные по источнику на панели «Память»

Панель «Память» теперь различает объекты JS с одинаковым именем, поступающие из разных источников, и группирует их соответствующим образом.

До и после группировки объектов JS с одинаковым именем также по источнику.

Проблема с Chromium: crbug.com/357902505 .

Новый вид настроек

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

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

Панель анализа производительности устарела и удалена из DevTools.

Все важные и полезные функции из панели Performance insights теперь нашли новое пристанище на панели Performance , в частности в live metrics , вкладке боковой панели Insights и Layout shifts track . Таким образом, эта версия устарела и удаляет панель Performance insights из DevTools.

Команда DevTools благодарна за ваши отзывы об устаревании этой панели и общем опыте отладки производительности. Как всегда, нам нравится слышать ваши мысли и узнавать о ваших точках зрения. Продолжайте в том же духе!

Разные моменты

Вот некоторые важные исправления и улучшения в этом выпуске:

  • Производительность :
    • Убрано ненужное ограничение в 3 символа для поисковых запросов.
    • Добавлена ​​кнопка » , которая возвращает вас на экран текущих показателей.
    • Исправлены ранее неработающие сочетания клавиш Shift + S / W для масштабирования трассировки.
  • Элементы > Стили :
    • Добавлен якорь-центр для автозаполнения 341991541 .
    • Исправлена ​​ошибка, из-за которой редактор Flexbox был недоступен для значений из двух слов 341964645 .
  • Сеть : сбои предварительной загрузки теперь отображаются в виде желтых предупреждений или красных ошибок, что означает, что отображение контента не затронуто 372055494 .

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

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

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

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

Что нового в DevTools

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