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

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

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

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

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

Первоначальный балл эффективности — 70.

Рисунок 1. Первоначальная оценка эффективности .

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

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

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

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

Рисунок 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 , чтобы создать проблему в системе отслеживания команды разработчиков DevTools. Предоставление минимального, воспроизводимого примера значительно повышает возможности команды по исправлению вашей ошибки или реализации вашего запроса на новую функцию!

Помощь > Сообщить о проблеме с DevTools." width="800" height="604">

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

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

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

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

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

Что нового в DevTools

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