Czy to brzmi znajomo? Debugujesz problem ze skutecznością w Narzędziach deweloperskich Chrome, ale przytłaczający natłok informacji w panelu Wydajność utrudnia Ci skupienie się na najważniejszych i najbardziej przydatnych informacjach. Ze względu na długość osi czasu, głębię wykresu słupkowego i wiele różnych ścieżek danych poruszanie się po tym widoku może być trudne. Chociaż panel Wydajność jest bardzo potężnym narzędziem, jego przydatność nie powinna wiązać się z utratą użyteczności.
W ramach naszej inicjatywy mającej na celu ulepszanie narzędzi do optymalizacji wydajności Chrome wprowadziliśmy niedawno 3 nowe funkcje, które mają na celu zmniejszenie gęstości informacji i pomóc deweloperom w dostosowywaniu ich przepływów pracy:
- Ukrywanie nieistotnych części osi czasu
- Ukrywanie nieistotnych części wykresu płomieniowego
- Ukrywanie nieistotnych ścieżek
W tym poście przyjrzymy się bliżej każdej z tych funkcji i pokażemy, jak możesz ich używać, aby skupić się tylko na najważniejszych informacjach.
Ukrywanie nieistotnych części osi czasu
Wydajność witryny jest mierzona w milisekundach, więc nawet jeśli nagranie z występem trwa tylko kilka sekund, możesz stracić pozycję.
W Chrome 122 dodaliśmy możliwość tworzenia ścieżek nawigacyjnych. Ta funkcja pozwala ograniczyć granice osi czasu, tak aby można było powiększać lub przesuwać tylko w obrębie ustawionego obszaru zainteresowania. Ograniczenie osi czasu w taki sposób może być szczególnie przydatne, jeśli chcesz na przykład rozwiązać problemy z szybkością działania, ponieważ możesz wtedy skupić się na pojedynczej interakcji lub długim zadaniu, które powoduje problemy.
Poprzedni zrzut ekranu pokazuje zbliżenie widoku osi czasu, który wizualizuje aktywność głównego wątku, np. wykonywanie skryptu i działanie prezentacji. Gdy najedziesz na niego kursorem, pojawi się nowy przycisk, który ustawi granice osi czasu na bieżące okno. Przycisk jest oznaczony szerokością okna czasowego w milisekundach i ikoną . Ścieżka jest widoczna nad podglądem osi czasu, a każda jej część jest oznaczona wielkością okna czasowego.
Aby skorzystać z tej funkcji:
- Powiększ i przesuń oś czasu, aby wyświetlić interesujący Cię obszar.
- Kliknij ikonę lupy na osi czasu, aby zablokować oś czasu i ustawić ścieżkę.
- Powtarzaj w razie potrzeby, aby powiększać zagłębiony obszar zainteresowania.
- Kliknij ścieżkę, aby wrócić do poprzednich obszarów zainteresowania lub do pełnego zakresu osi czasu.
Przycinanie osi czasu pozwala uniknąć przypadkowego przewinięcia do nieodpowiedniej części osi czasu. W razie potrzeby możesz kliknąć ścieżkę informacji, aby ją zwinąć. Kolejną zaletą jest to, że przegląd osi czasu będzie dopasowany do ścieżek. Dzięki temu łatwiej zauważysz możliwości poprawy skuteczności, np. wymuszone ponowne przepływy danych, i zidentyfikujesz ich główną przyczynę na diagramie płomienistym.
Ukrywanie nieistotnych części wykresu płomieniowego
Analiza aktywności głównego wątku to nie lada wyzwanie. Ta część panelu Skuteczność nosi nazwę wykresu słupkowego w kształcie płomienia, ponieważ ścieżki wywołań mogą być bardzo długie i wąskie. W niektórych skrajnych przypadkach te grupy mogą być tak niewygodne w użyciu, że trudno jest zrozumieć, co się dzieje, i skupić się na optymalizacji.
Począwszy od wersji 124 Chrome możesz wybrać, które pozycje na wykresie słupkowym mają być ukryte, aby skupić się na najbardziej przydatnych informacjach.
Gdy klikniesz prawym przyciskiem myszy funkcję na diagramie płomienistym, pojawi się menu z kilkoma opcjami ukrywania wpisów:
- Ukryj funkcję: pozwala usunąć wybraną funkcję z wykresu płomienia. Jego podrzędne elementy przesuną się w górę, aby pojawiły się bezpośrednio po jego nadrzędnej funkcji.
- Ukryj elementy podrzędne: pozwala przyciąć diagram płomienia w wybranej funkcji, ukrywając wszystkie jej elementy podrzędne.
- Ukryj powtarzające się elementy podrzędne: z reszty wykresu słupkowego usuwa wszystkie wystąpienia wybranej funkcji.
Dostępnych jest też kilka przydatnych skrótów klawiszowych, których możesz używać po wybraniu funkcji:
- H: ukryj wybraną funkcję
- C: ukryj podrzędne wybranej funkcji.
- R: ukryj instancje wybranej funkcji znajdujące się dalej w stosie.
- U: wyświetla ukryte podelementy wybranej funkcji.
Trwałe ukrywanie nieistotnych skryptów
Opcja Dodaj skrypt do listy ignorowanych fragmentów kodu ukrywa wybraną funkcję na wykresie płomienistym, a także wszystkie inne funkcje zdefiniowane w tym samym pliku skryptu. Skrypt jest też dodawany do listy ignorowanych, której debuger DevTools używa do pomijania funkcji i ignorowania wyjątków pochodzących ze skryptu.
Skrypty dodane do listy ignorowanych są przechowywane, więc nadal będą ukryte na wykresie płomienia w nowych śladach. Skrypty spoza Twojej kontroli mogą być dobrymi kandydatami na listę ignorowanych fragmentów kodu. Z drugiej strony ukrywanie poszczególnych funkcji jest tymczasowe w ramach bieżącego śledzenia i bardziej zależy od sytuacji. Możesz na przykład ukryć skomplikowany stos wywołań rekurencyjnych funkcji, aby ułatwić sobie pracę z wykreślaniem.
Aby przywrócić listę ignorowanych lub inne ukryte funkcje na diagramie płomienia, możesz użyć menu kontekstowego, aby zresetować elementy podrzędne wybranej funkcji lub zresetować wszystkie ukryte funkcje w całym prześwietleniu. Funkcje z ukrytymi elementami podrzędnymi są oznaczone ikoną ▼, która po kliknięciu powoduje też zresetowanie tych elementów.
Im mniej zbędnych szczegółów i skomplikowania zawiera wykres słupkowy, tym lepiej. W razie potrzeby możliwość dostosowania widocznych wpisów to ulepszenie pod względem ergonomii, które pomoże Ci skupić uwagę na najważniejszych informacjach związanych z bieżącym zadaniem.
Ukrywanie nieistotnych ścieżek
Aktywność wątku głównego stanowi tylko 1 ścieżkę w panelu Wydajność. Ścieżki w panelu Wydajność obrazują aktywność procesu i są dopasowywane do wspólnej osi czasu, co ułatwia debugowanie. Oprócz ścieżki Główna dostępne są ścieżki poszczególnych podramek, wątków i elementów wykonujących zadania używane przez stronę, a także ścieżki Sieć, Ramki, Animacje i Interakcje. Jeszcze więcej ścieżek oznacza aktywność procesów Chrome niskiego poziomu, takich jak IO, GPU i Compositor. To dużo informacji. Jednak w przypadku większości procesów związanych z wydajnością będziesz się interesować tylko informacjami z kilku ścieżek naraz.
Od wersji 125 Chrome jest dostępny nowy tryb konfiguracji, który umożliwia ukrywanie niepotrzebnych ścieżek lub ich przestawianie według własnych potrzeb. Jeśli np. optymalizujesz wolną interakcję, możesz ukryć wszystkie ścieżki oprócz ścieżek Interakcje, Główna i GPU.
Aby edytować ścieżki, kliknij prawym przyciskiem myszy nazwę dowolnej ścieżki i wybierz Skonfiguruj ścieżki…. Spowoduje to otwarcie trybu konfiguracji, w którym możesz wyświetlać, ukrywać i przestawiać poszczególne ścieżki. Aby zapisać ustawienia, kliknij przycisk Zakończ konfigurowanie ścieżek.
Konfigurowanie ścieżek pozwala Ci kontrolować sposób, w jaki panel Skuteczność przedstawia kluczowe informacje dotyczące Twojego przepływu pracy. Za pomocą tych ustawień możesz ukryć aktywność z niepowiązanych procesów i przesuwać ścieżki w taki sposób, aby zapewnić sobie najłatwiejszy dostęp do potrzebnych danych.
Podsumowanie
Te 3 funkcje zapewniają nowe, zaawansowane i wygodne opcje konfiguracyjne, które umożliwiają dostosowywanie procesów związanych ze skutecznością. Dzięki tym funkcjom i zredukowaniu ilości szumu będziesz w znacznie lepszym położeniu, aby znaleźć to, czego szukasz, i zinterpretować dane.
Chętnie dowiemy się, co działa dobrze, a co można ulepszyć. Jeśli masz pytania lub chcesz przekazać ogólną opinię, skontaktuj się z nami na koncie @ChromeDevTools. Jeśli coś nie działa lub masz sugestie dotyczące nowych funkcji, zostaw komentarz do tego otwartego problemu.
To dopiero początek naszej inicjatywy mającej na celu ulepszanie narzędzi do optymalizacji wydajności w Chrome. Z przyjemnością informujemy, że pracujemy nad wieloma innymi funkcjami, które sprawią, że panel Wydajność będzie jeszcze łatwiejszy w użyciu i bardziej wydajny. Następny post, w którym zaprezentujemy kolejną grupę funkcji, opublikujemy na blogu Chrome dla deweloperów. Tymczasem zapoznaj się ze stroną Nowości w Chrome, aby być na bieżąco z wszystkim, co nowego w Narzędziach deweloperskich i Chrome.