Hallo! Tu jeszcze raz Kayce – autorka tekstów technicznych w Narzędziach deweloperskich. W związku z tym podsumowaniem narzędzi dla deweloperów chcę je trochę zmienić i przygotować podsumowanie kilku ulepszeń w narzędziach deweloperskich dostępnych w ostatnich wersjach Chrome.
Wszystkie funkcje są już dostępne w wersji stabilnej Chrome, chyba że wskazano inaczej.
Ograniczanie wykorzystania procesora w świecie urządzeń mobilnych
Dostępne w Chrome 54 (obecnie Canary).
Oprogramowanie zabija świat, a telefony komórkowe – oprogramowanie. Narzędzia deweloperskie stale się zmieniają, aby lepiej zaspokajać potrzeby środowiska programistycznego nastawionego na urządzenia mobilne. Najnowsze wprowadzone w narzędziach deweloperskich narzędzia zoptymalizowane pod kątem urządzeń mobilnych to ograniczanie wykorzystania procesora. Dzięki tej funkcji możesz lepiej poznać wydajność witryny na urządzeniach z ograniczonymi zasobami.
Wybierz jedną z opcji z menu Ograniczanie procesora w panelu Oś czasu, aby ograniczyć moc obliczeniową komputera, którego używasz.
Kilka uwag na temat ograniczania wykorzystania procesora:
- Ograniczanie zaczyna obowiązywać od razu i trwa, dopóki go nie wyłączysz, tak samo jak w przypadku ograniczania przepustowości sieci.
- Ta funkcja pozwala ogólnie określić, jak powinna działać witryna na urządzeniu o ograniczonych zasobach. Narzędzia deweloperskie nie są w stanie w pełni naśladować wydajności urządzeń mobilnych.
- Ograniczanie jest zależne od komputera, którego używasz do programowania. Oznacza to, że 5-krotne ograniczanie w przypadku zaawansowanych komputerów stacjonarnych daje inne wyniki niż 5-krotne ograniczanie w przypadku pięcioletniego, budżetowego laptopa.
Mimo to jeśli połączysz ograniczanie wykorzystania procesora z funkcją ograniczania sieci i trybem urządzenia, zyskasz lepszy wgląd w wygląd i wydajność witryny na urządzeniach mobilnych bezpośrednio w przeglądarce komputera.
Widok sieci w nagraniach osi czasu
Aby sprawdzić, jak strona pobiera zasoby, podczas nagrywania na osi czasu zaznacz pole wyboru Sieć. Kliknij zasób, aby w panelu Podsumowanie wyświetlić więcej informacji na jego temat.
Szczególnie przydatne jest pole Inicjator w podsumowaniu. To pole informuje o miejscu żądania zasobu.
Pasywne detektory zdarzeń
Pasywne detektory zdarzeń to nowy standard poprawiający wydajność przewijania. Przeczytaj ten artykuł, aby dowiedzieć się więcej:
Ulepszanie wydajności przewijania za pomocą pasywnych detektorów zdarzeń
W Narzędziach deweloperskich wprowadziliśmy kilka funkcji, które pomogą Ci znaleźć słuchaczy, którym {passive: true} przyda się odrobina Twojej uznania.
Przede wszystkim konsola wyświetla ostrzeżenie, gdy synchroniczny detektor blokuje przewijanie strony przez bezzasadny czas.
Możesz to sprawdzić samodzielnie w tej prezentacji:
Zacinanie się z powodu demonstracji obsługi dotyku/kółka
Następnie możesz skorzystać z menu w panelu Detektory zdarzeń, aby przefiltrować detektory pasywne lub blokujące.
Możesz też przełączyć stan pasywnego lub blokującego detektora, najeżdżając na niego kursorem i klikając Toggle Passive (Przełącz pasywny). Ta funkcja jest obecnie ograniczona do detektorów zdarzeń touchstart, touchmove, mousewheel i wheel.
Na koniec skorzystam z małej podpowiedzi. Aby zobaczyć wizualizację potencjalnych problemów z przewijaniem, zaznacz pole wyboru Problemy z wydajnością przewijania w panelu renderowania. Jeśli sekcja strony jest podświetlona, oznacza to, że jest z nią powiązany detektor, który może negatywnie wpłynąć na szybkość przewijania.
Grupuj według aktywności
W połowie czerwca w panelu Drzewo połączeń w panelu Oś czasu pojawiła się nowa kategoria sortowania: Grupuj według aktywności. Dzięki temu możesz sprawdzić, ile czasu Twoja strona poświęciła na analizowanie kodu HTML, ocenę skryptów, malowanie itd.
Statystyki osi czasu w panelu Źródła
Utwórz nagranie na osi czasu z włączoną opcją Profil JS. Czas wykonywania możesz sprawdzić w panelu Źródła z podziałem na poszczególne funkcje.
Podziel się swoją opinią
Jak zawsze, chętnie poznamy Twoje opinie i pomysły dotyczące Narzędzi deweloperskich.
- Odwiedź ChromeDevTools na Twitterze, aby zadać krótkie pytania, podzielić się z nami swoją opinią lub podzielić się nowymi pomysłami.
- W przypadku dłuższych dyskusji najlepszym rozwiązaniem będzie lista adresowa lub Stack Overflow.
- W przypadku jakichkolwiek problemów związanych z dokumentami otwórz problem w naszym repozytorium dokumentów.
Do przyszłego miesiąca.