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

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

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

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

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

  • Сетевой запрос на панели «Сеть» .
  • Файл на вкладке «Источники» > «Страница» .
  • Действие на дорожке Performance > Main .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Информация о блокировке рендеринга на вкладке «Сводка»

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

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

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

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

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

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

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

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

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

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

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

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

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

Вычисление эмуляции давления в датчиках

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

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

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

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

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

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

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

Новый взгляд на настройки

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

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

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

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

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

Разное

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

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

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

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

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

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

Что нового в DevTools

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