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

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

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

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

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

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

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

Вкладка Performance > Insights теперь может выделять изображения, размер файла которых можно оптимизировать. Щелкните изображение в insight, чтобы увидеть его выделенным в Network track.

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

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

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

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

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

Чтобы выбрать предпочтительный стиль, в правом верхнем углу панели нажмите Show shortcuts и выберите Classic или Modern . Диалоговое окно shortcuts также предоставляет вам шпаргалку доступных shortcuts.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стек трассировки вызовов JavaScript в Резюме

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

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

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

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

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

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

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

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

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

Маяк 12.3.0

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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