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

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

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

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

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

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

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

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

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

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

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

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

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

Для получения более подробной информации см. Настройки > Инновации в области ИИ .

Аналитические данные консоли доступны одним щелчком мыши.

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

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

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

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

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

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

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

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

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

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

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

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

Обнаружить чрезмерные изменения в компоновке проще.

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

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

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

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

Проблема Chromium: 369100729 .

Найдите некомпозитные анимации.

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

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

Анимация «до» и «после» в треке, пометка некомпозированных фрагментов и указание причины сбоя.

Для получения дополнительной информации см. разделы «Использовать только свойства композитора» и «Управление количеством слоев» .

Проблема Chromium: 41006273 .

Аппаратная параллельность переносится на датчики.

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

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

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

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

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

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

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

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

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

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

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

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

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

Аудит Lighthouse для страниц, не использующих протокол HTTP, в режимах временного интервала и снимка.

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

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

Доступность

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

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

Номер выпуска Chromium: 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.

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

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