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

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

Постоянная история чата с искусственным интеллектом

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

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

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

Информация о доставке изображений

На вкладке «Производительность» > «Аналитика» теперь можно выделять изображения, размер файла которых можно оптимизировать. Щелкните изображение в аналитических данных, чтобы оно было выделено на дорожке сети .

Выделена панель «Производительность» с информацией о доставке изображений.

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

Классическая и современная клавиатурная навигация

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

  • Классический : масштабирование с помощью колесика мыши (тачпад вверх или вниз) и вертикальная прокрутка с помощью Shift + колесика мыши.
  • Современный : вертикальная прокрутка с помощью колеса мыши, горизонтальная прокрутка с помощью Shift + колеса мыши и масштабирование с помощью Command/Control + колеса мыши.

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

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

Игнорируйте ненужные сценарии в диаграмме пламени.

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

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

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

Маркер временной шкалы и подсветка диапазона при наведении

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

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

Рекомендуемые настройки регулирования

На панели «Производительность» теперь рекомендуются настройки регулирования как в текущих показателях, так и в соответствующих раскрывающихся меню захвата .

До и после добавления рекомендаций по регулированию в меню настроек.

Рекомендуемое регулирование ЦП (на данный момент) является наиболее часто используемым 4x slowdown , а рекомендации по сети основаны на данных отчета Chrome UX , если оно включено в текущих показателях .

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

Маркеры времени в наложении

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

До и после перемещения маркеров в нижнюю часть трассы.

Дорожка «Тайминги» сохраняет ваши пользовательские вызовы mark() и measure() .

Стек трассировки вызовов JavaScript в сводке

На вкладке «Производительность» > «Сводка» теперь отображаются трассировки стека вызовов JavaScript, включая асинхронные.

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

Настройки значка перенесены в меню в Elements

Настройки значка на панели «Элементы» перемещены из скрытой по умолчанию панели действий в соответствующее контекстное меню.

До и после переноса настроек значка в меню.

Новая панель «Что нового»

Панель «Что нового» приобрела новый вид, который более точно соответствует дизайну Chrome.

Старый и новый вид панели «Что нового».

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

Маяк 12.3.0

На панели «Маяк» теперь работает Lighthouse 12.3.0.

В этом обновлении, среди прочего, добавлены новые проверки, которые проверяют правильную изоляцию источника с помощью COOP и строгой политики HSTS. См. полный список изменений .

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

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

Разное

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

  • Источники : при приостановке отладчик теперь не переключается неожиданно на контекст сервисного работника, если он создан после паузы ( 373893057 ).
  • Производительность :
    • При наведении курсора на скрипты во всплывающих подсказках на диаграмме пламени теперь отображаются URL-адреса, если таковые имеются ( 368541957 ).
    • Сводка : Круговая диаграмма заменена гистограммой.
    • Флажок «Данные расширения» в настройках Capture переименован в «Показать пользовательские треки» .
    • На вкладке «Статистика» теперь есть раздел «Пройденная статистика» (N) , который по умолчанию свернут.
  • Приложение > Хранилище : вы можете создавать записи хранилища с пустыми ключами, поскольку они технически действительны ( 373703285 ).
  • Режим устройства теперь отключен для страниц chrome:// ( 40186276 ).
  • Сеть :
    • Если соответствующая настройка включена , нажатие кнопки «Экспортировать HAR» открывает меню с двумя опциями (очищенные и с конфиденциальными данными). Раньше меню открывалось по длинному клику ( 378076279 ).
    • Копировать как cURL теперь использует атрибут -b для обхода файлов cookie и повышения удобства чтения вместо -H 'cookie:...' ( 40791742 ).
  • Специальные возможности : теперь вы можете перемещать вкладки внутри панелей влево или вправо с помощью контекстного меню ( 383164782 ).
  • Блокировка сетевых запросов : этот параметр командного меню теперь синхронизирован с соответствующим флажком ( 378058733 ).

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

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

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

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

Что нового в DevTools

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