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

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

Лучше понимайте ошибки и предупреждения в консоли с помощью Gemini

Эта версия Chrome добавляет возможности генеративного ИИ в консоль DevTools, чтобы дать вам лучшее понимание ошибок и предупреждений, с которыми вы сталкиваетесь.

Чтобы получить объяснение ошибки или предупреждения, созданное искусственным интеллектом, нажмите кнопку Искра лампочки. Ознакомьтесь с кнопкой ошибки (предупреждения) рядом с сообщением в консоли и следуйте инструкциям.

Объяснение ошибки, созданное искусственным интеллектом.

Более подробную информацию см. в статье Улучшите понимание ошибок и предупреждений с помощью ИИ .

Поддержка правил @position-try в Элементах > Стили

Чтобы помочь вам отладить позиционирование якоря CSS , вкладка Elements > Styles теперь поддерживает правила CSS @position-try . Вкладка разрешает значения position-try-options и связывает каждую опцию с выделенным разделом @position-try --name .

До и после поддержки правил CSS @position-try.

Более подробную информацию см. в разделе Знакомство с API позиционирования якорей CSS .

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

Улучшения панели источников

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

Настройте автоматическую печать и закрытие скобок

Теперь вы можете включить или выключить автоматическую удобную печать и закрытие скобок для редактора в Sources . Удобная печать делает минифицированные файлы читаемыми. Закрытие скобок автоматически добавляет закрывающую скобку ( ) или } ) или тег ( > ), когда вы вводите открывающую.

Чтобы настроить соответствующее поведение, установите или снимите новые Автоматически закрывающиеся скобки и Автоматически минимизированные источники в Настройки > Настройки > Источники .

До и после добавления новых настроек для автоматической красивой печати и закрытия скобок.

Проблемы с Chromium: 40865010 , 324314570 .

Обработанные отклоненные обещания распознаются как перехваченные

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

Другими словами, когда в меню Источники > Точки останова > Пауза при неперехваченных исключениях включен, отладчик не будет останавливаться на операторах, подобных следующим:

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

До и после распознавания пойманных отказов.

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

Причины ошибок в консоли

Теперь консоль показывает цепочки причин ошибок в трассировке стека, если таковые имеются.

Чтобы упростить отладку, вы можете указать причины ошибок при перехвате и повторной выдаче ошибок. По мере того, как консоль проходит по цепочке причин, она выводит каждый стек ошибок с префиксом Caused by: так что вы все еще можете видеть исходную ошибку.

До и после печати трассировки стека с префиксами `Caused by`.

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

Улучшения сетевой панели

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

Проверьте заголовки Early Hints

Заголовки Early Hints получают специальный раздел на вкладке Headers запроса на панели Network . Ранее вы могли найти соответствующие заголовки в разделе Response Headers .

Early Hints — это код статуса HTTP ( 103 Early Hints ), используемый для отправки предварительного ответа HTTP перед окончательным ответом. Это позволяет серверу отправлять подсказки браузеру о критических подресурсах (например, таблице стилей или критически важном JavaScript) или источниках, которые, вероятно, будут использоваться страницей, пока сервер занят генерацией основного ресурса.

До и после добавления специального раздела для ранних подсказок.

Для получения дополнительной информации см. раздел Более быстрая загрузка страниц с использованием времени на размышление сервера с помощью Early Hints .

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

Скрыть столбец «Водопад»

Теперь вы можете скрыть столбец Waterfall на панели Network , аналогично тому, как вы можете скрыть другие столбцы. Щелкните правой кнопкой мыши по имени любого столбца и снимите флажок Waterfall в раскрывающемся меню.

До и после добавления опции скрытия столбца «Водопад».

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

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

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

Сбор статистики селектора CSS

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

Чтобы просмотреть статистику, выберите событие Recalculate Style и откройте новую вкладку Selector Stats . Вкладка показывает информацию о прошедшем времени, попытках сопоставления и количестве, а также проценте несовпадений с медленным путем для каждого селектора.

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

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

Изменить порядок и скрыть треки

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

Чтобы войти в режим конфигурации, нажмите кнопку Edit слева от имени трека. Затем нажмите вверх или вниз, чтобы переместить трек, или нажмите скрыть. Нажмите кнопку Check справа от имени трека, когда закончите.

Следующая версия, Chrome 126, принесет больше улучшений в этот пользовательский интерфейс.

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

Игнорировать ретейнеры на панели «Память»

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

Чтобы игнорировать ретейнер, выберите объект и в разделе Ретейнер щелкните правой кнопкой мыши ретейнер и выберите Игнорировать этот ретейнер в раскрывающемся меню. Игнорируемые ретейнеры отмечены ignored значением в столбце Расстояние . Чтобы прекратить игнорирование, щелкните Восстановить игнорируемые ретейнеры на панели действий вверху.

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

Кроме того, снимки кучи теперь поддерживают большее количество (сотни миллионов) ребер и узлов сдерживания ( 332350576 ).

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

Маяк 11.7.1

Панель Lighthouse теперь работает на Lighthouse 11.7.1. Полный список изменений см.

Среди заметных изменений — прекращение поддержки плагина Publisher Ads , который в этой версии устарел.

До и после добавления и удаления поддержки плагина Publisher Ads.

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

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

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

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

  • Панель «Рекордер» теперь официально вышла из статуса предварительной версии ( 329271496 ).
  • Консоль теперь не отображает ошибку, когда пользовательский форматировщик возвращает значение null для функции body() , что является допустимым поведением ( 329400119 ).
  • На панели «Источники» обновлена ​​подсветка синтаксиса, в частности, теперь она поддерживает флаги v и d в регулярных выражениях.
  • На вкладке «Сеть» > «Файлы cookie» исправлена ​​ошибка сопоставления исключенных файлов cookie с файлами cookie ответа ( 41491846 ).
  • Вкладка «Элементы» > «Стили» теперь выполняет следующие функции:
    • Показывает полностью перегруженные унаследованные правила с пользовательскими свойствами ( 41489874 ).
    • Выделяет примененное значение в светлом-темном цвете() в зависимости от цветовой темы ( 331123816 ).

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

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

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

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

Что нового в DevTools

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