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

Кейси Баски

Добро пожаловать! Новые функции DevTools в Chrome 64 включают в себя:

Прочтите или посмотрите видеоверсию примечаний к выпуску ниже.

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

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

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

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

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

Чтобы использовать монитор производительности :

  1. Откройте командное меню .

  2. Начните вводить Performance , затем выберите « Show Performance Monitor .

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

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

Связанные функции:

  • Панель производительности . Пройдите критический путь пользователя и запишите все, что происходит на странице, включая активность 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.

Что нового в DevTools

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