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

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

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

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

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

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

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

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

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

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

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

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

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

Более подробную информацию см. в разделе Настройки > Инновации ИИ .

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

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

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

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

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

Комментируйте и делитесь результатами оценки эффективности

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

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

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

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

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

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

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

Легче обнаружить чрезмерные изменения макета

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

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

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

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

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

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

Трек «Анимации» теперь показывает полезную информацию о некомпозированных анимациях:

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

До и после именования анимаций в треке, маркировки не скомпонованных и указания причины сбоя.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Доступность

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

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

Проблема с хромом: 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» .