Data publikacji: 13 listopada 2024 r.
Wyobraź sobie, że przeglądasz ślad wydajności i chcesz wyróżnić określony obszar, np. najdłuższe zadanie lub niepotrzebny fragment pracy. Możesz chcieć zapisać notatki, aby móc do nich wrócić w przyszłości, lub udostępnić swoje odkrycia współpracownikowi. Jak to najlepiej zrobić?
Oczywiście polega to na wydrukowaniu odbitki na dużym kawałku papieru i ręcznym rysowaniu oraz zapisywaniu notatek lub użyciu oprogramowania innej firmy do rysowania notatek na zrzucie ekranu odbitki. (Chociaż do tej pory była to najlepsza metoda).
W ramach naszych działań na rzecz upraszczania procesów pracy deweloperów wprowadzamy alternatywę dla tych opcji: możliwość dodawania adnotacji bezpośrednio do ścieżki w panelu Wydajność.
Teraz możesz dodawać adnotacje do śladów na miejscu, łatwo się po nich poruszać, a nawet zapisywać je bezpośrednio w pliku śladu. Dzięki temu udostępnianie wyróżnionych statystyk jest tak proste jak wysyłanie pliku, a nie wymaga korzystania z zewnętrznych narzędzi ani obejść. Adnotacje mogą nie tylko pomóc w debugowaniu wydajności, ale też szybko doprowadzić do porozumienia się z kolegą lub pomóc mu w lepszym zrozumieniu, co się dzieje.
Istnieją 3 rodzaje adnotacji:
Zaznaczone zakresy czasu: oznaczenie dowolnego zakresu czasu na osi czasu.
Wpis z adnotacją: dodanie etykiety do dowolnego wpisu na osi czasu.
Połączenia wpisów: łączy dowolne 2 wpisy za pomocą strzałki, aby pokazać ich związek.
Przyjrzyjmy się poszczególnym typom adnotacji i sytuacjom, w których mogą się one przydać.
Zakresy czasu z adnotacjami
Typowym sposobem korzystania z DevTools jest rejestrowanie ścieżki w celu debugowania powolnego działania. Widok śledzenia może na początku wydawać się przytłaczający, ale gdy zaczniesz zgłębiać konkretne moduły obsługi zdarzeń i zbiory wywołań, zacznie nabierać sensu. Aby ułatwić sobie pracę z widokiem śledzenia, możesz np. utworzyć adnotację, która będzie wskazywać, jak ogólnie był wykorzystywany dany blok czasu. Może się na przykład przydać dodanie adnotacji do zakresu czasowego w interfejsie, aby można było go odpowiednio zaktualizować po interakcji z użytkownikiem.
Aby dodać adnotację do zakresu czasowego: przytrzymaj Shift i przeciągnij od początku interakcji do momentu zmiany w interfejsie. Następnie wpisz etykietę, aby utworzyć adnotację. Jeśli wybrany zakres jest nieprawidłowy, anuluj go, klikając gdzie indziej przed wpisaniem. Aby edytować etykietę adnotacji, kliknij ją dwukrotnie. Obecnie nie można dostosować zakresu czasowego istniejącej adnotacji. Jeśli zakres czasowy jest nieprawidłowy, usuń adnotację i utwórz nową.
Dzięki tej adnotacji możesz dokładniej przyjrzeć się wszystkim czynnościom, które muszą zostać wykonane przed wprowadzeniem zmiany widocznej dla użytkownika, i w odpowiednim kierunku skoncentrować debugowanie.
Wpisy z adnotacjami
Aby użytkownikom łatwiej było zauważyć zmiany, możesz też dodać do zadania odpowiadającego za przejście etykietę wpisu.
Aby utworzyć etykietę dla wpisu: kliknij dwukrotnie wybrany wpis i wpisz etykietę lub kliknij prawym przyciskiem myszy wpis i wybierz „Etykieta wpisu” z menu kontekstowego. Aby edytować etykietę adnotacji, kliknij ją dwukrotnie. Możesz też wybrać opcję „Etykieta wpisu” z menu kontekstowego.
Dzięki tym adnotacjach wejścia łatwiej jest dostrzec, które działania są kluczowe dla interakcji, a które nie, oraz ile czasu zajmują.
Połączenia wpisu
Trzecią metodą, za pomocą której możemy dodać adnotacje do ścieżki, jest połączenie interakcji z długim zadaniem odpowiedzialnym za przejście.
Aby utworzyć połączenie między wpisami: kliknij dwukrotnie wpis, który chcesz połączyć z innym, a potem kliknij strzałkę po prawej stronie tego wpisu. Następnie kliknij wpis, z którym chcesz go połączyć. Możesz też kliknąć wpis prawym przyciskiem myszy i w menu kontekstowym wybrać „Połącz wpisy”.
Nawet jeśli sama interakcja się zakończyła, możesz użyć tego typu adnotacji, aby wyraźniej pokazać, jak jest ona powiązana z kolejnoscią długich zadań, które ostatecznie blokują interfejs użytkownika.
Usuwanie i ukrywanie adnotacji
Wszystkie adnotacje można szybko usunąć z widoku listy adnotacji na pasku bocznym. Najedź kursorem na adnotację, aby wyświetlić ikonę kosza . Kliknij tę ikonę, aby usunąć adnotację.
Aby usunąć etykiety wpisów i adnotacje połączeń wpisów powiązane z określonym zdarzeniem, kliknij je prawym przyciskiem myszy i wybierz „Usuń adnotacje”. Adnotacje z etykietami można też usunąć, usuwając etykietę i zapisując adnotacje.
Jeśli chcesz ukryć adnotacje bez ich usuwania, aby nie przeszkadzały Ci w przeglądaniu ścieżki, zaznacz pole wyboru „Ukryj adnotacje” na dole paska bocznego adnotacji. Te ustawienia zostaną zapisane. Gdy wczytasz ślad z adnotacjami, gdy to ustawienie jest włączone, adnotacje pozostaną ukryte, dopóki nie odznaczysz pola wyboru.
Zapisywanie i wczytywanie śladów z adnotacjami
Świetnie, że dodałeś/dodałaś te adnotacje, aby ułatwić sobie i innym zrozumienie ścieżki. Co dalej?
Nie musisz robić zrzutów ekranu z wykreśleniem, aby wysłać je do współpracownika, jak to miało miejsce w dawnych czasach, przed wprowadzeniem adnotacji. Wystarczy zapisać plik z adnotacjami i wysłać go do nich. To wszystko. Użytkownik może przesłać plik do panelu Skuteczność i zobaczyć wszystkie adnotacje, które dodałeś/dodałaś w kontekście śledzenia, a nawet dodać więcej adnotacji i odesłać je do Ciebie.
W widoku śledzenia DevTools zapisze też inne rodzaje personalizacji. Możesz na przykład wyodrębnić obszar, który Cię interesuje, przybliżając go i ustawiając ścieżkę nawigacyjną, lub ukryć wpisy w nieistotnych stosach wywołań. Wszystkie te ustawienia będą zachowane w pliku śladu, co ułatwi współpracę nad debugowaniem wydajności. Dzięki tym wszystkim opcjom możesz zwrócić uwagę na to, co jest najważniejsze, jednocześnie przedstawiając kontekst całej interaktywnej ścieżki – w przeciwieństwie do zrzutu ekranu.
Aby zachować adnotacje i inne ustawienia, kliknij opcję Zapisz ślad pod ikoną pobierania . Po załadowaniu ślad będzie zawierać wszystkie te opcje. Domyślną opcją jest zapisywanie z adnotacjami, ale jeśli chcesz zapisać tylko surowy plik śladu, wybierz opcję Zapisz ślad bez adnotacji.
Podsumowanie
Może się wydawać, że to dużo informacji, ale nie martw się. Instrukcje tworzenia adnotacji znajdziesz na karcie adnotacji na pasku bocznym panelu Skuteczność. Na tej karcie znajdziesz instrukcje, gdy nie ma żadnych adnotacji, oraz widok listy adnotacji po ich utworzeniu.
Dzięki temu adnotacje w panelu Skuteczność umożliwiają deweloperom wskazywanie kluczowych momentów w śladzie, dodając spersonalizowany kontekst i statystyki. Dzięki temu uprościsz proces analizy i ułatwisz sobie udostępnianie danych oraz współpracę nad optymalizacją skuteczności. Wypróbuj adnotacje w panelu Skuteczność i daj nam znać, co o nich myślisz. Jeśli masz jakieś uwagi, chętnie przeczytamy je w publicznym wątku.
Zapomnij o potrzebie korzystania z narzędzi zewnętrznych i przywitaj się z bardziej wydajnym sposobem pracy.