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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теперь вы можете обнаружить действенные идеи на новой вкладке Insights на левой боковой панели панели Performance . Эти идеи консолидированы из отчета Lighthouse и панели Performance insights , которая скоро будет упразднена .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Доступность

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

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

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