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

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

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

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

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

Объяснение ошибки, созданное ИИ.

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

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

Для отладки позиционирования якорей CSS вкладка «Элементы > Стили» теперь поддерживает CSS-правила @position-try . Эта вкладка обрабатывает значения position-try-options и связывает каждый параметр с отдельным разделом @position-try --name .

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

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

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

Улучшения панели «Источники»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проверьте заголовки ранних подсказок

Заголовки Early Hints теперь отображаются в специальном разделе на вкладке «Заголовки» запроса на панели «Сеть» . Ранее соответствующие заголовки можно было найти в разделе «Заголовки ответа» .

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

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

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

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

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

Теперь вы можете скрыть столбец «Водопад» на панели «Сеть» , как и другие столбцы. Щёлкните правой кнопкой мыши по названию любого столбца и снимите флажок «Водопад в раскрывающемся меню.

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

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

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

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

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

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

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

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

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

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

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

Чтобы войти в режим настройки, нажмите кнопку слева от названия трека. Затем нажмите вверх или вниз чтобы переместить трек, или кнопку «скрыть» ). После нажмите кнопку проверки (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» .