Brzmi znajomo? Debugujesz problem z wydajnością w Narzędziach deweloperskich w Chrome, ale w panelu Wydajność jest przytłaczająca ilość informacji, które sprawiają, że trudno jest skupić się tylko na tych najważniejszych i przydatnych elementach. Poruszanie się po sobie może stanowić nie lada wyzwanie, niezależnie od długości osi czasu, głębokości wykresu płomieniowego i rozległości wielu ścieżek danych. Panel Wydajność jest niezwykle skuteczny, ale jego użyteczność nie powinna prowadzić do łatwości obsługi.
W ramach inicjatywy mającej na celu ulepszenie narzędzi zwiększających wydajność w Chrome wprowadziliśmy niedawno 3 nowe funkcje, które mają na celu ograniczenie zgęszczenia informacji i ułatwienie deweloperom dostosowywania 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 skupiać się tylko na najważniejszych informacjach.
Ukrywaj nieistotne części osi czasu
Skuteczność sieci jest mierzona w milisekundach, więc nawet jeśli nagranie dźwiękowe trwa tylko kilka sekund, często zdarza Ci się stracić miejsce.
W Chrome 122 dodaliśmy możliwość tworzenia menu nawigacyjnego. Ta funkcja pozwala zawężać granice osi czasu, tak aby możliwe było powiększenie i przesuwanie tylko interesującego Cię obszaru. Ten sposób ograniczania osi czasu może być szczególnie przydatny, jeśli na przykład próbujesz debugować problemy z czasem reakcji, by skupić się na pojedynczej interakcji lub zbyt długim zadaniu.
Poprzedni zrzut ekranu przedstawia zbliżenie osi czasu z wizualizacją głównego działania w wątku, takiego jak wykonanie skryptu i praca w prezentacji. Po najechaniu na niego kursorem pojawi się nowy przycisk, który ustawi granice osi czasu na bieżące okno. Przycisk jest oznaczony szerokością okna czasu w milisekundach i ikoną . Menu nawigacyjne znajdują się nad przeglądem osi czasu, a każdy z nich jest oznaczony rozmiarem swojego przedziału czasu.
Aby korzystać z tej funkcji:
- Powiększ i przesuń oś czasu do interesującego Cię obszaru.
- Kliknij ikonę lupy w omówieniu osi czasu, aby zablokować oś czasu i ustawić menu nawigacyjne.
- W razie potrzeby powtórz te czynności, aby powiększyć zagnieżdżony obszar, który Cię interesuje.
- Aby powrócić do wcześniej interesujących obszarów lub do pełnego zakresu osi czasu, kliknij menu nawigacyjne.
Przycięcie osi czasu zagwarantuje, że nigdy nie znajdziesz się w nieodpowiednim miejscu, gdy już znajdziesz na niej niezbędną część. W razie potrzeby możesz jednak pomniejszyć obraz, klikając menu nawigacyjne. Kolejną zaletą jest to, że przegląd osi czasu pozostaje dopasowany do poniższych ścieżek. Może to znacznie łatwiej dostrzec możliwości związane ze skutecznością, takie jak wymuszone przeformatowania, i zidentyfikować ich przyczynę na wykresie płomieniowym.
Ukryj nieistotne części wykresu płomieniowego
Analizowanie aktywności w głównym wątku to nie lada wyczyn. Ta część panelu Skuteczność jest nazywana wykresem płomieniowym ze względu na to, jak długa może być stos wywołań. W niektórych skrajnych przypadkach stosy te mogą być tak nieporęczne, że trudno jest zrozumieć je wszystkie i skupić się na tym, co chcesz zoptymalizować.
Począwszy od Chrome 124 możesz dostosować, które wpisy na wykresie płomieniowym mają być ukryte, możesz skupić się na najbardziej przydatnych informacjach.
Gdy klikniesz prawym przyciskiem myszy funkcję na wykresie płomieniowym, wyświetli się menu kontekstowe z kilkoma opcjami ukrywania wpisów:
- Ukryj funkcję: usuń wybraną funkcję z wykresu płomieniowego. Jego elementy podrzędne zostaną przeniesione w górę i pojawią się bezpośrednio po funkcji nadrzędnej.
- Ukryj elementy podrzędne: przytnij wykres płomieniowy dla wybranej funkcji i ukryj wszystkie jej elementy podrzędne.
- Ukryj powtarzające się elementy podrzędne: usuń wszystkie instancje wybranej funkcji z pozostałej części wykresu płomieniowego.
Istnieje też kilka przydatnych skrótów klawiszowych, których możesz użyć po wybraniu funkcji:
- H: ukryj wybraną funkcję
- C ukryj elementy podrzędne wybranej funkcji
- R: ukryj instancje wybranej funkcji później w stosie
- U: pokaż ukryte elementy podrzędne wybranej funkcji
Ukryj nietrafne skrypty na stałe
Opcja Dodaj skrypt do listy ignorowanych ukrywa wybraną funkcję na wykresie płomieniowym oraz wszystkie inne funkcje zdefiniowane w tym samym pliku skryptu. Skrypt zostanie też dodany do listy ignorowanych, której debuger Narzędzi deweloperskich używa do przechodzenia między funkcjami i ignorowania wyjątków pochodzących od skryptu.
Skrypty dodane do listy ignorowanych zostaną zachowane, więc w nowych śladach będą nadal ukryte na wykresie płomieniowym. Skrypty, które są poza Twoją kontrolą, dobrze nadają się do umieszczenia na liście ignorowanych. Z drugiej strony ukrywanie poszczególnych funkcji jest tymczasowe w odniesieniu do bieżącego logu czasu i w większym stopniu zależy od sytuacji. Możesz na przykład ukryć uciążliwy stos rekurencyjnych wywołań funkcji, aby ułatwić sobie pracę z śledzeniem.
Aby przywrócić listę ignorowanych lub dowolne inne ukryte funkcje na wykresie płomieniowym, możesz użyć menu kontekstowego, aby zresetować elementy podrzędne wybranej funkcji lub zresetować wszystkie funkcje ukryte w śladzie. Funkcje z ukrytymi elementami podrzędnymi są oznaczone ikoną ▼, która resetuje też elementy podrzędne po kliknięciu.
Niepotrzebna głębia i złożoność, które można wyeliminować, sprawi, że wykres płomieniowy stanie się bardziej użyteczny. Możliwość dostosowania wyświetlanych wpisów to ergonomiczna poprawa, która pomaga skupić się na najważniejszych informacjach związanych z danym zadaniem.
Ukryj nieistotne ścieżki
Aktywność w głównym wątku składa się tylko na 1 ścieżkę z panelu Skuteczność. Ścieżki w panelu Wydajność wizualizują działanie procesu. Są one zestawione pod wspólną osią czasu, co ułatwia debugowanie. Oprócz ścieżki głównej istnieją oddzielne ścieżki dla innych ramek podrzędnych, wątków i instancji roboczych używanych przez stronę, a także ścieżki Sieć, Klatki, Animacje i Interakcje. Jeszcze więcej ścieżek oznacza aktywność procesów Chrome niższego poziomu, takich jak IO, GPU czy Compositor. To bardzo dużo informacji! Jednak w większości przepływów pracy związanych ze wydajnością interesują Cię tylko informacje z kilku ścieżek naraz.
Od wersji Chrome 125 dostępny jest nowy tryb konfiguracji, który umożliwia ukrywanie niepotrzebnych ścieżek i ustawianie ich zgodnie z własnymi preferencjami. Jeśli np. optymalizujesz powolną interakcję, możesz ukryć wszystko oprócz ścieżek interakcji, głównych i GPU.
Aby edytować ścieżki, kliknij prawym przyciskiem myszy ich nazwy i wybierz Skonfiguruj ścieżki... Otworzy się tryb konfiguracji, w którym możesz wyświetlać, ukrywać i zmieniać kolejność poszczególnych ścieżek. Kliknij przycisk Zakończ konfigurowanie ścieżek, aby zapisać ustawienia.
Dzięki skonfigurowaniu ścieżek masz kontrolę nad tym, w jaki sposób panel Wydajność przedstawia kluczowe informacje w przepływie pracy. Dzięki tym ustawieniom możesz ukryć aktywność przed niepowiązanymi procesami i przenosić ścieżki w taki sposób, aby mieć łatwy dostęp do potrzebnych danych.
Podsumowanie
Te 3 funkcje zapewniają zaawansowane, ergonomiczne elementy sterujące, które pozwalają dostosowywać przepływy pracy związane z wydajnością. Dzięki tym funkcjom i zmniejszeniu ilości szumu będziesz mieć znacznie lepszą pozycję, by znaleźć to, czego szukasz, i zrozumieć dane.
Chętnie dowiemy się, co działa dobrze, a co możemy ulepszyć. Jeśli masz pytania lub chcesz przesłać ogólną opinię, napisz na adres @ChromeDevTools. Jeśli coś nie działa lub masz sugestię dotyczącą nowych funkcji, napisz komentarz na temat tego otwartego problemu.
To dopiero początek naszej inicjatywy mającej na celu ulepszenie narzędzi zwiększających wydajność w Chrome. Z przyjemnością udostępniamy wszystkie inne rozwiązania, dzięki którym panel Wydajność jest łatwiejszy w obsłudze i zwiększony niż kiedykolwiek wcześniej. Następny post z kolejną porcją funkcji opublikujemy na blogu Chrome dla deweloperów. W międzyczasie zajrzyj na stronę Co nowego w Chrome, aby być na bieżąco z nowościami w Narzędziach deweloperskich i Chrome.