Опубликовано: 13 ноября 2024 г.
Представьте себе, что вы смотрите на график производительности и хотите выделить определенную область, например, самую длинную задачу или ненужный фрагмент работы. Возможно, вы хотели сделать заметки для дальнейшего использования или поделиться своими выводами с коллегой. Как лучше всего это сделать?
Конечно, это распечатывать трассу на огромном листе бумаги и вручную рисовать и писать свои заметки или использовать стороннее программное обеспечение для рисования заметок на скриншоте трассы! (Хотя до сих пор это был лучший способ.)
В рамках усилий нашей команды по оптимизации рабочих процессов разработчиков мы рады представить альтернативу этим опциям: возможность добавлять аннотации непосредственно к трассировке на панели «Производительность» !
Теперь вы можете комментировать трассировки на месте, легко перемещаться по этим аннотациям и даже сохранять их непосредственно в файле трассировки. Это делает обмен выделенной информацией таким же простым, как отправка файла, устраняя при этом необходимость во внешних инструментах или обходных путях. Аннотации могут не только помочь вам в отладке производительности, но и помочь быстро найти общий язык с вашим коллегой или улучшить его понимание того, что происходит, без лишних разговоров.
Существует три типа аннотаций:
Аннотированные временные диапазоны : маркировка любого временного диапазона на временной шкале.
Аннотированные записи : добавление метки к любой записи на временной шкале.
Соединения записей : соединение любых двух записей стрелкой, чтобы показать их связь.
Давайте рассмотрим каждый тип аннотаций и сценарии, в которых вы можете оказаться, когда они пригодятся.
Аннотированные временные диапазоны
Обычный рабочий процесс в DevTools — запись трассировки для отладки медленного взаимодействия. Поначалу представление трассировки может показаться сложным, но по мере того, как вы углубляетесь в конкретные обработчики событий и стеки вызовов, оно начинает обретать смысл. Чтобы упростить работу с представлением трассировки, вы можете создать аннотацию, обозначающую, как обычно расходуется блок времени. Так, например, может быть полезно аннотировать диапазон времени , в течение которого пользовательский интерфейс будет значимо обновляться после взаимодействия с пользователем.
Чтобы аннотировать диапазон времени : удерживайте клавишу Shift и перетащите от начала взаимодействия к обновлению пользовательского интерфейса. Затем введите метку, чтобы создать аннотацию. Если выбранный диапазон неверен, отмените его, щелкнув мышью перед вводом. Или, чтобы отредактировать метку аннотации, дважды щелкните ее. В настоящее время вы не можете настроить временной диапазон существующей аннотации. Если временной интервал неверен, удалите аннотацию и создайте новую.
С помощью этой аннотации вы получите более четкое представление обо всей работе, которую необходимо выполнить перед изменением, видимым для пользователя, и сможете соответствующим образом сосредоточить свою отладку.
Аннотированные записи
Чтобы сделать изменение видимым для пользователя, вы также можете пометить задачу, ответственную за переход, меткой записи .
Чтобы создать метку для записи : дважды щелкните выбранную запись и введите метку или щелкните запись правой кнопкой мыши и выберите «Ярлык записи» в контекстном меню. Чтобы отредактировать метку аннотации, дважды щелкните запись или метку. Альтернативно выберите опцию «Ввод метки» в контекстном меню.
С помощью этих аннотаций к входам легче определить работу, которая является (или не является) критической для взаимодействия, и сколько времени она занимает.
Входные соединения
Третий способ аннотировать трассировку — это нарисовать связь между взаимодействием и длинной задачей, ответственной за переход.
Чтобы создать связь между записями : дважды щелкните запись, которую вы хотите связать с другой, и щелкните стрелку, которая появляется справа от этой записи. Затем щелкните запись, к которой вы хотите ее подключить. Либо щелкните запись правой кнопкой мыши и выберите «Связать записи» в контекстном меню записи.
Таким образом, даже если само взаимодействие завершилось, вы можете использовать этот тип аннотации, чтобы более четко показать, как оно связано с последующими длинными задачами, которые в конечном итоге блокируют пользовательский интерфейс.
Удаление и скрытие аннотаций
Все аннотации можно быстро удалить из списка аннотаций на боковой панели. При наведении курсора на аннотацию отображается значок корзины. Щелкните этот значок, чтобы удалить аннотацию.
Альтернативно, чтобы удалить метки записей и аннотации к соединениям записей, связанные с определенным событием, щелкните событие правой кнопкой мыши и выберите «Удалить аннотации». Аннотации с метками также можно удалить, удалив метку и сохранив аннотации.
Если вы хотите скрыть аннотации, не удаляя их, чтобы они не мешали вам исследовать трассу, просто установите флажок «Скрыть аннотации», расположенный в нижней части боковой панели аннотаций. Эта настройка будет сохранена. Когда вы загружаете трассу с аннотациями, когда этот параметр включен, аннотации будут оставаться скрытыми, пока вы не снимите флажок.
Сохранение или загрузка аннотированных трасс
Отлично, вы добавили все эти аннотации, чтобы помочь себе и другим разобраться в следе. Что дальше?
Нет необходимости делать скриншоты трассировки, чтобы отправить их коллеге, как в старые времена, перед аннотациями. Просто сохраните файл с аннотациями и отправьте им этот файл. Вот и все — они могут загрузить файл на панель «Производительность» и просмотреть все аннотации, которые вы сделали в контексте трассировки, или, возможно, даже добавить больше аннотаций и отправить их вам обратно!
DevTools также сохранит другие настройки в представлении трассировки. Например, вы можете изолировать интересующую область, увеличив масштаб и установив навигационную цепочку, или скрыть записи в ненужных стеках вызовов, и все эти настройки будут сохранены в файле трассировки, что еще больше упрощает совместную работу по отладке производительности. Благодаря всем этим настройкам вы можете привлечь внимание к тому, что наиболее важно, обеспечивая при этом контекст всей интерактивной трассировки — в отличие от снимка экрана.
Чтобы сохранить аннотации и другие настройки, выберите параметр «Сохранить трассировку» под значком . Когда трассировка загружается, она будет содержать все эти настройки. Сохранение с аннотациями является опцией по умолчанию, но если вы хотите сохранить только необработанный файл трассировки, выберите параметр Сохранить трассировку без аннотаций .
Заключение
Может показаться, что это слишком много информации, но не волнуйтесь! Инструкции по созданию аннотаций всегда можно найти на вкладке аннотаций боковой панели панели «Производительность» . На этой вкладке представлены инструкции, когда аннотации отсутствуют, а также отображается список аннотаций после их создания.
Таким образом, аннотации на панели «Производительность» позволяют разработчикам точно определять важные моменты в трассировке, добавляя персонализированный контекст и аналитическую информацию. Это оптимизирует процесс анализа, упрощая обмен информацией и совместную работу по оптимизации производительности. Опробуйте аннотации на панели «Производительность» и сообщите нам свое мнение. Если у вас есть отзывы, мы будем рады прочитать ваши комментарии в публичном выпуске .
Попрощайтесь с необходимостью во внешних инструментах и здравствуйте, более эффективный рабочий процесс!