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

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

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

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

Новые данные о производительности

На вкладке «Производительность» > «Аналитика» появились новые аналитические данные:

  • Современный HTTP , который выделяет запросы, использующие старый протокол HTTP/1.1.
  • Используйте эффективные сроки хранения кэша , которые выделяют запросы, способные выиграть от более длительного срока хранения кэша и ускорить загрузку вашего сайта.
  • Отображение шрифта , показывающее предполагаемую экономию времени при оптимизации font-display .

Три новых аналитических информации на вкладке «Аналитика».

Нажмите, чтобы выделить

Теперь вы можете щелкать элементы в таблицах «Сводка» , «Снизу вверх» , «Дерево вызовов» и «Журнал событий» , чтобы выделять соответствующие события в трассировке и затемнять остальные при просмотре трассировки производительности.

Тайминги сервера в сводке сетевых запросов

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

Таблица «Время работы сервера» в сводке сетевого запроса.

Панель «Производительность» берет данные из заголовка ответа Server-Timing .

Фильтрация файлов cookie в разделе «Конфиденциальность и безопасность»

Таблица в разделе Конфиденциальность и безопасность > Конфиденциальность > Сторонние файлы cookie получила фильтр, поэтому вы сможете быстрее находить интересующие вас файлы cookie.

Фильтр в таблице «Сторонние файлы cookie».

Размеры в килобайтах в таблицах на панелях

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

До и после унификации единиц размера.

Автозаполнение поддерживает corner-shape и corner-*-shape в Элементах > Стили

Функция автозаполнения в разделе «Элементы» > «Стили» теперь может предлагать соответствующие значения для свойств corner-shape и corner-*-shape .

Параметры автозаполнения для свойства «corner-shape».

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

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

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

До и после выделения проблемы DOM в дереве DOM с подсказкой и ссылкой на панель «Проблемы».

Панель «Элементы» в настоящее время выделяет недействительные потомки <select> , несоответствующие определения ARIA и недействительные атрибуты ARIA.

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

Маяк 12.5.0

Панель Lighthouse теперь работает под управлением Lighthouse 12.5.0.

В этой версии, в частности, legacy-javascript теперь использует Baseline вместо esmodules . Полный список изменений см. здесь.

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

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

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

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

  • Производительность > Аналитика > Дерево сетевых зависимостей : теперь показывает время для всех сетевых запросов в сетевом дереве ( 400708304 ).
    • Дерево сетевых зависимостей : теперь показывает время для всех сетевых запросов в сетевом дереве ( 400708304 ).
  • Анимации : исправлена ошибка, из-за которой на панели «Память» отображались отсоединенные элементы из-за захваченных анимаций 400635410 .
  • Регистратор : теперь при первом запуске записи используется тот же диалог подтверждения, что и при вставке кода.
  • Слои : теперь в строке состояния внизу отображается общее количество слоев и общий объем памяти для всех видимых слоев.
  • Память : Инициализация моментального снимка кучи была ускорена за счет распараллеливания задач между двумя исполнителями вместо использования одного ( 42203857 ).
  • Проблемы : Теперь сообщает об ошибках CORS доступа к локальной сети (LNA) ( 395895368 ).
  • Доступность :
    • Подсказки : теперь появляются при нажатии горячей клавиши, а не при фокусе ( 396311936 ).
    • Элементы > Стили : с функцией var() теперь можно взаимодействовать с помощью клавиатуры, то есть вы можете выбрать --custom-property и нажать Enter , чтобы перейти к ее целевой ссылке ( 401212692 ).

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

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

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

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

Что нового в DevTools

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