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 teraz przewija wykres płomienia, a przesuwanie i przewijanie służy do przybliżania i oddalania.
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ą podsumowania 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ą) przechwytu, 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 szkielet wywołania Twojej platformy jest na tyle rozbudowany, że musisz przewijać panel wydajności w górę i w dół. Często będziesz też chciała zwinąć większość tego szkieletu, aby skupić się na ważnych częściach.
Możesz kliknąć prawym przyciskiem myszy wpis na diagramie płomienistym i wybrać Dodaj skrypt do listy ignorowanych. Skrypt zostanie dodany do listy ignorowanych w Narzędziach deweloperskich i wszystkie wpisy z tego skryptu zostaną zwinięte na diagramie płomienistym.
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 zwijana w pojedyncze wpisy na wykresie płomieniowym. Lista jest trwała w całych sesjach 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 nie mamy nad nimi kontroli lub są one nieistotne 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ć.