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

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

Получите больше аналитической информации с помощью Gemini.

В разделе «Производительность > Аналитика» теперь можно нажать «Отладка с помощью ИИ» (ранее «Спросить ИИ» ), чтобы общаться и отлаживать Gemini в панели помощи ИИ и получать более подробную информацию о производительности:

  • Улучшить доставку изображений
  • Устаревший JavaScript
  • Дублированный JavaScript
  • Современный HTTP

Фотографии «до» и «после» добавления кнопки «Отладка с помощью ИИ» для получения более подробной информации о производительности.

В разделе «Сетевые условия» эмулируйте заголовок «Save-Data».

В панели «Сетевые условия» теперь можно эмулировать поведение заголовка запроса Save-Data . Этот заголовок представляет собой подсказку сетевого клиента, указывающую на предпочтение клиента в отношении сокращения потребления данных. Он также доступен через API navigator.connection.saveData .

Сравнение состояния сети до и после добавления эмуляции заголовка запроса 'Save-Data' в раздел 'Сетевые условия'.

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

Отображение базового состояния во всплывающей подсказке свойства CSS.

В меню «Элементы > Стили» при наведении курсора на любое свойство CSS теперь можно увидеть под его определением информацию о доступности этого свойства в основных браузерах в соответствии с его базовым статусом.

Сравнение состояния "Базовый уровень" и его отображения во всплывающих подсказках CSS до и после добавления этой информации.

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

Переопределение форм-факторов в подсказках клиентского пользовательского агента

В раскрывающемся списке «Сетевые условия > Подсказки клиента агента пользователя» теперь есть возможность переопределить форм-факторы, а именно значения заголовка запроса Sec-CH-UA-Form-Factors .

Фотографии до и после добавления параметров переопределения форм-фактора в подсказки клиентского агента пользователя.

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

Маяк 12.8.0

В панели управления Lighthouse теперь используется Lighthouse 12.8.0.

В этой версии Lighthouse добавил новый отчет: «Предотвращение XSS-атак на основе DOM с помощью доверенных типов».

См. также полный список изменений .

Чтобы узнать основы использования панели Lighthouse в инструментах разработчика, см. статью «Lighthouse: оптимизация скорости веб-сайта» .

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

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

Вот лишь некоторые из многочисленных существенных исправлений и улучшений в этом релизе:

  • Помощь ИИ :
    • Теперь история чата очищается при отключении соответствующей функции ИИ в настройках .
    • Доступность : Теперь программы чтения с экрана озвучивают контекстные заголовки на ранних этапах, сообщение «Ответ загружается», когда начинается потоковая передача ответа, и сообщение «Ответ готов», когда ответ завершен.
  • Элементы :
    • Теперь на вкладке «Стили» можно оценивать функции CSS sibling-index() , sibling-count() и env() ( crbug.com/417128001 , crbug.com/40196710 ).
    • Добавлена ​​поддержка псевдоэлемента ::view-transition-group-children ( crbug.com/425901164 ).
    • Добавлена ​​поддержка учета проблем доступности интерактивного контента в элементе <summary> ( crbug.com/427172874 ).
    • Теперь на вкладке «Вычисляемые» можно перейти к подробным свойствам в разделе «Стили» ( crbug.com/41486012 ).
    • Сглаживание, цветовые редакторы: теперь вы можете взаимодействовать с кривыми Безье для анимационных переходов и цветовыми палитрами с помощью клавиатуры ( crbug.com/401213421 ).
  • В сети импорт HAR-файлов теперь также включает файлы cookie запроса и ответа ( crbug.com/432995868 ).
  • Режим устройства : Обновлены пользовательские агенты для устройств Apple до последней версии Safari 18.5.

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

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

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

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

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

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