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

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

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

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

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

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

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

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

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

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

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

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

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

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

Связанные особенности:

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

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

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

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

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

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

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

Связанные особенности:

  • Фильтрация текстового поля. Введите текст, и в консоли будут отображаться только сообщения, содержащие этот текст. Также поддерживаются шаблоны регулярных выражений, отрицательные фильтры и URL-фильтры .

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

Консоль теперь по умолчанию группирует похожие сообщения. Например, на рисунке 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» .