Опубликовано: 19 марта 2025 г.
Продолжая освещать инициативу по улучшению инструментов повышения производительности Chrome , мы рады объявить о новых обновлениях взаимодействия с панелью DevTools Performance. Эти улучшения призваны улучшить вашу способность ориентироваться в отслеживании производительности и уменьшить ненужный шум, чтобы вы могли сосредоточиться на быстром отслеживании и решении проблем с производительностью.
Улучшенная навигация
Мы слышали отзывы многих пользователей о том, что прокрутка и масштабирование панели «Производительность» могут быть неинтуитивными. Хотя многие давние пользователи к этому привыкли, многие ожидают, что жест прокрутки будет прокручивать, а не увеличивать и уменьшать масштаб трассировки.
Новая опция в позволяет переключаться между существующей «Классической» прокруткой и новым «Современным» подходом.
В классическом режиме прокрутка (с помощью трекпада или колеса прокрутки) продолжает увеличивать и уменьшать масштаб, а при удерживании клавиши Shift и прокрутки можно прокручивать диаграмму вверх и вниз.
В новом современном режиме все поменялось местами: прокрутка теперь прокручивает диаграмму пламени, а сдвиг и прокрутка увеличивают и уменьшают масштаб.
Сочетания клавиш (например, использование WASD для навигации по трассировке) продолжат работать без изменений.
Двунаправленный обзор
В верхней части панели «Производительность» находится диаграмма ЦП , являющаяся частью обзора временной шкалы. Он отображает оценки использования ЦП во время записи трассировки с разбивкой по типам работы (например, оранжевый цвет — для выполнения сценария, фиолетовый — для операций рендеринга).
Это дает обзор — иногда называемый мини-картой — трассировки, предоставляя высокоуровневую сводку всей временной шкалы, даже если вы увеличиваете масштаб для изучения конкретных проблем.
Однако можно легко потерять свое точное место на мини-карте, когда вы в первую очередь смотрите на трассу, и наоборот, поэтому мы ввели новые функции, которые помогают связать обзор с увеличенным видом. Теперь, когда вы наводите курсор на обзор, на флейм-диаграмме появляется соответствующая вертикальная линия, отмечающая тот же момент времени на флейм-диаграмме:
Аналогично, при наведении курсора на записи на диаграмме пламени теперь будет выделена соответствующая часть диаграммы ЦП . Это отлично подходит для того, чтобы увидеть, какие именно задачи вызывают скачки производительности процессора.
Фильтрация трассировки
Отладка проблем с производительностью обычно предполагает анализ большого количества данных. Чтобы помочь вам сосредоточиться на самой важной информации, мы улучшили возможность фильтрации шума.
В прошлом году мы представили возможность добавлять сценарии на панели «Производительность» в список игнорирования DevTools , отфильтровывая менее релевантные записи в Flamechart. Например, если вы отлаживаете производительность компонента на своей странице, это может отвлекать, если стек вызовов вашей платформы достаточно глубок, чтобы вам приходилось прокручивать вверх и вниз панель производительности, и вам часто нужно свернуть большую часть этого стека вызовов, чтобы сосредоточиться на важных частях.
Вы можете щелкнуть правой кнопкой мыши запись в Flamechart и выбрать «Добавить сценарий в список игнорирования» , что добавит сценарий в список игнорирования DevTools и свернет все записи из него в Flamechart.
Но теперь вы также можете вручную редактировать список игнорирования прямо из в верхней части панели «Производительность» . Регулярные выражения списка игнорирования являются общими для всех DevTools — поэтому соответствующие сценарии можно пропускать при отладке на панели «Источники» и сворачивать в отдельные записи на диаграмме пламени — и этот список сохраняется во всех сеансах DevTools.
Таким образом, вы получаете детальный контроль над тем, какие файлы игнорировать, а также удобное место для включения и отключения правил во время работы.
Тусклые сторонние скрипты
Сторонние сценарии часто встречаются на веб-сайтах, но они часто могут быть вне нашего контроля или нерелевантны для конкретного сеанса отладки. Новая опция Dim сторонние в верхней части панели «Производительность» делает сторонние сценарии и сетевую активность серым цветом на временной шкале, уменьшая визуальный беспорядок и позволяя вам сосредоточиться на вкладе сторонних разработчиков в производительность.
Но иногда вам нужен еще больший контроль, например, концентрация на конкретной третьей стороне или даже только на вкладе вашего собственного API или CDN. В нижней части панели на вкладке «Сводка» приведена разбивка по первым и третьим лицам, которых DevTools может найти на странице. При наведении курсора на каждый объект в списке будут выделены серым все действия, не относящиеся к этому объекту.
Заключение
Эти новые функции должны помочь вам лучше ориентироваться на панели «Производительность» и фильтровать шум, чтобы сконцентрироваться на тех частях трассы, которые важны для вас. Опробуйте эти функции и дайте нам знать, как их можно улучшить или какие еще улучшения вы хотели бы видеть.