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

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

Отладка CSS с помощью Gemini

В Chrome DevTools появилась новая экспериментальная панель помощи искусственному интеллекту , где вы можете общаться с Gemini и получать помощь в отладке CSS.

Попробуйте прямо сейчас! На панели «Элементы» щелкните элемент правой кнопкой мыши и выберите «Спросить AI» или щелкните соответствующий значок.кнопка рядом с элементом. DevTools откроет новую панель помощи ИИ .

Пункт меню «Спросить AI» и соответствующая кнопка.

Новая панель предложит включить соответствующую настройку. Убедитесь, что вы соответствуете требованиям , включите переключатель настроек и вернитесь на панель помощи ИИ . Он примет выбранный вами элемент в качестве контекста. Введите свой вопрос об элементе.

Новая панель помощи ИИ отвечает на подсказку.

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

Команда DevTools с нетерпением ждет ваших отзывов. Не стесняйтесь оставлять его по адресу crbug.com/364805393 .

Управляйте функциями AI на специальной вкладке настроек.

Теперь вы можете управлять всеми функциями AI в одном месте: новые настройки >Вкладка «Инновации ИИ» . В нем перечислены важные моменты, описаны функции искусственного интеллекта и вы можете включать и выключать их по отдельности.

Новая вкладка «Инновации ИИ».

Дополнительную информацию см. в разделе «Настройки» > «Инновации искусственного интеллекта» .

Аналитика консоли в одном клике

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

Если вы вошли в Chrome, включите эти функции в «Настройки» >Инновации искусственного интеллекта , и все готово.

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

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

Аннотируйте и делитесь результатами производительности

На панели «Производительность» появилась новая вкладка «Аннотации» на расширяемой боковой панели слева, которая упрощает процесс создания заметок для исследования трассировки и совместной работы при обмене результатами производительности.

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

Новая вкладка аннотаций на боковой панели слева и аннотированные события, диапазон и соединение.

Получайте информацию о производительности прямо на панели «Производительность».

Теперь вы можете найти полезную информацию на новой вкладке «Статистика» на левой боковой панели панели «Производительность» . Аналитические данные объединяются из отчета Lighthouse и панели «Статистика производительности», поддержка которой скоро будет прекращена .

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

Команда DevTools с нетерпением ждет ваших отзывов о полезности аналитических данных, способах их улучшения и вашем опыте использования их с другими инструментами, такими как PageSpeed ​​Insights и Lighthouse . Не стесняйтесь оставлять свои отзывы на crbug.com/371170842 .

Облегчайте обнаружение чрезмерных сдвигов макета

Трек «Сдвиги макета» приобрел новый вид. Сдвиги макета теперь отмечены (более заметными) фиолетовыми ромбами и сгруппированы в кластеры в зависимости от их близости на временной шкале . И смены, и их кластеры получают организованную таблицу с расписанием, оценками, элементами и потенциальными виновниками на вкладке «Сводка» .

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

Кроме того, в представлении показателей в реальном времени отображается журнал изменений макета с оценками и элементами рядом с вкладкой «Взаимодействия» .

До и после добавления журнала «Сдвиги макета» в представление показателей в реальном времени.

Проблема с хромом: 369100729 .

Найдите некомпозитную анимацию

На дорожке «Анимации» теперь отображается полезная информация о некомпозитных анимациях:

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

Именование анимаций до и после на дорожке, пометка несоставных анимаций и отображение причины сбоя.

Дополнительные сведения см. в разделах «Придерживаться свойств только для композитора» и «Управление количеством слоев» .

Проблема с хромом: 41006273 .

Аппаратный параллелизм переходит на датчики

Настройка аппаратного параллелизма перемещается из панели «Производительность» в более подходящее место — панель «Датчики» .

До и после переноса параметра «Аппаратный параллелизм» на панель «Датчики».

Проблема с хромом: 371463665 .

Игнорируйте анонимные скрипты и сосредоточьтесь на своем коде в трассировках стека.

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

Вы также можете включить новые Настройки > Список игнорирования > Анонимные сценарии из eval или консоли , чтобы DevTools игнорировал анонимные сценарии без исходного URL-адреса.

Список игнорирования до и после улучшения в трассировке стека.

Кроме того, когда вы щелкаете правой кнопкой мыши и выбираете «Сохранить как...» в журнале консоли, текст « Показать больше/меньше» не сохраняется.

Проблемы с хромом: 40279542 , 40945570 , 345248263 .

Элементы > Стили: поддержка режимов написания sideways-* для наложений сетки и ключевых слов CSS.

Вкладка «Элементы» > «Стили» теперь поддерживает следующее:

  • Наложение сетки в окне просмотра теперь отображает сетки для режимов письма sideways-rl и sideways-lr .
  • Разрешает ключевые слова CSS . На практике это означает, что, например, если inherit является цвет, на вкладке «Стили» рядом с ним отображается палитра цветов. До и после разрешения ключевых слов CSS.

Проблемы с хромом: 40280717 , 40706051 , 40501131 .

Маяковые аудиты для страниц, отличных от HTTP, в режимах временного интервала и моментального снимка.

Lighthouse теперь может генерировать отчеты для страниц, отличных от HTTP, в режимах временного интервала и моментального снимка.

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

Доступность

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

  • В разделе «Источники» > «Редактор» вкладки с открытыми файлами теперь можно закрыть, наведя курсор на кнопку X и нажав Enter или пробел .
  • В разделе «Производительность» теперь вы можете выбрать запись в трассировке и нажать «Пробел», чтобы открыть контекстное меню.
  • В разделе «Производительность» вкладка «Статистика» на боковой панели слева доступна с клавиатуры, и ее можно «перемещать».

Проблема с хромом: 372411090 .

Разное

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

  • Настройки регулирования теперь правильно синхронизируются между панелями «Производительность» и «Сеть» ( 370332090 ).
  • Приложение > Фоновые службы > Спекулятивные нагрузки > Правила теперь имеет кнопку {} с красивым шрифтом, похожую на Источники > Редактор ( 40279147 ).
  • Живые выражения : нажатие Tab после выбора параметра автозаполнения теперь приводит к выходу из поля редактирования вместо отступа к тексту ( 349939551 ).
  • Элементы > Стили : anchor() и anchor-size() поддерживают новый синтаксис, в котором вы можете изменить порядок аргументов и опустить направление anchor-size() ( 343516786 ). Кроме того, исправлен резервный рендеринг ( 365802559 ).
  • Сеть : исправлены предварительные просмотры GraphQL ( 369931288 ).
  • Производительность : теперь сообщает о постепенном прогрессе загрузки и обработки трассировок.
  • WebAuthn : теперь динамически обновляет учетные данные, измененные методами signal* ( 368467199 ).
  • WebAssembly: предупреждение в консоли теперь информирует вас, доступно ли для модуля WebAssembly несколько символов отладки и какой из них используется ( 40879198 , 369515221 ).
  • Наложение Core Web Vitals удалено с вкладки «Визуализация» 328487897 .
  • Функции генеративного искусственного интеллекта теперь не требуют синхронизации настроек Chrome.

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

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

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

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

Что нового в DevTools

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