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

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

Постоянная история чата ИИ

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

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

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

Понимание доставки изображений

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

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

Дополнительную информацию об оптимизации доставки изображений см. в разделе Эффективное кодирование изображений .

Классическая и современная навигация с помощью клавиатуры

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

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

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

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

Игнорировать нерелевантные скрипты в диаграмме пламени

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стек-трейсы вызовов JavaScript в Сводке

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

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

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

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

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

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

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

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

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

Маяк 12.3.0

Панель Lighthouse теперь работает под управлением Lighthouse 12.3.0.

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

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

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

Разные моменты

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

  • Источники : при приостановке отладчик теперь не переключается неожиданно на контекст сервисного работника, если он был создан после приостановки ( 373893057 ).
  • Производительность :
    • При наведении курсора на скрипты подсказки в диаграмме Flame теперь показывают URL-адреса, если таковые имеются ( 368541957 ).
    • Резюме : Круговая диаграмма заменена столбчатой диаграммой.
    • Флажок «Данные расширения» в настройках захвата переименован в «Показывать пользовательские треки» .
    • На вкладке «Инсайты» теперь есть раздел «Пройденные тесты» (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» .