Это звучит знакомо? Вы устраняете проблему с производительностью в Chrome DevTools, но из-за огромного количества информации на панели «Производительность» сложно сосредоточиться только на наиболее важных и действенных частях. Ориентироваться между длиной временной шкалы, глубиной диаграммы пламени и широтой множества различных дорожек данных может быть непросто. Какой бы невероятно мощной ни была панель «Производительность», ее полезность не должна достигаться за счет удобства использования!
В рамках нашей инициативы по улучшению инструментов производительности Chrome мы недавно запустили три новые функции, направленные на снижение плотности информации и помощь разработчикам в настройке своих рабочих процессов:
- Скрыть ненужные части временной шкалы
- Скройте ненужные части диаграммы пламени
- Скрыть ненужные треки
В этом посте мы подробнее рассмотрим каждую из этих функций и покажем, как их можно использовать, чтобы сосредоточиться только на самой важной информации.
Скрыть ненужные части временной шкалы
Веб-производительность измеряется миллисекундами, поэтому даже если запись вашего выступления длится всего несколько секунд, существует множество возможностей потерять свое место.
В Chrome 122 мы добавили возможность создания хлебных крошек . Эта функция позволяет вам ограничить границы временной шкалы, чтобы вы могли масштабировать или панорамировать только внутри заданной вами интересующей области. Такое ограничение временной шкалы может быть особенно полезно, например, если вы пытаетесь отладить проблемы с реагированием , чтобы вы могли сосредоточить свое внимание на одном взаимодействии или проблемной длительной задаче.
На предыдущем снимке экрана показан крупный план временной шкалы, на котором визуализируются действия основного потока, такие как выполнение сценария и работа с презентацией. При наведении на него указателя появляется новая кнопка, которая установит границы временной шкалы для текущего окна. Кнопка помечена шириной временного окна в миллисекундах и значком . Хлебные крошки расположены над обзором временной шкалы, и каждая из них помечена размером своего временного окна.
Чтобы использовать эту функцию:
- Масштабируйте и перемещайте временную шкалу до интересующей вас области.
- Нажмите значок увеличительного стекла в обзоре временной шкалы, чтобы зафиксировать временную шкалу и установить навигационную цепочку.
- Повторите при необходимости, чтобы увеличить вложенную область интереса.
- Нажмите «хлебные крошки», чтобы вернуться к предыдущим интересующим областям или ко всему диапазону временной шкалы.
Обрезка временной шкалы помогает гарантировать, что вы никогда случайно не прокрутите ее за границы и не попадете в ненужную часть временной шкалы. Однако, когда вам нужно, вы можете нажать на хлебные крошки, чтобы уменьшить масштаб. Еще одним преимуществом является то, что обзор временной шкалы будет соответствовать следующим трекам. Это может значительно облегчить выявление возможностей повышения производительности, таких как принудительное перекомпоновывание, и определение их основной причины на диаграмме пламени.
Скройте ненужные части диаграммы пламени
Анализ активности основного потока — непростая задача. Эта часть панели «Производительность» известна как «пламенная диаграмма» из-за того, насколько длинными и запутанными могут стать стеки вызовов. В некоторых крайних случаях эти стеки могут быть настолько громоздкими, что трудно во всем разобраться и сосредоточиться на том, что вы пытаетесь оптимизировать.
Начиная с Chrome 124, вы можете точно настроить, какие записи в диаграмме пламени следует скрывать , чтобы сосредоточиться на наиболее полезной информации.
При щелчке правой кнопкой мыши по функции в флейм-диаграмме появляется контекстное меню с несколькими вариантами скрытия записей:
- Скрыть функцию : удалить выбранную функцию из таблицы пламени. Его дочерние элементы переместится вверх и появятся сразу после родительской функции.
- Скрыть дочерние элементы : обрезать диаграмму пламени выбранной функции, скрывая всех ее дочерних элементов.
- Скрыть повторяющиеся дочерние элементы : удалить все экземпляры выбранной функции из остальной части диаграммы пламени.
Есть также несколько полезных сочетаний клавиш, которые можно использовать при выборе функции:
- H : скрыть выбранную функцию
- C : скрыть дочерние элементы выбранной функции
- R : скрыть экземпляры выбранной функции позже в стеке.
- U : показать скрытые дочерние элементы выбранной функции.
Постоянно скрывать ненужные скрипты
Опция Добавить сценарий в список игнорирования скрывает выбранную функцию из диаграммы пламени, а также все другие функции , определенные в том же файле сценария. Сценарий также добавляется в список игнорирования , который отладчик DevTools использует для обхода функций и игнорирования исключений, исходящих из сценария.
Скрипты, добавленные в список игнорирования, сохраняются, поэтому они будут по-прежнему скрыты от диаграммы пламени в новых трассировках. Скрипты, находящиеся вне вашего контроля, могут быть хорошими кандидатами для списка игнорирования. С другой стороны, скрытие отдельных функций носит временный характер для текущей трассировки и в большей степени зависит от ситуации. Например, вы можете захотеть скрыть громоздкий стек рекурсивных вызовов функций, чтобы упростить работу с трассировкой.
Чтобы отменить список игнорирования или любые другие скрытые функции в диаграмме пламени, вы можете использовать контекстное меню для сброса дочерних элементов выбранной функции или сброса всех скрытых функций по всей трассировке. Функции со скрытыми дочерними элементами помечаются значком ▼, который также сбрасывает дочерние элементы при нажатии.
Любая ненужная глубина и сложность, которые вы сможете убрать из диаграммы пламени, сделают ее гораздо более удобной для использования. При необходимости возможность настраивать отображаемые записи является эргономическим улучшением, помогающим сосредоточить внимание на наиболее важной информации для текущей задачи.
Скрыть ненужные треки
Активность основного потока составляет всего одну дорожку на панели «Производительность». Дорожки на панели «Производительность» визуализируют активность процесса, и все они привязаны к общей временной шкале, что облегчает отладку. Помимо основной дорожки, существуют отдельные дорожки для других подкадров, потоков и рабочих процессов, используемых страницей, а также дорожки «Сеть» , «Кадры» , «Анимации» и «Взаимодействия» . Еще больше треков отмечает активность процессов Chrome более низкого уровня, таких как ввод-вывод, графический процессор и композитор. Это много информации! И тем не менее, для большинства рабочих процессов исполнения вас будет интересовать информация только из нескольких треков одновременно.
Начиная с Chrome 125, появился новый режим конфигурации, который позволяет скрывать ненужные треки или переставлять их по своему вкусу. Например, если вы оптимизируете медленное взаимодействие, вы можете скрыть все, кроме дорожек Interactions , Main и GPU .
Чтобы редактировать треки, щелкните правой кнопкой мыши по названию любого трека и выберите «Настроить треки…» . Откроется режим конфигурации, в котором вы сможете отображать, скрывать или переставлять отдельные треки. Нажмите кнопку «Завершить настройку треков», чтобы сохранить настройки.
Настройка дорожек позволяет вам контролировать способ представления важной информации для вашего рабочего процесса на панели «Производительность». Вы можете использовать эти настройки, чтобы скрыть активность от несвязанных процессов и перемещать дорожки таким образом, чтобы обеспечить максимально простой доступ к нужным вам данным.
Подведение итогов
Эти три функции предоставляют вам новые мощные эргономичные элементы управления для индивидуальной настройки рабочих процессов. Используя эти функции и уменьшая количество шума, вы сможете гораздо лучше найти то, что ищете, и разобраться в данных.
Мы хотели бы услышать, что работает хорошо или как можно улучшить ваш опыт. Если у вас есть какие-либо вопросы или отзывы, сообщите нам об этом, обратившись к @ChromeDevTools . Если что-то не работает или у вас есть предложения по новым функциям, оставьте комментарий по этому открытому вопросу .
Это только начало нашей инициативы по улучшению инструментов производительности Chrome, и мы рады поделиться всем, что мы приготовили, чтобы сделать панель «Производительность» проще в использовании и сделать ее более мощной, чем когда-либо. Мы опубликуем нашу следующую публикацию, демонстрирующую следующий набор функций, прямо здесь, в блоге Chrome для разработчиков. А пока посетите страницу «Что нового в Chrome», чтобы быть в курсе всех новинок в DevTools и Chrome.