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