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

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

С Gemini вы сможете лучше понимать ошибки и предупреждения в консоли.

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

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

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

Для получения более подробной информации см. раздел «Лучшее понимание ошибок и предупреждений с помощью ИИ» .

Поддержка правил @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`.

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

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

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

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

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

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

Фотографии «до» и «после» добавления отдельного раздела для предварительных подсказок.

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

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

Скрыть колонку «Водопад»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Маяк 11.7.1

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

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

Фотографии «до» и «после» добавления и удаления поддержки плагина Publisher Ads.

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

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

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

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

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

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

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

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

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

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

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