Что нового в 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» .