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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фотографии до и после добавления раздела «Дополнительное хранилище» на панель приложений.

Проблема в 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 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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