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

Кейси Баски

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

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

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

Начальная оценка производительности — 70.

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

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

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

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

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

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

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

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

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

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

Проблема с хромом № 991906.

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

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

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

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

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

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

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

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

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

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

Проблема с хромом № 980291.

Маяк 5.2 на панели «Аудит»

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

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

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

Проблема с хромом №772558.

Самая большая содержательная отрисовка на панели «Производительность»

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

Маркер LCP в разделе «Тайминги».

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

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

  1. Щелкните маркер LCP в разделе «Тайминги» .

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

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

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

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

Проблемы с файлами DevTools из главного меню

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

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

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

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

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

Связь с командой Chrome DevTools

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

Что нового в DevTools

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