Что нового в DevTools (Chrome 78)

Кейси Баск
Kayce Basques
X GitHub

Поддержка нескольких клиентов в панели аудита.

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

Например, предположим, что в отчете панели аудита указано, что показатель производительности вашей страницы равен 70, и одна из главных возможностей повышения производительности — это устранение ресурсов, блокирующих отрисовку .

Начальный балл за производительность составляет 70.

Рисунок 1. Начальный балл производительности .

В первоначальном отчете говорится, что проблема заключается в трех скриптах, блокирующих рендеринг.

Рисунок 2. В первоначальном отчете говорится, что проблема заключается в трех скриптах, блокирующих рендеринг.

Теперь, когда панель аудита может использоваться в сочетании с блокировкой запросов, вы можете быстро измерить, насколько скрипты, блокирующие отрисовку, влияют на производительность загрузки, предварительно заблокировав запросы к этим скриптам :

Используйте вкладку «Блокировка запросов», чтобы заблокировать проблемные скрипты.

Рисунок 3. Использование вкладки «Блокировка запросов» для блокировки проблемных скриптов.

А затем снова провести аудит страницы:

После включения блокировки запросов показатель производительности улучшился до 97.

Рисунок 4. Показатель производительности улучшился до 97 после блокировки проблемных скриптов.

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

Выпуск Chromium № 991906

Отладка обработчика платежей

В разделе «Фоновые службы» панели приложений теперь поддерживаются события обработчика платежей .

  1. Перейдите в панель «Приложения» .
  2. Откройте панель «Обработчик платежей» .

  3. Нажмите «Запись» . DevTools записывает события обработчика платежей в течение 3 дней, даже когда DevTools закрыт.

    Запись событий обработчика платежей.

    Рисунок 5. Запись событий обработчика платежей.

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

  5. После запуска события обработчика платежей щелкните строку с этим событием, чтобы узнать о нем подробнее.

    Просмотр события обработчика платежей.

    Рисунок 6. Просмотр события обработчика платежей.

Проблема Chromium № 980291

Lighthouse 5.2 в панели «Аудиты»

В панели «Аудит» теперь используется Lighthouse 5.2 . Новый диагностический аудит использования сторонних ресурсов показывает, какой объем стороннего кода был запрошен и как долго этот код блокировал основной поток во время загрузки страницы. Подробнее о том, как сторонний код может снижать производительность загрузки, см. в разделе «Оптимизация сторонних ресурсов» .

Скриншот отчета «Использование сторонних сервисов» в пользовательском интерфейсе отчетов Lighthouse.

Рисунок 7. Аудит использования сторонними сервисами .

Выпуск Chromium № 772558

Самый большой и информативный элемент оформления в панели «Производительность».

При анализе производительности загрузки на панели «Производительность» в разделе «Время выполнения» теперь отображается маркер для параметра «Наибольшая отрисовка контента » (LCP). LCP показывает время отрисовки самого большого элемента контента, видимого в области просмотра.

Маркер LCP в разделе «Время».

Рисунок 8. Маркер LCP в разделе «Время» .

Чтобы выделить узел DOM, связанный с LCP:

  1. Нажмите на маркер LCP в разделе «Время» .

  2. Наведите курсор на связанный узел на вкладке «Сводка» , чтобы выделить узел в области просмотра.

    Раздел «Связанные узлы» на вкладке «Сводка».

    Рисунок 9. Раздел «Связанные узлы» на вкладке «Сводка» .

  3. Щелкните по связанному узлу , чтобы выбрать его в дереве DOM .

Сообщайте о проблемах в инструментах разработчика из главного меню.

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

Справка > Сообщить о проблеме в инструментах разработчика." width="800" height="604">

Рисунок 10. Главное меню > Справка > Сообщить о проблеме в инструментах разработчика .

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

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

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

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

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

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