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

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

Постоянная история чата с использованием ИИ

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

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

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

Анализ доставки изображений

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фотографии до и после добавления рекомендаций по ограничению скорости передачи данных в меню настроек.

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

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

Временные метки наложены

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

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

В дорожке Timings сохраняются ваши пользовательские вызовы функций mark() и measure() .

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

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

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

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

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

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

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

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

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

Номер выпуска Chromium: 325441858 .

Маяк 12.3.0

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

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

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

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

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

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

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

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

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

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

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

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

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