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

Кейси Баск
Kayce Basques

Снова здравствуйте! В Chrome 64 появятся новые функции в инструментах разработчика, в том числе:

Читайте дальше или посмотрите видеоверсию этих примечаний к выпуску ниже.

Монитор производительности

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

  • Использование ЦП.
  • Размер кучи JavaScript.
  • Общее количество узлов DOM, обработчиков событий JavaScript, документов и фреймов на странице.
  • Количество перерасчетов макетов и стилей в секунду.

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

Почему важна скорость загрузки : компания BookMyShow добилась 80% увеличения конверсии, создав прогрессивное веб-приложение, ориентированное на скорость. Узнайте больше .

Для использования монитора производительности :

  1. Откройте меню команд .
  2. Начните вводить Performance , затем выберите Show Performance Monitor .

    Монитор производительности Рисунок 1. Монитор производительности

  3. Щелкните по показателю, чтобы отобразить или скрыть его. На рисунке 1 показаны диаграммы использования ЦП , размера кучи JavaScript и количества обработчиков событий JavaScript .

Дополнительные функции:

  • Панель производительности . Проследите за ключевым этапом пользовательского пути и запишите все, что происходит на странице, включая активность JavaScript, сетевые запросы, использование ЦП и многое другое. Также может использоваться для анализа производительности при загрузке. Узнайте больше .
  • Панель аудита . Запустите набор автоматизированных тестов нагрузочной и оперативной производительности для любого URL-адреса. Подробнее .

Если вы только начинаете анализировать производительность, рекомендуется сначала использовать панель «Аудит» , а затем провести дальнейшее исследование с помощью панели «Производительность » или монитора производительности .

Боковая панель консоли

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

Использование боковой панели консоли для отображения только сообщений об ошибках.

Рисунок 2. Использование боковой панели консоли для отображения только сообщений об ошибках.

Боковая панель консоли по умолчанию скрыта. Нажмите « Показать боковую панель консоли». Показать боковую панель консоли чтобы показать это.

Дополнительные функции:

Сгруппировать похожие сообщения в консоли

Теперь консоль по умолчанию группирует похожие сообщения. Например, на рисунке 3 представлено 27 экземпляров сообщения [Violation] Avoid using document.write() .

Пример того, как консоль группирует похожие сообщения.

Рисунок 3. Пример группировки похожих сообщений в консоли.

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

Пример расширенной группы сообщений консоли.

Рисунок 4. Пример расширенной группы сообщений консоли.

Снимите флажок «Группировать похожие» , чтобы отключить эту функцию.

Дополнительные функции:

  • Вы можете группировать собственные сообщения в консоли с помощью console.group() .

Локальные переопределения

Ой! Изначально мы планировали запустить эту функцию в Chrome 64, но перенесли её выпуск ближе к крайнему сроку, чтобы устранить некоторые недоработки. По-видимому, интерфейс «Что нового» не обновился вовремя. Приносим свои извинения!

Эта функция уже доступна в Chrome 65, который появится примерно через 6 недель после Chrome 64. Подробнее можно узнать в разделе «Локальные переопределения» . Если вы используете Windows или Mac, вы можете попробовать Chrome 65 прямо сейчас, загрузив Chrome Canary .

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

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

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

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

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

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