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

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

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

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

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

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

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

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

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

Обработанные отклоненные обещания признаются пойманными

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

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

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

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

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

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

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

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

Трассировки стека до и после печати с префиксами «Caused by».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

До и после добавления возможности игнорировать гонорары.

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

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

Маяк 11.7.1

На панели «Маяк» теперь работает Lighthouse 11.7.1. См. полный список изменений .

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

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

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

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

Разное

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

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

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

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

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

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

Что нового в DevTools

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