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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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