Что нового в 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-дереве с всплывающей подсказкой и ссылкой на панель «Проблемы».

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

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

Маяк 12.5.0

В панели управления Lighthouse теперь используется Lighthouse 12.5.0.

Наиболее заметное изменение в этой версии заключается в том, что legacy-javascript теперь использует Baseline вместо esmodules . См. полный список изменений .

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

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

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

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

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

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

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

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

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

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

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