Data publikacji: 19 marca 2025 r.
W ramach naszej inicjatywy mającej na celu poprawę narzędzi do optymalizacji wydajności Chrome informujemy o kolejnych ulepszeniach interakcji z panelem Wydajność w DevTools. Te ulepszenia mają na celu ułatwić Ci poruszanie się po śladach wydajności i wyeliminowanie nieistotnych informacji, abyś mógł/mogła szybko wykrywać i rozwiązywać problemy z wydajnością.
Ulepszona nawigacja
Od wielu użytkowników otrzymaliśmy opinie, że przewijanie i powiększanie w panelu Skuteczność może być nieintuicyjne. Wielu użytkowników korzysta z tego rozwiązania od dawna, ale wielu innych oczekuje, że gest przewijania będzie służył do przewijania, a nie do powiększania i pomniejszania ścieżki.
Nowa opcja w sekcji umożliwia przełączanie się między dotychczasowym przewijaniem „Klasycznym” a nowym „Nowoczesnym”.
W trybie klasycznym przewijanie (za pomocą trackpada lub kółka przewijania) powoduje powiększanie i pomniejszanie, a przytrzymanie klawisza Shift i przewijanie powoduje przesuwanie się wykresu w górę i w dół.
W nowym trybie nowoczesnym te funkcje są odwrócone: przewijanie powoduje teraz przewijanie wykresu słupkowego, a przesuwanie i przewijanie – powiększanie i pomniejszanie.
Skróty klawiszowe (np. WASD do poruszania się po śladzie) będą działać bez zmian.
Omówienie dwukierunkowe
U góry panelu Skuteczność znajduje się wykres Procesor, który jest częścią podglądu osi czasu. Pokazuje ona szacowane wykorzystanie procesora podczas nagrywania śladu, podzielone według typu pracy (np. pomarańczowy kolor oznacza wykonanie skryptu, a fioletowy – operacje renderowania).
Umożliwia to przegląd (czasem nazywany minimapą) śladu, który zawiera ogólne podsumowanie całej osi czasu, nawet gdy przybliżasz się, aby zbadać konkretne problemy.
Jednak podczas korzystania z tresu łatwo zgubić swoje dokładne położenie na minimapie i odwrotnie. Dlatego wprowadziliśmy nowe funkcje, które pomagają powiązać widok ogólny z widokiem powiększonym. Gdy najedziesz kursorem na przegląd, na diagramie płomieni pojawi się odpowiednia pionowa linia, która oznacza ten sam moment na diagramie:
Podobnie, najeżdżanie kursorem na wpisy na wykresie słupkowym powoduje teraz wyróżnienie odpowiedniej części wykresu procesora. Dzięki temu możesz dokładnie sprawdzić, które zadania powodują wzrost obciążenia procesora.
Filtrowanie ścieżki
Debugowanie problemów ze skutecznością zwykle wymaga przejrzenia dużej ilości danych. Aby pomóc Ci skupić się na najważniejszych informacjach, ulepszamy funkcję filtrowania szumu.
W zeszłym roku wprowadziliśmy możliwość dodawania skryptów w panelu Wydajność do listy ignorowanych w Narzędziach dla programistów, aby odfiltrowywać mniej istotne wpisy na wykresie słupkowym. Jeśli np. debugujesz wydajność komponentu na stronie, może Ci przeszkadzać to, że sterowanie wywołania w Twoim frameworku jest na tyle rozbudowane, że musisz przewijać panel wydajności w górę i w dół. Często chcesz też zwinąć większość tego sterowania, aby skupić się na ważnych częściach.
Możesz kliknąć wpis na diagramie płomienistym prawym przyciskiem myszy i wybrać Dodaj skrypt do listy ignorowanych. Skrypt zostanie dodany do listy ignorowanych w Narzędziach dla programistów i spowoduje zwijanie na diagramie płomienistym wszystkich wpisów z tego skryptu.
Teraz możesz też ręcznie edytować listę ignorowanych bezpośrednio w sekcji u góry panelu Skuteczność. Wyrażenia regularne z listy ignorowanych są udostępniane w Narzędziach deweloperskich, więc dopasowane skrypty są pomijane podczas debugowania w panelu Źródła i zwijane w pojedyncze wpisy na wykresie płomieniowym. Lista jest trwała w całości sesji w Narzędziach deweloperskich.
Dzięki temu możesz dokładnie określić, które pliki mają być ignorowane, oraz wygodnie włączać i wyłączać reguły podczas pracy.
Przyciemnianie skryptów innych firm
Skrypty innych firm są powszechne w witrynach, ale często są poza naszą kontrolą lub nie mają znaczenia w przypadku konkretnej sesji debugowania. Nowe Wyświetlaj szaro skrypty i aktywność sieci zewnętrznych u góry panelu Skuteczność powoduje przyciemnienie skryptów i aktywności sieci zewnętrznych na osi czasu, co zmniejsza wizualne zagęszczenie i pozwala skupić się na wpływie własnych działań na wyniki.
Czasami jednak potrzebujesz jeszcze większej kontroli, np. skupienia się na konkretnej usłudze innej firmy lub tylko na danych pochodzących z własnego interfejsu API lub CDN. U dołu panelu na karcie Podsumowanie znajduje się podział na zasoby własne i osoby trzecie, które DevTools może znaleźć na stronie. Gdy najedziesz kursorem na dany element na liście, wszystkie działania, które nie pochodzą z tego elementu, zostaną wyszarzone.
Podsumowanie
Te nowe funkcje powinny ułatwić Ci poruszanie się po panelu „Skuteczność” i odfiltrowywanie nieistotnych informacji, aby móc skupić się na tych częściach ścieżki, które są dla Ciebie ważne. Wypróbuj te funkcje i powiedz nam, jak można je jeszcze ulepszyć lub jakie inne ulepszenia chciałbyś zobaczyć.