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

Проблема с хромом: 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» .