Brzmi znajomo? Testujesz problem z wydajnością w Narzędziach deweloperskich w Chrome, ale przytłaczająca ilość informacji w panelu Wydajność utrudnia skupienie się tylko na najistotniejszych i przydatnych elementach. 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. Panel Skuteczność ma tak ogromne możliwości, ale nie powinien kosztować jego 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:
- Ukrywaj nieistotne fragmenty osi czasu
- Ukrywanie nieistotnych części wykresu płomieniowego
- Ukryj nietrafne ścieżki
W tym poście przyjrzymy się bliżej każdej z tych funkcji i pokażemy, jak możesz z nich korzystać, aby skupić się tylko na najważniejszych informacjach.
Ukrywanie nieistotnych części osi czasu
Wydajność w internecie mierzy się 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 menu nawigacyjnego. 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 w ten sposób osi czasu może być szczególnie przydatne, jeśli próbujesz debugować problemy z responsywnością (np. gdy chcesz skupić się na pojedynczej interakcji lub na długim zadaniu).
Poprzedni zrzut ekranu pokazuje zbliżenie widoku osi czasu, który wizualizuje aktywność wątku głównego, 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ą . Menu nawigacyjne znajdują się nad omówieniem osi czasu, a każdy z nich jest oznaczony etykietą odpowiadającą rozmiarowi okna czasowego.
Aby skorzystać z tej funkcji:
- Powiększ i przesuń oś czasu, aby wyświetlić interesujący Cię obszar.
- Kliknij ikonę lupy w przeglądzie osi czasu, aby ograniczyć zakres osi czasu i ustawić menu nawigacyjne.
- W razie potrzeby powtórz te czynności, aby powiększyć interesujący Cię zagnieżdżony obszar.
- 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. Może to znacznie ułatwić znalezienie możliwości związanych ze skutecznością, takich jak wymuszone przeformatowania, i znalezienie głównej przyczyny na wykresie płomieniowym.
Ukrywanie nieistotnych części wykresu płomieniowego
Analiza aktywności na głównym wątku to nie lada wyzwanie. Ta część panelu Skuteczność nosi nazwę wykresu płomieniowego ze względu na to, jak długie mogą być stosy wywołań. 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 Chrome 124, możesz dokładnie dostosować, które wpisy na wykresie płomieniowym chcesz ukryć, dzięki czemu możesz 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 słupkowego. Jego podrzędne elementy przesuną się w górę, aby pojawiły się bezpośrednio po funkcji nadrzędnej.
- Ukryj elementy podrzędne: przytnij wykres płomieniowy przy 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.
Po zaznaczeniu funkcji możesz też użyć kilku przydatnych skrótów klawiszowych:
- H: ukryj wybraną funkcję
- C: ukryj podrzędne wybranej funkcji.
- R: ukryj instancje wybranej funkcji znajdujące się dalej w stosie.
- U: pokaż ukryte elementy podrzędne 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ą zachowywane, 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 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ć podrzędne wybranej funkcji lub zresetować wszystkie ukryte funkcje w całym prześwietleniu. Funkcje z ukrytymi elementami podrzędnymi są opatrzone ikoną ▼, która po kliknięciu powoduje też zresetowanie tych elementów.
Zbędna głębia i złożoność, które można usunąć z wykresu płomieniowego, sprawią, że będzie on bardziej użyteczny. Możliwość dostosowania wyświetlanych wpisów to ergonomiczna poprawa, dzięki której możesz skupić się na najważniejszych informacjach związanych z wykonywanym zadaniem.
Ukrywanie nieistotnych ścieżek
Aktywność w głównym wątku stanowi tylko jedną ścieżkę w panelu Wydajność. Ścieżki w panelu Wydajność wizualizują działanie procesu i są połączone ze wspólnym harmonogramem, co ułatwia debugowanie. Oprócz ścieżki Główna dostępne są też osobne ścieżki dla innych ramek podrzędnych, wątków i instancji roboczych używanych przez stronę oraz ścieżki Sieć, Klatki, 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.
W Chrome 125 od wersji 125 dostępny jest nowy tryb konfiguracji, który umożliwia ukrywanie niepotrzebnych ścieżek i zmianę ich kolejności. Jeśli np. optymalizujesz powolną interakcję, możesz ukryć wszystko poza ścieżkami Interakcje, Główne 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ść przed niezwiązanymi procesami 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 konfiguracji, które ułatwiają dostosowywanie procesów związanych ze skutecznością. Korzystając z tych funkcji i redukcji szumu, łatwiej znajdziesz to, czego szukasz, i łatwiej zrozumiesz 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 propozycję nowych funkcji, napisz komentarz dotyczący tego otwartego problemu.
To dopiero początek naszej inicjatywy, której celem jest ulepszanie narzędzi Chrome do wydajności. Z przyjemnością przedstawiamy wszystko, co stworzyliśmy, aby panel Skuteczność był łatwiejszy w użyciu i jeszcze 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.